Permalink
Browse files

New Thumbs component

  • Loading branch information...
nolimits4web committed Sep 14, 2018
1 parent 6989049 commit ba0f8e669279d8ba404f55f3552384433110d499
@@ -45,7 +45,7 @@
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
@@ -90,23 +90,23 @@
<!-- Initialize Swiper -->
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
</script>
</body>
</html>
@@ -44,7 +44,7 @@
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
@@ -85,10 +85,18 @@
</div>
<!-- Swiper JS -->
<script src="../dist/js/swiper.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
loop: true,
loopedSlides: 5, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop:true,
@@ -97,18 +105,10 @@
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
touchRatio: 0.2,
loop: true,
loopedSlides: 5, //looped slides should be the same
slideToClickedSlide: true,
});
galleryTop.controller.control = galleryThumbs;
galleryThumbs.controller.control = galleryTop;
</script>
</body>
</html>
View
@@ -3,11 +3,11 @@
<head>
<meta charset="UTF-8">
<title>Swiper Playground</title>
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" href="../build/css/swiper.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="swiper-container">
<div class="swiper-container top">
<div class="swiper-scrollbar"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
@@ -22,9 +22,27 @@
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
</div>
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
<div class="swiper-slide">Slide 11</div>
<div class="swiper-slide">Slide 12</div>
</div>
</div>
<style>
body, html {
padding: 0;
@@ -44,14 +62,26 @@
line-height: 300px;
}
</style>
<script src="../dist/js/swiper.min.js"></script>
<script src="../build/js/swiper.js"></script>
<script>
var swiperThumbs = new Swiper({
el: '.thumbs',
slidesPerView: 4,
spaceBetween: 20,
watchSlidesVisibility: true,
watchSlidesProgress: true,
loop: true,
// freeMode: true,
// centeredSlides: true,
// slideToClickedSlide: true,
})
var swiper = new Swiper({
el: '.swiper-container',
initialSlide: 2,
el: '.swiper-container.top',
initialSlide: 0,
spaceBetween: 50,
slidesPerView: 2,
centeredSlides: true,
slidesPerView: 1,
// centeredSlides: true,
loop: true,
slideToClickedSlide: true,
grabCursor: true,
scrollbar: {
@@ -70,6 +100,9 @@
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: swiperThumbs,
},
});
</script>
</body>
View
@@ -18,6 +18,7 @@ module.exports = {
'effect-cube',
'effect-flip',
'effect-coverflow',
'thumbs',
],
target: 'universal',
themeColor: '#007aff',
@@ -70,7 +70,7 @@ class Swiper extends SwiperClass {
if (module.params) {
const moduleParamName = Object.keys(module.params)[0];
const moduleParams = module.params[moduleParamName];
if (typeof moduleParams !== 'object') return;
if (typeof moduleParams !== 'object' || moduleParams === null) return;
if (!(moduleParamName in params && 'enabled' in moduleParams)) return;
if (params[moduleParamName] === true) {
params[moduleParamName] = { enabled: true };
@@ -1,3 +1,5 @@
import $ from '../../../utils/dom';
export default function (translate = (this && this.translate) || 0) {
const swiper = this;
const params = swiper.params;
@@ -13,6 +15,9 @@ export default function (translate = (this && this.translate) || 0) {
// Visible Slides
slides.removeClass(params.slideVisibleClass);
swiper.visibleSlidesIndexes = [];
swiper.visibleSlides = [];
for (let i = 0; i < slides.length; i += 1) {
const slide = slides[i];
const slideProgress = (
@@ -25,9 +30,12 @@ export default function (translate = (this && this.translate) || 0) {
|| (slideAfter > 0 && slideAfter <= swiper.size)
|| (slideBefore <= 0 && slideAfter >= swiper.size);
if (isVisible) {
swiper.visibleSlides.push(slide);
swiper.visibleSlidesIndexes.push(i);
slides.eq(i).addClass(params.slideVisibleClass);
}
}
slide.progress = rtl ? -slideProgress : slideProgress;
}
swiper.visibleSlides = $(swiper.visibleSlides);
}
Oops, something went wrong.

0 comments on commit ba0f8e6

Please sign in to comment.