Нужно сделать таймер как здесь http://www.apple.com/
Слайдер сделан с помощью slick.js, но к сожалению в плагине нет такого таймера. Можно ли было Speed передавать прогресс-бару?
$(document).ready(function () {
$('.slider').slick({
infinite: true,
autoplay:true,
dots: true,
arrows: false,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1
});
})
.slider .slick-dots {
padding: 0; }
.slider .slick-dots li {
position: relative;
display: inline-block;
width: 19%;
height: 15px;
margin: 0 2px 0 0;
padding: 0;
cursor: pointer;
background: #ccbdb6;
transition: width 5s ease-out 0s; }
.slider .slick-dots li:last-child {
margin-right: 0; }
.slider .slick-dots li:hover, .slider .slick-dots li.slick-active {
background: #a08a7f; }
.slider .slick-dots li button {
display: none !important; }
Ответ
добавлено css
$(document).ready(function() {
$('.slider').slick({
infinite: true,
autoplay: true,
dots: true,
arrows: false,
autoplaySpeed: 3000,
slidesToShow: 1,
slidesToScroll: 1
});
})
.slider .slick-dots{
padding:0;
}
.slider .slick-dots li{
position:relative;
display:inline-block;
width:19%;
height:15px;
margin:0 2px 0 0;
padding:0;
cursor:pointer;
background-color:#ccbdb6;
background-size:100% 100%;
background-image:-webkit-gradient(linear, left, right, color-stop(1, rgb(16,56,16)), color-stop(1, transparent));
background-image:-o-linear-gradient(left, rgb(16,56,16) 100%, transparent);
background-image:-moz-linear-gradient(left, rgb(16,56,16) 100%, transparent);
background-image:-webkit-linear-gradient(left, rgb(16,56,16) 100%, transparent);
background-image:linear-gradient(to right,rgb(16,56,16) 100%,transparent 100%);
background-repeat:no-repeat;
}
.slider .slick-dots li:last-child{
margin-right:0;
}
.slider .slick-dots li:hover,.slider .slick-dots li.slick-active{
background-color:#a08a7f;
}
.slider .slick-dots li button{
display: none !important;
}
.slider .slick-dots li.slick-active~li{
background-size:0% 0%;
}
.slider .slick-dots li.slick-active{
-webkit-animation:right 3s ease-in-out forwards;
-moz-animation:right 3s ease-in-out forwards;
-o-animation:right 3s ease-in-out forwards;
animation:right 3s ease-in-out forwards;
}
@keyframes right{
0%{
background-size:0% 100%;
}
100%{
background-size:100% 100%;
}
}
Комментариев нет:
Отправить комментарий