Нужен такой
слайдер
Использую Swiper 2.7.6. В офиц доках примеров не нашел, в гугле тоже. Может есть у кого примеры?
Вот мой код
if ($('.photo-slider').length) {
$('.photo-slider').each(function(i){
//формируем HTML для инициализации слайдера
var $this = $(this);
//ID слайдера
var id = 'photo_slider_'+i;
// $this.find('.slider').attr('id', id);
$this.find('.slider').attr('id', id);
//пагинация
var paginationClass = 'pagination-photo'+i;
$('.photo-slider').append('<div class="slider-pagination for-photo '+paginationClass+'"></div>');
var $slider = new Swiper('#'+id, {
slidesPerView: 1,
loop: true,
grabCursor: true,
//resizeReInit: true,
calculateHeight: true,
pagination: '.'+paginationClass,
paginationClickable: true
});
$this.find('.slider-arrow').on('click', function(){
if ($(this).hasClass('prev')) {
//$slider.slidePrev();
$slider.swipePrev();
} else {
//$slider.slideNext();
$slider.swipeNext();
}
return false;
});
i++;
});
}
UPDATE.
Добавил это:
var sideSwiper = $('.photo-slider-description').swiper({
loop: true,
slidesPerView: 1,
centeredSlides: true
});
var $slider = new Swiper('#' + id, {
resizeReInit: true,
calculateHeight: true,
pagination: '.' + paginationClass,
paginationClickable: true,
loop: true,
onSlideChangeStart: function() {
sideSwiper.swipeTo($slider.activeLoopIndex, 0);
}
});
В итоге получилось так:
if ($('.photo-slider').length) {
$('.photo-slider').each(function(i){
//формируем HTML для инициализации слайдера
var $this = $(this);
//ID слайдера
var id = 'photo_slider_'+i;
$this.find('.slider').attr('id', id);
//пагинация
var paginationClass = 'pagination-photo'+i;
$this.append('<div class="slider-pagination for-photo '+paginationClass+'"></div>');
var sideSwiper = $('.photo-slider-description').swiper({
loop: true,
slidesPerView: 1,
centeredSlides: true
});
var $slider = new Swiper('#' + id, {
resizeReInit: true,
calculateHeight: true,
pagination: '.' + paginationClass,
paginationClickable: true,
loop: true,
onSlideChangeStart: function() {
sideSwiper.swipeTo($slider.activeLoopIndex, 0);
}
});
$this.find('.slider-arrow').on('click', function(){
if ($(this).hasClass('prev')) {
//$slider.slidePrev();
$slider.swipePrev();
} else {
//$slider.slideNext();
$slider.swipeNext();
}
return false;
});
i++;
});
}
<div class="wrapper-photo-slider">
<div class="photo-slider contentEffect">
<div class="slider effectBottom">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="photo" style="background-image: url(img/photo-1.jpg);"></div>
</div>
<div class="swiper-slide">
<div class="photo" style="background-image: url(img/photo-2.jpg);"></div>
</div>
<div class="swiper-slide">
<div class="photo" style="background-image: url(img/photo-1.jpg);"></div>
</div>
<div class="swiper-slide">
<div class="photo" style="background-image: url(img/photo-2.jpg);"></div>
</div>
</div>
</div>
<div class="slider-arrow prev"><i class="icon icon-left-arrow"></i></div>
<div class="slider-arrow next"><i class="icon icon-right-arrow"></i></div>
</div>
<div class="photo-slider-description">
<div class="swiper-wrapper">
<div class="swiper-slide">1111</div>
<div class="swiper-slide">2222</div>
<div class="swiper-slide">3333</div>
<div class="swiper-slide">4444</div>
</div>
</div>
</div>
.photo-slider-description {
position: relative;
width: 100%;
background-color: #333;
color: #ffffff;
width: 20%;
float: right;
height: 100%;
}
.photo-slider-description .swiper-slide {
-webkit-transition: opacity .6s ease, scale .3s ease;
transition: opacity .6s ease, scale .3s ease;
opacity: .25;
}
.photo-slider-description .swiper-slide-active {
-webkit-transition: all .3s ease;
transition: all .3s ease;
opacity: 1;
}
.wrapper-photo-slider {
overflow: hidden;
}
.photo-slider {
width: 80%;
float: left;
}
За основу взято
тут.
Средний
Простой
