Skip to content

Commit

Permalink
Merge pull request #3012 from ViliamKopecky/master
Browse files Browse the repository at this point in the history 
fix vertical + centerMode issues (#2998)
  • Loading branch information
Greg Westneat authored Jul 30, 2017
2 parents 77101f1 + c8c5c67 commit 1b45441
Show file tree
Hide file tree
Showing 2 changed files with 230 additions and 9 deletions.
218 changes: 214 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,190 @@

.slick-prev:before,
.slick-next:before {
color: black;
color: black;
}


.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}

.slick-active {
opacity: .5;
}

.slick-current {
opacity: 1;
}
</style>
</head>
<body>

<section class="vertical-center-4 slider">
<div>
<img src="http://placehold.it/350x100?text=1">
</div>
<div>
<img src="http://placehold.it/350x100?text=2">
</div>
<div>
<img src="http://placehold.it/350x100?text=3">
</div>
<div>
<img src="http://placehold.it/350x100?text=4">
</div>
<div>
<img src="http://placehold.it/350x100?text=5">
</div>
<div>
<img src="http://placehold.it/350x100?text=6">
</div>
<div>
<img src="http://placehold.it/350x100?text=7">
</div>
<div>
<img src="http://placehold.it/350x100?text=8">
</div>
<div>
<img src="http://placehold.it/350x100?text=9">
</div>
<div>
<img src="http://placehold.it/350x100?text=10">
</div>
</section>

<section class="vertical-center-3 slider">
<div>
<img src="http://placehold.it/350x100?text=1">
</div>
<div>
<img src="http://placehold.it/350x100?text=2">
</div>
<div>
<img src="http://placehold.it/350x100?text=3">
</div>
<div>
<img src="http://placehold.it/350x100?text=4">
</div>
<div>
<img src="http://placehold.it/350x100?text=5">
</div>
<div>
<img src="http://placehold.it/350x100?text=6">
</div>
<div>
<img src="http://placehold.it/350x100?text=7">
</div>
<div>
<img src="http://placehold.it/350x100?text=8">
</div>
<div>
<img src="http://placehold.it/350x100?text=9">
</div>
<div>
<img src="http://placehold.it/350x100?text=10">
</div>
</section>

<section class="vertical-center-2 slider">
<div>
<img src="http://placehold.it/350x100?text=1">
</div>
<div>
<img src="http://placehold.it/350x100?text=2">
</div>
<div>
<img src="http://placehold.it/350x100?text=3">
</div>
<div>
<img src="http://placehold.it/350x100?text=4">
</div>
<div>
<img src="http://placehold.it/350x100?text=5">
</div>
<div>
<img src="http://placehold.it/350x100?text=6">
</div>
<div>
<img src="http://placehold.it/350x100?text=7">
</div>
<div>
<img src="http://placehold.it/350x100?text=8">
</div>
<div>
<img src="http://placehold.it/350x100?text=9">
</div>
<div>
<img src="http://placehold.it/350x100?text=10">
</div>
</section>

<section class="vertical-center slider">
<div>
<img src="http://placehold.it/350x100?text=1">
</div>
<div>
<img src="http://placehold.it/350x100?text=2">
</div>
<div>
<img src="http://placehold.it/350x100?text=3">
</div>
<div>
<img src="http://placehold.it/350x100?text=4">
</div>
<div>
<img src="http://placehold.it/350x100?text=5">
</div>
<div>
<img src="http://placehold.it/350x100?text=6">
</div>
<div>
<img src="http://placehold.it/350x100?text=7">
</div>
<div>
<img src="http://placehold.it/350x100?text=8">
</div>
<div>
<img src="http://placehold.it/350x100?text=9">
</div>
<div>
<img src="http://placehold.it/350x100?text=10">
</div>
</section>

<section class="vertical slider">
<div>
<img src="http://placehold.it/350x100?text=1">
</div>
<div>
<img src="http://placehold.it/350x100?text=2">
</div>
<div>
<img src="http://placehold.it/350x100?text=3">
</div>
<div>
<img src="http://placehold.it/350x100?text=4">
</div>
<div>
<img src="http://placehold.it/350x100?text=5">
</div>
<div>
<img src="http://placehold.it/350x100?text=6">
</div>
<div>
<img src="http://placehold.it/350x100?text=7">
</div>
<div>
<img src="http://placehold.it/350x100?text=8">
</div>
<div>
<img src="http://placehold.it/350x100?text=9">
</div>
<div>
<img src="http://placehold.it/350x100?text=10">
</div>
</section>
<section class="regular slider">
<div>
<img src="http://placehold.it/350x300?text=1">
Expand Down Expand Up @@ -134,6 +312,38 @@
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".vertical-center-4").slick({
dots: true,
vertical: true,
centerMode: true,
slidesToShow: 4,
slidesToScroll: 2
});
$(".vertical-center-3").slick({
dots: true,
vertical: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".vertical-center-2").slick({
dots: true,
vertical: true,
centerMode: true,
slidesToShow: 2,
slidesToScroll: 2
});
$(".vertical-center").slick({
dots: true,
vertical: true,
centerMode: true,
});
$(".vertical").slick({
dots: true,
vertical: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".regular").slick({
dots: true,
infinite: true,
Expand All @@ -144,7 +354,7 @@
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToShow: 5,
slidesToScroll: 3
});
$(".variable").slick({
Expand All @@ -157,7 +367,7 @@
infinite: true
});
});
</script>
</script>

</body>
</html>
</html>
21 changes: 16 additions & 5 deletions slick/slick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1079,15 +1079,25 @@
targetLeft,
verticalHeight,
verticalOffset = 0,
targetSlide;
targetSlide,
coef;

_.slideOffset = 0;
verticalHeight = _.$slides.first().outerHeight(true);

if (_.options.infinite === true) {
if (_.slideCount > _.options.slidesToShow) {
_.slideOffset = (_.slideWidth * _.options.slidesToShow) * -1;
verticalOffset = (verticalHeight * _.options.slidesToShow) * -1;
coef = -1

if (_.options.vertical === true && _.options.centerMode === true) {
if (_.options.slidesToShow === 2) {
coef = -1.5;
} else if (_.options.slidesToShow === 1) {
coef = -2
}
}
verticalOffset = (verticalHeight * _.options.slidesToShow) * coef;
}
if (_.slideCount % _.options.slidesToScroll !== 0) {
if (slideIndex + _.options.slidesToScroll > _.slideCount && _.slideCount > _.options.slidesToShow) {
Expand Down Expand Up @@ -2285,22 +2295,23 @@

if (_.options.centerMode === true) {

var evenCoef = _.options.slidesToShow % 2 === 0 ? 1 : 0;

centerOffset = Math.floor(_.options.slidesToShow / 2);

if (_.options.infinite === true) {

if (index >= centerOffset && index <= (_.slideCount - 1) - centerOffset) {

_.$slides
.slice(index - centerOffset, index + centerOffset + 1)
.slice(index - centerOffset + evenCoef, index + centerOffset + 1)
.addClass('slick-active')
.attr('aria-hidden', 'false');

} else {

indexOffset = _.options.slidesToShow + index;
allSlides
.slice(indexOffset - centerOffset + 1, indexOffset + centerOffset + 2)
.slice(indexOffset - centerOffset + 1 + evenCoef, indexOffset + centerOffset + 2)
.addClass('slick-active')
.attr('aria-hidden', 'false');

Expand Down

0 comments on commit 1b45441

Please sign in to comment.