Как в Owl-carousel сделать полосу прогресса пагинации и отображения номера слайда?
Вложений: 1
Как осуществить полосу прогресса пролистывания слайдов и отображение номера текущего слайда из общего числа слайдов?
Сам сайт http://ilyin1ib.beget.tech/ Весь код jsfiddle.net/fs34kmz0/ Код слайда <section class="spaces"> <div class="wrapper"> <div class="content"> <div class="spaces-title"> <h3>Our Spaces</h3> <p>Our space is designed to give you a different experience when working with your team or personally</p> <div class="plug"></div> </div> <div class="spaces-gal owl-carousel"> <div class="spaces-slide one"> <h4>Private Space</h4> <p>Comfortable space, Full speed wifi, Free coffe & Snack<br>and many more</p> <div class="details"> <span>Check avaibility</span><i class='fas fa-chevron-right'></i> </div> </div> <div class="spaces-slide two"> <img src="img/space-2.jpg" alt="2"> <span>Custom Office</span> <div class="details"> <span>Check avaibility</span><i class='fas fa-chevron-right'></i> </div> </div> <div class="spaces-slide three"> <img src="img/space-3.jpg" alt="3"> <div class="details"> <span>Check avaibility</span><i class='fas fa-chevron-right'></i> </div> <span>Problem solving</span> </div> <div class="spaces-slide four"> <img src="img/space-4.jpg" alt="4"> <div class="details"> <span>Check avaibility</span><i class='fas fa-chevron-right'></i> </div> <span>Working with team</span> </div> </div> </div> </div> </section> $(".spaces-gal.owl-carousel").owlCarousel({ autoplay: false, slideSpeed: 9000, items: 3, autoHeight: true, loop: true, nav: true, navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"], center: true, dots: false, responsiveClass: true, smartSpeed: 400, margin: 30, responsive: { 0: { items: 1, margin: 0, dots: false, nav: true }, 768: {} } }); |
Часовой пояс GMT +3, время: 09:09. |