如何在滑塊內實現字幕/股票行情效果？

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> 

我的問題是，如何使用幻燈片創建連續的字幕/行情類似效果，將其懸停在幻燈片上就可以暫停？

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> 

如果您希望獲得純粹的字幕效果，則可能需要禁用拖放功能，但這完全適合我的用例。