@Norum

Как на owl-carousel реализовать полосу прогресса прокрутки и номер активного слайда из числа общего кол-ва?

Как на owl-carousel реализовать полосу прогресса прокрутки и номер активного слайда из числа общего кол-ва и возможно ли это вообще?

Сам сайт ilyin1ib.beget.tech
Весь код jsfiddle.net/fs34kmz0/

60ea53428f2ec383584316.jpeg
<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><
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
FeST1VaL
@FeST1VaL
Тихий
Я не знаю почему вы не можете посчитать кол-во слайдов при выводе их из базы или откуда то... ну можете через JS через ивенты OWL вытащить кол-во слайдов...

Насчет вашего прогресса... ну как вариант... на скорую руку это немного переделать цвета... обратить так сказать местами... А так же не понимаю для чего вам !Important... ну ладно...

.main-gal .owl-dot {
    height: 10px;
    width: 20px;
    background-color: #ff5722 !important;
    display: inline-block;
    border-radius: 0;
    opacity: 1;
}
.main-gal .owl-dot.active {
  background-color: #ff5722 !important;
  opacity: 1;
  width: 40px;
}

.main-gal .owl-dot.active ~ .owl-dot {
    background: #fff !important;
    opacity: 0.5;
}




Видео как это у вас на сайте... Тк в вашем примере это не реально что то понять... тк нету картинок...
https://skr.sh/v/110721/8b6bufsw.mp4
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы