Ребята, всем привет! Подскажите, как сделать кастомную анимацию перехода для точек (dots) в слайдере, чтобы оно плавно линией переходило на другой активный слайд. Буду благодарен за подсказку!
2 ответа
Типа того?
let checked = null;
let changer = null;
let clickStopper = false;
const dotChanger = (event) => {
if (clickStopper) return false;
else clickStopper = true;
let target = event.target;
changer.style.setProperty('visibility', 'visible');
if (checked.offsetLeft < target.offsetLeft)
changer.style.setProperty('width', `${target.offsetLeft - checked.offsetLeft + checked.offsetWidth}px`);
else {
changer.style.setProperty('left', `${target.offsetLeft}px`);
changer.style.setProperty('width', `${checked.offsetLeft - target.offsetLeft + target.offsetWidth}px`);
};
setTimeout(()=>{
if (checked.offsetLeft < target.offsetLeft) changer.style.setProperty('left', `${target.offsetLeft}px`);
changer.style.removeProperty('width');
setTimeout(()=>{
changer.style.removeProperty('visibility');
checked = target;
clickStopper = false;
}, 500);
}, 500)
}
[...document.querySelectorAll('.slider__dots__dot')].forEach(dot=>{
dot.addEventListener('click', dotChanger);
});
checked = document.querySelector('.slider__dots__dot:checked');
changer = document.querySelector('.slider__dots__changer');
changer.style.setProperty('left', `${checked.offsetLeft}px`);
.slider {
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.2em;
}
.slider__dots {
display: flex;
justify-content: center;
background: black;
border-radius: 1rem;
position: relative;
margin-top: .5rem;
}
.slider__dots__dot {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
width: 1rem;
height: 1rem;
border-radius: .5rem;
background: white;
margin: .5rem;
transition: background .5s .5s ease-out;
}
.slider__dots__dot:active, .slider__dots__dot:checked {
background: purple;
}
.slider__dots__changer {
position: absolute;
visibility: hidden;
height: 1rem;
width: 1rem;
margin-top: 0.5rem;
border-radius: .5rem;
background: purple;
transition: left .5s ease-out, width .5s ease-out;
}
<div class='slider'>
<div class='slider__dots'>
<input type='radio' name='slider1' class='slider__dots__dot'>
<input type='radio' name='slider1' class='slider__dots__dot'>
<input type='radio' name='slider1' class='slider__dots__dot' checked>
<input type='radio' name='slider1' class='slider__dots__dot'>
<input type='radio' name='slider1' class='slider__dots__dot'>
<input type='radio' name='slider1' class='slider__dots__dot'>
<input type='radio' name='slider1' class='slider__dots__dot'>
<input type='radio' name='slider1' class='slider__dots__dot'>
<div id='slider1__changer' class='slider__dots__changer'></div>
</div>
</div>
$('.slick__slider').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
arrows: false,
dots: true,
appendDots: $(".slick__nav")
});
.slick__nav {
max-width: 300px;
margin: 0 auto;
}
.slick-dots {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.slick-dots button {
border: none;
height: 30px;
width: 30px;
border-radius: 15px;
background: purple;
outline: none;
cursor: pointer;
margin: 0 1px;
transition: width .2s linear;
}
.slick-active {
text-align: center;
}
.slick-active button{
width: 60px;
background: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<div class="slick">
<div class="slick__slider">
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
<div class="slick__slide">
<img src="https://via.placeholder.com/150">
</div>
</div>
<div class="slick__nav"></div>
</div>
-
Почти так, но анимацию перехода именно. Чтобы все были круглые а переход был как у Вас активный элемент. – w3cwhy 22 авг '20 в 12:36
-