У меня есть 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>
`
Нужно добавить 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть такая задача - найди количество цифр в числе и записать результат в переменную quantityВот упрощенное задание
есть 2 таблицы "Я" и "Друзья", как загнать всех друзей по отдельности в разные модели и вернуть все 3 модели? Через цикл? Если можно пример, заранее...