I have created a image slider in WordPress using slick slider. I am using center mode I want one image centered with one on each side slightly showing. But I am having a few problems. Firstly when I resize the window slick slider doesn't calculate the new image widths until I interact with the slider, this is problem is not present in the demo. Secondly the images on each side aren't showing like they should.
https://codepen.io/Reece_Dev/pen/xLQwEb
$('.carousel').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 1,
});
#container{
width: 100%;
}
.slick-slide img{
width: 80%;
height: auto;
max-width: 2000px;
}
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="carousel">
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_two2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
</div>
</div>
codepen look for the window resize event an add this
$(window).resize(function(){
$('.my-slider')[0].slick.refresh();
});
Answer from slick creator, Ken Wheeler, himself:
$('.slider-class').slick('setPosition');
Run the slick
method on window resize to recalculate the image dimensions.
$(window).on('resize orientationchange', function() {
$('.carousel').slick('resize');
});
Turns out that all I needed was some css styles and to add the latest jQuery to wordpress. Check my codepen to see the css if you're have the same problem
Here's the code I use to resize my slack carousel, whenever the browser window changes height.
var MARGIN_TOP_BOTTOM = 15;
$(window).on('init resize', function () {
var newWindowHeight = $(this).height();
newWindowHeight -= (MARGIN_TOP_BOTTOM * 2);
$(".cssCarousel").css("margin", MARGIN_TOP_BOTTOM + "px 0px");
$(".slick-slide").css("height", newWindowHeight + "px");
$(".slick-slide img").css("height", newWindowHeight + "px");
});
As you can see, I leave a small (15px) gap at the top & bottom.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.