Как сделать circle progress bar на owl-carousel?

238

26 марта 2017, 05:19

Вообщем есть слайдер на owl-carousel 2, нужно сделать чтобы было так take.ms/L2Y7C тоесть dots а вокруг них крутится progress bar и снизу просто показывать какой из слайдов активен сейчас, уже 2 дня мучаюсь нигде не нашел ответа и пришел сюда.

Мой код самый обычный:

var timeout = 5000;
    var owl = $('.right_content .slider .owl-carousel').owlCarousel({
        items: 1,
        dots: true,
        nav: false,
        loop:true,
        autoplay: true,
        autoplayTimeout: timeout,
        dotsContainer: '#owldots',
        onChanged: function () {
        }
    });

может кто знает другой плагин слайдер где это можно реализовать, напишите плиз желательно уже с готовым кодом.

Answer 1

Сделал так:

var timeout = 5000;
    var owl = $('.right_content .slider .owl-carousel').owlCarousel({
        items: 1,
        dots: true,
        nav: false,
        loop:true,
        autoplay: true,
        autoplayTimeout: timeout,
        dotsContainer: '#owldots',
        onChanged: function () {
            $(function() {
                var loader = $('.right_content .slider .owl-dot.active .loader').ClassyLoader({
                    width: 60,
                    height: 60,
                    percentage: 100,
                    speed: 20,
                    animate: true,
                    showRemaining: false,
                    showText: false,
                    diameter: 20,
                    lineColor: 'rgba(245,206,12,1)',
                    lineWidth: 2
                });
            })
        }
    });

HTML

<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.classyloader.min.js"></script>
<div class="slider">
                <div class="owl-carousel">
                    <div class="slide">
                         слайд 1
                    </div>
                    <div class="slide">
                        слайд 2
                    </div>
                </div>
                <div class="owl-dots" id="owldots">
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                </div>
            </div>

SCSS

.owl-dots {
      position: absolute;
      right: 50px;
      top:250px;
      z-index: 20;
      .owl-dot {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin-bottom: 20px;
        position: relative;
        cursor: pointer;
        span {
          position: relative;
          top: 15px;
          left: 16px;
        }
        canvas {
          display: none;
          position: absolute;
          left: -9px;
          top: -10px;
        }
        &.active canvas {
          display: block;
        }
        &:hover,
        &.active {
          span {
            background: #fdcf09;
          }
        }
        span {
          width: 10px;
          height: 10px;
          display: block;
          border-radius: 50%;
          background: #00a651;
        }
      }
    }