title: How can I achieve a marquee / ticker effect inside a slider?
body: <p>Disclaimer: I'm using the <a href="https://github.com/metafizzy/flickity" rel="nofollow noreferrer"><code>flickity-slider</code></a> library to achieve the basic slideshow effect.</p>
  
  <p>I have created a slideshow of various <code>&lt;div&gt;</code> elements, that all contain a picture element, a title and some content. Using the following mock up HTML structure:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="b-slider__slides js-main-slider"&gt;
   &lt;div class="b-slider__slide"&gt;
    &lt;a href="#" class="b-slider__ref"&gt;
     &lt;picture class="b-slider__picture"&gt;
      &lt;img src="https://via.placeholder.com/350x150" alt="Couple in car"&gt;
     &lt;/picture&gt;
     &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
     &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
    &lt;/a&gt;
   &lt;/div&gt;
   &lt;div class="b-slider__slide"&gt;
    &lt;a href="#" class="b-slider__ref"&gt;
     &lt;picture class="b-slider__picture"&gt;
      &lt;img src="https://via.placeholder.com/350x150" alt="Couple in car"&gt;
     &lt;/picture&gt;
     &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
     &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
    &lt;/a&gt;
   &lt;/div&gt;
   &lt;div class="b-slider__slide"&gt;
    &lt;a href="#" class="b-slider__ref"&gt;
     &lt;picture class="b-slider__picture"&gt;
      &lt;img src="https://via.placeholder.com/350x150" alt="Couple in car"&gt;
     &lt;/picture&gt;
     &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
     &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
    &lt;/a&gt;
   &lt;/div&gt;
   &lt;div class="b-slider__slide"&gt;
    &lt;a href="#" class="b-slider__ref"&gt;
     &lt;picture class="b-slider__picture"&gt;
      &lt;img src="https://via.placeholder.com/350x150" alt="Couple in car"&gt;
     &lt;/picture&gt;
     &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
     &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
    &lt;/a&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using the <code>flickity-slider</code> (version 2.1.2) and jQuery, I can generate a slideshow based on this structure:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(() =&gt; {
    const mainTicker = new Flickity('.js-main-slider', {
      accessibility: true,
      wrapAround: true,
      prevNextButtons: true,
      pageDots: false,
      autoPlay: true
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.min.js"&gt;&lt;/script&gt;
      &lt;div class="b-slider__slides js-main-slider"&gt;
       &lt;div class="b-slider__slide"&gt;
        &lt;a href="#" class="b-slider__ref"&gt;
         &lt;picture class="b-slider__picture"&gt;
          &lt;img src="https://via.placeholder.com/350x150"&gt;
         &lt;/picture&gt;
         &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
         &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
        &lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="b-slider__slide"&gt;
        &lt;a href="#" class="b-slider__ref"&gt;
         &lt;picture class="b-slider__picture"&gt;
          &lt;img src="https://via.placeholder.com/350x150"&gt;
         &lt;/picture&gt;
         &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
         &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
        &lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="b-slider__slide"&gt;
        &lt;a href="#" class="b-slider__ref"&gt;
         &lt;picture class="b-slider__picture"&gt;
          &lt;img src="https://via.placeholder.com/350x150"&gt;
         &lt;/picture&gt;
         &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
         &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
        &lt;/a&gt;
       &lt;/div&gt;
       &lt;div class="b-slider__slide"&gt;
        &lt;a href="#" class="b-slider__ref"&gt;
         &lt;picture class="b-slider__picture"&gt;
          &lt;img src="https://via.placeholder.com/350x150"&gt;
         &lt;/picture&gt;
         &lt;span class="b-slider__date"&gt;29/01/1993&lt;/span&gt;
         &lt;h3 class="b-slider__subtitle"&gt;Lorem ipsum&lt;/h3&gt;
        &lt;/a&gt;
       &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My question is, how can I create a continuous marquee/ticker like effect using slides, that pause as soon as you hover over them?</p>