Slide in random direction and specific timings per slide

[BHWD]

I am using slidr to build out a display screen and it works well however I have 2 things I would like to accomplish. The first being, could I set a data-attribute on each slide which determines the direction to slide next, thus allowing me to create a 'random' effect for transitions?

The 2nd thing I would like to do is have a data-attribute on each slide which defines how long this slide should be visible for before advancing - is this also possible using the api at all?

Thanks in advamce

[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?