var swiper = new Swiper('.swiper-container', {
//...
renderFraction: function (currentClass, totalClass) {
return '<span class="' + currentClass + '"></span>' +
' of ' +
'<span class="' + totalClass + '"></span>';
}
});
of
(1 of 10) mySuperFunction1(ignoreCache, isReverse, removeEmpty, visible) { ... }
mySuperFunction2({ignoreCache, isReverse, removeEmpty, visible}) { ... }
mySuperFunction1(false, true, true, true);
mySuperFunction2({
ignoreCache: false,
isReverse: true,
removeEmpty: true,
visible: true
})
$emit(`name`, [arg1, arg2]);
@событие="metod(...$event)"
<div class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox__input">
<label for="checkbox" class="checkbox__label"></label>
<p class="checkbox__text">Lorem ipsum <a href="#">policy</a> aspernatur minima.</p>
</div>
<p><img src=picture.jpg></p>
<p>Текст, текст, текст, текст, текст</p>
<p><img src=picture2.jpg width=300 height=200></p>
<p>Текст, текст, текст, текст, текст</p>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
<div class="swiper-slide">4</div>
<div class="swiper-slide">5</div>
</div>
<div class="swiper-pagination"></div>
<div class="timer-swiper"><div class="timer-swiperAfter"></div></div><!--Здесь к обычной верстке свайпера добавил только прогресс-бар. И да, назвал неправильно, знаю)-->
</div>
var swiper = new Swiper(".mySwiper", {
direction: "horizontal",
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
on: {
slideChange: ()=> {//Здесь мы переключаем старый слайд на новый и нужно обновить прогресс-бар. Без таймаута стиль не обновляется.
document.querySelector('.timer-swiperAfter').classList.remove('active');
setTimeout(() => {
document.querySelector('.timer-swiperAfter').classList.add('active');
}, 50);
},
},
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
.timer-swiper{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 10px;
background: white;
z-index: 2;
}
.timer-swiperAfter{
background: #007aff;
height: 100%;
width: 0;
height: 10px;
display: block;
}
.timer-swiperAfter.active{
width: 100%;
transition: 5s all;
}