Slide in random direction and specific timings per slide about slidr

[bchanx]

Hi @BHWD, what you're asking for isn't supported natively by the library, but I think you can achieve something close with a little bit of custom code:

<div id="slidr-div" style="dislay: block">
  <div data-slidr="one" data-delay="1000">apple</div>
  <div data-slidr="two" data-delay="2000">banana</div>
  <div data-slidr="three" data-delay="3000">coconut</div>
</div>

// The after transition callback which will handle the randomness
let afterCallback = (e) => {
  // Retrieve the delay on the slide
  let delay = e.in.el.getAttribute('data-delay');
  // Wait for the delay, then trigger the next slide
  setTimeout(() => {
    // 50% chance to slide either direction
    s.slide(!!Math.round(Math.random()) ? 'left' : 'right');
  }, delay);
};

// Store a reference to the slidr.
// Create three horizontal slides in a loopback.
let s = slidr.create('slidr-div', {
  after: afterCallback.bind(this)
}).add('h', ['one', 'two', 'three', 'one']);


// Now start the slidr
s.start();

// Trigger the first slide to kick off the slides
setTimeout(() => {
  s.slide('right');
}, 1000)

Here's a jsfiddle demonstrating that in action: https://jsfiddle.net/shb6tco1/

I suppose you can set the direction in a data-attribute on the slide as well, although that wouldn't be entirely random as it would be statically set. If you decided to update the data-attribute of the element on the fly, you would have to keep overwriting the slidr direction mapping via s.add() so that the slide can actually travel in the new, random direction.

[bchanx]

@BHWD just for fun, here's another fiddle with a totally random direction after each slide: https://jsfiddle.net/zneodqab/

[BHWD]

@bchanx this is brilliant! thank you, I can make this work :) 👍

[BHWD]

@bchanx is it possible to trigger a nested slidr when the parent slide loads? I have some slides which have another slidr in it too so when the parent loads I'd like to trigger this child slidr. I am able to set any data attribute for reference if required?