I am trying to create a full width page slider with one slide to be centered and 2 slides will be partially visible at both sides.
But for some reason there is a big white gap visible. I tried with giving img width 100% but the image resolution is distorting.
Jquery code:
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear'
});
Demo -- https://jsfiddle.net/squidraj/hn7xsa4y/
Any help is highly appreciated.
You might want to try using :
$('.slider').slick({
centerMode:true,
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
infinite: true,
cssEase: 'linear',
variableWidth: true,
variableHeight: true
});
This should remove the gap, but you might need to add some css to make sure that the slick <div>
will be large enough to display your whole image. You can also modify the css for the related images.
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.