Как мне добиться эффекта выделения / тикера внутри слайдера? - PullRequest
Новая
       3

Как мне добиться эффекта выделения / тикера внутри слайдера?

0 голосов
/ 29 августа 2018

Отказ от ответственности: я использую библиотеку 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>

У меня вопрос: как создать эффект непрерывного выделения / тикера, используя слайды, которые останавливаются, как только вы наводите курсор на них?

1 Ответ

0 голосов
/ 29 августа 2018

Было много споров по этому вопросу, первоначальный автор решил не реализовывать такую ​​функцию, как эта, потому что горизонтальная бесконечная прокрутка не стоит дополнительной сложности.

Однако ...

После некоторой игры с приведенным выше кодом и работы над частичным решением, предоставленным 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>

Возможно, вы захотите отключить перетаскивание, если хотите добиться эффекта чистого выделения, но он полностью подходит для моего варианта использования.

...