Блог

Главная - Вопросы по программированию - Как заменить нумерацию страниц таймера индикаторами выполнения с помощью слайдера slick

Как заменить нумерацию страниц таймера индикаторами выполнения с помощью слайдера slick

#javascript #jquery #carousel

#javascript #jquery #карусель

Вопрос:

Итак, я пытаюсь скопировать apple.com стиль карусели. Я хотел иметь нумерацию страниц по таймеру, поэтому до сих пор я так много сделал: jsfiddle

Как я могу заменить кнопки разбивки на страницы индикаторами выполнения? Вот что у меня есть до сих пор:

 $(document).ready(function() {
  var time = 2;
  var $bar,
    $slick,
    isPause,
    tick,
    percentTime;

  $slick = $('.slider');
  $slick.slick({
    draggable: true,
    adaptiveHeight: false,
    dots: true,
    mobileFirst: true,
    pauseOnDotsHover: true,
  });

  $bar = $('.slider-progress .progress');

  $('.slider-wrapper').on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  })

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    tick = setInterval(interval, 10);
  }

  function interval() {
    if (isPause === false) {
      percentTime  = 1 / (time   0.1);
      $bar.css({
        width: percentTime   "%"
      });
      if (percentTime >= 100) {
        $slick.slick('slickNext');
        startProgressbar();
      }
    }
  }

  function resetProgressbar() {
    $bar.css({
      width: 0   '%'
    });
    clearTimeout(tick);
  }
  startProgressbar();
});  
 .slider-wrapper {
  width: 600px;
}
.slider {
  width: 600px;
  height: 400px;
  border: 1px solid #000;
}
.slide {
  width: 100%;
  height: 398px;
  background: #ccc;
}
#slick-1 .slick-dots li {
  width: 40px;
  height: 5px;
  background: #ccc;
}
#slick-1 .slick-dots li button {
  width: 40px;
  height: 5px;
}
#slick-1 .slick-dots li.slick-active,
#slick-1 .slick-dots li:hover {
  background: #777;
}
#slick-1 .slick-dots li button,
#slick-1 .slick-dots li button:before {
  color: transparent;
  opacity: 0;
}
/* progress bar */

.slider-progress {
  width: 100%;
  height: 3px;
  background: #eee;
}
.slider-progress .progress {
  width: 0%;
  height: 3px;
  background: #000;
}  
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>


<div class="slider-wrapper" id="slick-1">
  <div class="slider">
    <div class="slide">slider #1</div>
    <div class="slide">slider #2</div>
    <div class="slide">slider #3</div>
  </div>
  <div class="slider-progress">
    <div class="progress"></div>
  </div>
</div>

Ответ №1:

Просто вчера пришлось сделать это для моей компании. Это было немного сложнее, потому что slick реализован на нашем веб-сайте с 2 переходами: проведите пальцем, если мы используем мышь, исчезайте, если мы этого не делаем..

В любом случае, я вспомнил ваш пост, когда вчера немного копался, поэтому я упростил его здесь.

 $(".slider").slick({
  infinite: true,
  arrows: false,
  dots: false,
  autoplay: false,
  speed: 800,
  slidesToShow: 1,
  slidesToScroll: 1,
});

 //ticking machine
    var percentTime;
    var tick;
    var time = 1;
    var progressBarIndex = 0;

    $('.progressBarContainer .progressBar').each(function(index) {
        var progress = "<div class='inProgress inProgress"   index   "'></div>";
        $(this).html(progress);
    });

    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        tick = setInterval(interval, 10);
    }

    function interval() {
        if (($('.slider .slick-track div[data-slick-index="'   progressBarIndex   '"]').attr("aria-hidden")) === "true") {
            progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
            startProgressbar();
        } else {
            percentTime  = 1 / (time   5);
            $('.inProgress'   progressBarIndex).css({
                width: percentTime   "%"
            });
            if (percentTime >= 100) {
                $('.single-item').slick('slickNext');
                progressBarIndex  ;
                if (progressBarIndex > 2) {
                    progressBarIndex = 0;
                }
                startProgressbar();
            }
        }
    }

    function resetProgressbar() {
        $('.inProgress').css({
            width: 0   '%'
        });
        clearInterval(tick);
    }
    startProgressbar();
    // End ticking machine

    $('.progressBarContainer div').click(function () {
    	clearInterval(tick);
    	var goToThisIndex = $(this).find("span").data("slickIndex");
    	$('.single-item').slick('slickGoTo', goToThisIndex, false);
    	startProgressbar();
    });  
 h3 {
  margin:5px 0; 
}

.sliderContainer {
  position: relative;
}

.slider {
  width: 500px;
  margin: 30px 50px 50px;
}

.slick-slide {
  background: #3a8999;
  color: white;
  padding: 80px 0 120px;
  font-size: 30px;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dots {
  bottom: -30px;
}

.slick-slide:nth-child(odd) {
  background: #e84a69;
}

.progressBarContainer {
  position: absolute;
  bottom: 20px;
  width:300px;
  left:150px;
}

.progressBarContainer div {
  display: block;
  width: 30%;
  padding: 0;
  cursor: pointer;
  margin-right: 5%;
  float: left;
  color: white;
}

.progressBarContainer div:last-child {
  margin-right: 0;
}

.progressBarContainer div span.progressBar {
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  display: block;
}

.progressBarContainer div span.progressBar .inProgress {
  background-color: rgba(255, 255, 255, 1);
  width: 0%;
  height: 4px;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet"/>

<div class="sliderContainer">
  <div class="slider single-item">
    <div>Slide1</div>
    <div>Slide2</div>
    <div>Slide3</div>
  </div>
  <div class="progressBarContainer">
    <div>
      <h3>Slide 1</h3>
      <span data-slick-index="0" class="progressBar"></span>
    </div>
    <div>
      <h3>Slide 2</h3>
      <span data-slick-index="1" class="progressBar"></span>
    </div>
    <div>
      <h3>Slide 3</h3>
      <span data-slick-index="2" class="progressBar"></span>
    </div>
  </div>
</div>

[codepen][1]

С уважением,

Комментарии:

1. Вау, большое вам спасибо! Это действительно полезно. Я действительно ценю продолжение!

2. Это здорово! Есть ли шанс, что вы когда-нибудь поставите его на паузу при наведении курсора мыши?

Ответ №2:

Я не совсем хорошо знаком с ними, но, похоже, вам удалось запустить progressbar, поэтому не должно быть так сложно превратить кнопки разбивки на страницы в progressbar.

Что может помочь, так это то, что каждый из них имеет идентификатор элемента (первый — «slick-slide00»), а активный имеет класс «slick-active».

Поэтому, если вам нужно хакерское решение, может быть достаточно извлекать элемент «slick-active» каждый раз при изменении слайда (для этого должно быть прослушиваемое событие) и превращать элемент с классом «slick-active» в индикатор выполнения.

Для «более чистого» решения вам может потребоваться разобраться в самой платформе, поскольку на данный момент эта функция, похоже, не поддерживается.