How can I achieve a marquee / ticker effect inside a slider?

Question

Disclaimer: I'm using the flickity-slider library to achieve the basic slideshow effect.

I have created a slideshow of various <div> elements, that all contain a picture element, a title and some content. Using the following mock up HTML structure:

.b-slider__slides {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  overflow: hidden;
}

.b-slider__slide {
  margin: 0 2.5rem;
  text-align: center;
}

a {
  color: #000;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b-slider__slides js-main-slider">
 <div class="b-slider__slide">
  <a href="#" class="b-slider__ref">
   <picture class="b-slider__picture">
    <img src="https://via.placeholder.com/350x150" alt="Couple in car">
   </picture>
   <span class="b-slider__date">29/01/1993</span>
   <h3 class="b-slider__subtitle">Lorem ipsum</h3>
  </a>
 </div>
 <div class="b-slider__slide">
  <a href="#" class="b-slider__ref">
   <picture class="b-slider__picture">
    <img src="https://via.placeholder.com/350x150" alt="Couple in car">
   </picture>
   <span class="b-slider__date">29/01/1993</span>
   <h3 class="b-slider__subtitle">Lorem ipsum</h3>
  </a>
 </div>
 <div class="b-slider__slide">
  <a href="#" class="b-slider__ref">
   <picture class="b-slider__picture">
    <img src="https://via.placeholder.com/350x150" alt="Couple in car">
   </picture>
   <span class="b-slider__date">29/01/1993</span>
   <h3 class="b-slider__subtitle">Lorem ipsum</h3>
  </a>
 </div>
 <div class="b-slider__slide">
  <a href="#" class="b-slider__ref">
   <picture class="b-slider__picture">
    <img src="https://via.placeholder.com/350x150" alt="Couple in car">
   </picture>
   <span class="b-slider__date">29/01/1993</span>
   <h3 class="b-slider__subtitle">Lorem ipsum</h3>
  </a>
 </div>
</div>

Using the flickity-slider (version 2.1.2) and jQuery, I can generate a slideshow based on this structure:

$(document).ready(() => {
  const mainTicker = new Flickity('.js-main-slider', {
    accessibility: true,
    wrapAround: true,
    prevNextButtons: true,
    pageDots: false,
    autoPlay: true
  });
});

@import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css');

.b-slider__slides {
  width: 100%;
  background: blue;
  overflow: hidden;
}

.b-slider__slide {
  margin: 0 2.5rem;
  text-align: center;
  background: red;
  width: 30rem;
  height: 20rem;
}

a {
  display: flex;
  flex-flow: column nowrap;
  background: red;
  color: #000;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"></script>
    <div class="b-slider__slides js-main-slider">
     <div class="b-slider__slide">
      <a href="#" class="b-slider__ref">
       <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
       </picture>
       <span class="b-slider__date">29/01/1993</span>
       <h3 class="b-slider__subtitle">Lorem ipsum</h3>
      </a>
     </div>
     <div class="b-slider__slide">
      <a href="#" class="b-slider__ref">
       <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
       </picture>
       <span class="b-slider__date">29/01/1993</span>
       <h3 class="b-slider__subtitle">Lorem ipsum</h3>
      </a>
     </div>
     <div class="b-slider__slide">
      <a href="#" class="b-slider__ref">
       <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
       </picture>
       <span class="b-slider__date">29/01/1993</span>
       <h3 class="b-slider__subtitle">Lorem ipsum</h3>
      </a>
     </div>
     <div class="b-slider__slide">
      <a href="#" class="b-slider__ref">
       <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
       </picture>
       <span class="b-slider__date">29/01/1993</span>
       <h3 class="b-slider__subtitle">Lorem ipsum</h3>
      </a>
     </div>
    </div>

My question is, how can I create a continuous marquee/ticker like effect using slides, that pause as soon as you hover over them?

score 4 · Accepted Answer · answered Aug 29 '18 at 09:00

There's been a lot of debate going on regarding this subject, the original author has chosen not to implement a functionality like this because horizontal infinite scrolling is not worth the additional complexity.

However...

After some playing around with the above code, and working on a partial solution provided by koraysels, I came up with the following (working!) snippet:

const mainTicker = new Flickity('.js-main-slider', {
  accessibility: true,
  resize: true,
  wrapAround: true,
  prevNextButtons: false,
  pageDots: false,
  percentPosition: true,
  setGallerySize: true,
});

// Set initial position to be 0
mainTicker.x = 0;

// Start the marquee animation
play();

// Main function that 'plays' the marquee.
function play() {
  // Set the decrement of position x
  mainTicker.x -= 1.5;

  // Settle position into the slider
  mainTicker.settle(mainTicker.x);

  // Set the requestId to the local variable
  requestId = window.requestAnimationFrame(play);
}

// Main function to cancel the animation.
function pause() {
  if(requestId) {
    // Cancel the animation
    window.cancelAnimationFrame(requestId)

    // Reset the requestId for the next animation.
    requestId = undefined;
  }
}

// Pause on hover/focus
$('.js-main-slider').on('mouseenter focusin', e => {
  pause();
})

// Unpause on mouse out / defocus
$('.js-main-slider').on('mouseleave', e => {
  play();
})

@import url('https://unpkg.com/flickity@2.1.2/dist/flickity.min.css');

.b-slider__slides {
  width: 100%;
  background: blue;
  overflow: hidden;
}

.b-slider__slide {
  margin: 0 2.5rem;
  text-align: center;
  background: red;
  width: 30rem;
  height: 20rem;
}

a {
  display: flex;
  flex-flow: column nowrap;
  background: red;
  color: #000;
  text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"></script>
<div class="b-slider__slides js-main-slider">
  <div class="b-slider__slide">
    <a href="#" class="b-slider__ref">
      <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
      </picture>
      <span class="b-slider__date">29/01/1993</span>
      <h3 class="b-slider__subtitle">Lorem ipsum</h3>
    </a>
  </div>
  <div class="b-slider__slide">
    <a href="#" class="b-slider__ref">
      <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
      </picture>
      <span class="b-slider__date">29/01/1993</span>
      <h3 class="b-slider__subtitle">Lorem ipsum</h3>
    </a>
  </div>
  <div class="b-slider__slide">
    <a href="#" class="b-slider__ref">
      <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
      </picture>
      <span class="b-slider__date">29/01/1993</span>
      <h3 class="b-slider__subtitle">Lorem ipsum</h3>
    </a>
  </div>
  <div class="b-slider__slide">
    <a href="#" class="b-slider__ref">
      <picture class="b-slider__picture">
        <img src="https://via.placeholder.com/350x150">
      </picture>
      <span class="b-slider__date">29/01/1993</span>
      <h3 class="b-slider__subtitle">Lorem ipsum</h3>
    </a>
  </div>
</div>

You might want to disable drag and drop if you wish to achieve a pure marquee effect, but it was entirely suitable for my use case.

How can I achieve a marquee / ticker effect inside a slider?

1 Answers1