Возможность пролистывания слайдов без изменения содержимого
Имеется 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> |
JS файл слайдера, может поможет:
http://kenwheeler.github.io/slick/slick/slick.js |
|
Цитата:
|
рони,
<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 я не понимаю:( |
рони,
Спасибо большое ещё раз за код и наводку, решил вопрос через мультислайдер + твой код:) |
рони,
<!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 всё нормально листается. |
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>
|
рони,
Спасибо Рони:) |
| Часовой пояс GMT +3, время: 08:37. |