Как сделать так, чтобы карусель скользила автоматически?

171
06 февраля 2022, 02:30

У меня есть HTML+JS код карусели. Как добавить автоматическое скольжение?

const track = document.querySelector('.carousel-track'); 
const slides = Array.from(track.children); 
const dotsNav = document.querySelector('.carousel-nav'); 
const dotsArray = Array.from(dotsNav.children); 
 
// console.log(track); 
// console.log(slides); 
// console.log(dotsNav); 
// console.log(dotsArray); 
 
const slideWidth = slides[0].getBoundingClientRect().width; 
// console.log(slideWidth); 
 
 
const setSlidePosition = (slide, index) => { 
	slide.style.left = slideWidth * index + 'px'; 
	slide.style.width = slideWidth + 'px'; 
}; 
 
slides.forEach(setSlidePosition); 
 
 
const moveToSlide = (track, currentSlide, targetSlide) => { 
	track.style.transform = 'translateX(-' + targetSlide.style.left; 
	currentSlide.classList.remove('active'); 
	targetSlide.classList.add('active'); 
} 
 
 
dotsNav.addEventListener('click', e => { 
	const targetDot = e.target.closest('button'); 
 
	if(!targetDot) return; 
 
	const currentSlide = track.querySelector('.active'); 
	const currentDot = dotsNav.querySelector('.active-dot'); 
	const targetIndex = dotsArray.findIndex(dot => dot === targetDot); 
	const targetSlide = slides[targetIndex]; 
 
	moveToSlide(track, currentSlide, targetSlide); 
 
	currentDot.classList.remove('active-dot'); 
	targetDot.classList.add('active-dot'); 
});
<div class="carousel" id="myCarousel"> 
  <div class="carousel-track__container"> 
      <ul class="carousel-track"> 
        <li class="item active"> 
          <p class="quotation">Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose.</p> 
          <cite class="quotation-author">-Steve Jobs</cite> 
        </li> 
        <li class="item"> 
          <p class="quotation">The biggest risk is not taking any risk… In a world that is changing really quickly, the only strategy that is guaranteed to fail is not taking risks.</p> 
          <cite class="quotation-author">-Mark Zuckerberg</cite> 
        </li> 
        <li class="item"> 
          <p class="quotation">The secret of happiness, you see, is not found in seeking more, but in developing the capacity to enjoy less</p> 
          <cite class="quotation-author">-Socrates</cite> 
        </li> 
      </ul> 
    </div> 
    <div class="carousel-nav"> 
      <button class="carousel-indicator active-dot"></button> 
      <button class="carousel-indicator"></button> 
      <button class="carousel-indicator"></button> 
    </div>	 
  </div>

`

Answer 1

Нужно добавить transition для .carousel-track

const track = document.querySelector('.carousel-track'); 
const slides = Array.from(track.children); 
const dotsNav = document.querySelector('.carousel-nav'); 
const dotsArray = Array.from(dotsNav.children); 
 
// console.log(track); 
// console.log(slides); 
// console.log(dotsNav); 
// console.log(dotsArray); 
 
const slideWidth = slides[0].getBoundingClientRect().width; 
// console.log(slideWidth); 
 
 
const setSlidePosition = (slide, index) => { 
	slide.style.left = slideWidth * index + 'px'; 
	slide.style.width = slideWidth + 'px'; 
}; 
 
slides.forEach(setSlidePosition); 
 
 
const moveToSlide = (track, currentSlide, targetSlide) => { 
	track.style.transform = 'translateX(-' + targetSlide.style.left; 
	currentSlide.classList.remove('active'); 
	targetSlide.classList.add('active'); 
} 
 
 
dotsNav.addEventListener('click', e => { 
	const targetDot = e.target.closest('button'); 
 
	if(!targetDot) return; 
 
	const currentSlide = track.querySelector('.active'); 
	const currentDot = dotsNav.querySelector('.active-dot'); 
	const targetIndex = dotsArray.findIndex(dot => dot === targetDot); 
	const targetSlide = slides[targetIndex]; 
 
	moveToSlide(track, currentSlide, targetSlide); 
 
	currentDot.classList.remove('active-dot'); 
	targetDot.classList.add('active-dot'); 
});
.carousel-track { 
    transition: transform 1s ease-in-out; 
}
<div class="carousel" id="myCarousel"> 
  <div class="carousel-track__container"> 
      <ul class="carousel-track"> 
        <li class="item active"> 
          <p class="quotation">Remembering that you are going to die is the best way I know to avoid the trap of thinking you have something to lose.</p> 
          <cite class="quotation-author">-Steve Jobs</cite> 
        </li> 
        <li class="item"> 
          <p class="quotation">The biggest risk is not taking any risk… In a world that is changing really quickly, the only strategy that is guaranteed to fail is not taking risks.</p> 
          <cite class="quotation-author">-Mark Zuckerberg</cite> 
        </li> 
        <li class="item"> 
          <p class="quotation">The secret of happiness, you see, is not found in seeking more, but in developing the capacity to enjoy less</p> 
          <cite class="quotation-author">-Socrates</cite> 
        </li> 
      </ul> 
    </div> 
    <div class="carousel-nav"> 
      <button class="carousel-indicator active-dot"></button> 
      <button class="carousel-indicator"></button> 
      <button class="carousel-indicator"></button> 
    </div>	 
  </div>

READ ALSO
Сколько цифр в переменной?

Сколько цифр в переменной?

Есть такая задача - найди количество цифр в числе и записать результат в переменную quantityВот упрощенное задание

118
C#, PostgreSQL | Получение нескольких записей из таблицы по внешнему ключу

C#, PostgreSQL | Получение нескольких записей из таблицы по внешнему ключу

есть 2 таблицы "Я" и "Друзья", как загнать всех друзей по отдельности в разные модели и вернуть все 3 модели? Через цикл? Если можно пример, заранее...

152
Как работает UnityAction: event System.Action

Как работает UnityAction: event System.Action

В Unity Docs нашёл: https://docsunity3d

115