Форум

sergey24 · #1 (**permalink**) 06.02.2017, 11:56

Имеется slick слайдер с превью. Взят тут: http://kenwheeler.github.io/slick/ Пример называется: Slider Syncing. Собственно вопрос, можно ли сделать так, чтобы при пролистывании нижнего слайдера содержимое верхнего не менялось. А менялось только по клику на превьюху.

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

<div class="slider-nav">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>
<div class="slider-for">
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
	<div>ТутТекст1</div>
</div>

sergey24 · #2 (**permalink**) 06.02.2017, 12:51

JS файл слайдера, может поможет:
http://kenwheeler.github.io/slick/slick/slick.js

рони · #3 (**permalink**) 06.02.2017, 13:30

sergey24,
может чем поможет
Доработка Slick Slider

sergey24 · #4 (**permalink**) 06.02.2017, 13:33

Сообщение от рони

sergey24,
может чем поможет
Доработка Slick Slider

Как раз изучаю эту тему. Спасибо

sergey24 · #5 (**permalink**) 06.02.2017, 13:52

рони,

<script>
		$(window).on("load", function() {
			var slider = $(".slider-for");
    		$(".how__prev-slide").on("click", function() {
        		slider.slick("slickPrev")
    		});
    		$(".how__next-slide").on("click", function() {
        		slider.slick("slickNext")
    		})
        });
  </script>

<span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>

Кнопки без проблем добавил, вот минимальный код. Работают, но листаются 2 слайдера и как отрезать их от 1 я не понимаю

sergey24 · #6 (**permalink**) 06.02.2017, 14:22

рони,
Спасибо большое ещё раз за код и наводку, решил вопрос через мультислайдер + твой код

sergey24 · #7 (**permalink**) 06.02.2017, 14:48

рони,

<!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>
<script type="text/javascript">
    $(document).ready(function(){
      $('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1
});
    });
  </script>
</head>

<body>
<div class="multiple-items">
  <div  class="how-top-paging__slide active" data-count="0">yourcontent</div>
  <div  class="how-top-paging__slide" data-count="1">your content</div>
  <div  class="how-top-paging__slide" data-count="2">your content</div>
  <div  class="how-top-paging__slide" data-count="3">yourcontent</div>
  <div  class="how-top-paging__slide" data-count="4">your content</div>
  <div  class="how-top-paging__slide" data-count="5">your content</div>
</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 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 class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2"></div><!-- /.hotel-slider__slide -->
  </div><!-- /.hotel-slider -->
  <span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>

Вроде работает, но как-то странно. Выделение выбранного слайда работает криво, не все выделяются. Перелистывание слайдов работает странно, пролетают как будто слайдов 10, хотя выбираю следующий слайд. Странно. Можешь помочь? Через кнопки next prev всё нормально листается.

рони · #8 (**permalink**) 06.02.2017, 15:20

sergey24,

<!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
    });
    $(".multiple-items").slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
    var dot = $(".multiple-items .how-top-paging__slide");
    slider.on("beforeChange", function(event, slick, currentSlide, nextSlide) {
        dot.removeClass("active").filter("[data-count='" + nextSlide + "']").addClass("active")
    });
    dot.on("click", function() {
        var i = $(this).data("count");
        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="multiple-items">
  <div  class="how-top-paging__slide active" data-count="0">yourcontent0</div>
  <div  class="how-top-paging__slide" data-count="1">your content1</div>
  <div  class="how-top-paging__slide" data-count="2">your content2</div>
  <div  class="how-top-paging__slide" data-count="3">yourcontent3</div>
  <div  class="how-top-paging__slide" data-count="4">your content4</div>
  <div  class="how-top-paging__slide" data-count="5">your content5</div>
</div>

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

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

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

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

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

  <div class="hotel-slider__slide hotel-slider__media"><img src="http://placehold.it/720x480&text=Slide+2">5</div><!-- /.hotel-slider__slide -->
  </div><!-- /.hotel-slider -->
  <span class="how__prev-slide">prev</span><span class="how__next-slide">next</span>
</body>
</html>

sergey24 · #9 (**permalink**) 06.02.2017, 15:51

рони,
Спасибо Рони

Форум

Справочник

Discord чат

Курсы javascript