Показать сообщение отдельно
  #5 (permalink)  
Старый 10.12.2016, 15:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

slick 1.6.0 дополнительные кнопки управления
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://code.jquery.com/jquery-compat-git.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
  <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js">
</script>
  <style type="text/css">
.how-top-paging__slide.active{
    background-color:#FF0000;
  }

  span{
    margin:8px;
  }
  </style>

  <title>Slick variableWidth centerMode</title>
  <script>
$(window).on("load", function() {
    var slider = $(".how-slider");
    slider.slick({
        draggable: !1,
        arrows: !1,
        autoplay: !1
    });
    var dot = $(".how-top-paging__slide");
    slider.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
        dot.removeClass("active").eq(nextSlide).addClass("active")
    });
    dot.on("click", function() {
        var i = dot.index(this);
        slider.slick("slickGoTo", i)
    });
    $(".how__prev-slide").on("click", function() {
        slider.slick("slickPrev")
    });
    $(".how__next-slide").on("click", function() {
        slider.slick("slickNext")
    })
  });

  </script>
</head>

<body>
  <div class="how-top-paging">
    <span class="how-top-paging__slide active" data-count="0">11</span><span class="how-top-paging__slide" data-count="1">22</span><span class="how-top-paging__slide" data-count="2">33</span>
  </div>

  <div class="how-slider">
    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+1"></div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->

    <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/360x480&text=Slide+3"></div><!-- /.hotel-slider__slide -->
  </div><!-- /.hotel-slider -->
  <span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>
Ответить с цитированием