0

免责声明：我正在使用该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>

我的问题是，我怎样才能使用幻灯片创建一个连续的选框/自动收录器效果，一旦你将鼠标悬停在它们上面就会暂停？

4

1 回答 1

4

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

然而...

在玩弄了上面的代码并研究了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>

如果您希望实现纯选框效果，您可能希望禁用拖放，但它完全适合我的用例。

于 2018-08-29T09:00:25.990 回答