如何在滑块内实现选取框/自动收报机效果？

Question

免责声明：我正在使用 flickity-slider 库来实现基本的幻灯片效果。

我创建了一个包含各种 <div> 元素的幻灯片，所有元素都包含一个图片元素、一个标题和一些内容。使用以下模型 HTML 结构：

.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>

使用 flickity-slider（版本 2.1.2）和 jQuery，我可以根据此结构生成幻灯片：

$(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>

我的问题是，如何使用幻灯片创建连续的 marquee/ticker 效果，当您将鼠标悬停在幻灯片上时会立即暂停？

Answer 1

关于这个主题有很多争论，原作者选择不实现这样的功能，因为水平无限滚动不值得额外的复杂性。

然而...

在尝试了上面的代码并研究了 koraysels 提供的部分解决方案之后，我想出了以下（有效！）片段：

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>

如果您希望获得纯粹的选取框效果，您可能希望禁用拖放功能，但这完全适合我的用例。

如何在滑块内实现选取框/自动收报机效果？

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

html

javascript

jquery

flickity