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

Question

[Norum]

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

Сам сайт 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><

Answer 1

[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

Comments

[Norum]

Почему-то вместо первого слайда показывается цифра 5, вместо 1

[Norum]

и как можно сделать движение линии прогресса более плавной?

[FeST1VaL]

Norum, это баги самой карусели из за режима loop. Вы можете придумать как определять кол-во задублированных слайдов и вычитать как то их) я когда то делал, но щяс не найду) А писать лень...

[FeST1VaL]

Norum, Можно убрать вообще dots и сделать див например с классом progress и в той же функции добавлять по 40 ширины умноженую на index;

progressBox.css("width", index * 40);

ну и в ксс добавить транзишен