Здравствуйте как можно реализовать похожую анимацию переключения слайдера по точкам. Примерно как тут
Как это должно быть: при клике на точку она стает строго по центру остальные выравниваются под нее.
Вот что у меня получилось,при клике на точку она стает по центру,но как заставить двигаться другие точки относительно активной?
Подскажите как это возможно реализовать?
var ww = jQuery(window).width();
jQuery('.dots li').each(function (i) {
jQuery(this)
.css('right', (ww/2 - i*50)-20 +"px")
.attr('data-count',i);
});
jQuery('.dots li').click(function () {
jQuery(this).animate({
right: (ww/2)-20
},500);
})
.intro_temp{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
}
.dots{
height: 70px;
width: 100%;
display: flex;
align-items: center;
position: relative;
transition: all 1s ease;
}
.dots li{
transition: all 1s ease;
height: 50px;
width: 50px;
display: inline-block;
border: 1px solid $white;
margin: auto ;
position: absolute;
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
transform: rotate(45deg);
}
Ответ
Можно как то так. Суть изменений в том что анимацию мы прописываем для каждого элемента отдельно
var ww = jQuery(window).width();
var central=0;
jQuery('.dots li').each(function (i) {
jQuery(this)
.css('right', (ww/2 - i*50)-20 +"px")
.attr('data-count',i);
jQuery(this).click(function () {
central=i;
jQuery('.dots li').each(function (index){
jQuery(this).animate({right: ww/2- 20 + (central-index)*50},500);
});
})
})
.intro_temp{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000000;
}
.dots{
height: 70px;
width: 100%;
display: flex;
align-items: center;
position: relative;
transition: all 1s ease;
}
.dots li{
transition: all 1s ease;
height: 50px;
width: 50px;
display: inline-block;
border: 1px solid $white;
margin: auto ;
position: absolute;
top: 0;
bottom: 0;
right: 0;
cursor: pointer;
transform: rotate(45deg);
}
Комментариев нет:
Отправить комментарий