Slick slider wrong width on initialization

Question

I am trying to implement Slick slider, but calculated width of each slide is wrong (padding on right side of image).

<div class="responsive-slick">
    <img src="Gallery/large/01.jpeg">
    <img src="Gallery/large/02.jpeg">
    <img src="Gallery/large/03.jpeg">
    <img src="Gallery/large/04.jpeg">
    <img src="Gallery/large/05.jpeg">
    <img src="Gallery/large/06.jpeg">
</div>

$(document).ready(function(){
   $('.responsive-slick').slick({
       dots: true,
       mobileFirst:true,
       prevArrow: '<a class="slick-prev">Previous</button>',
       nextArrow: '<a class="slick-prev">Previous</button>',
       slidesToShow: 3,
       slidesToScroll: 8
   });

});

Output:

What am I doing wrong?

no other javascript, no css. I only included jquery, bootstrap and slick. — user1784025, Jul 08 '17 at 19:13

score 0 · Accepted Answer · answered Jul 08 '17 at 19:03

0

Your current code is having problem

$('.responsive-slick').slick({
   dots: true,
   mobileFirst:true,
   **prevArrow: '<a class="slick-prev">Previous</button>',
   nextArrow: '<a class="slick-prev">Previous</button>',**
   slidesToShow: 3,
   slidesToScroll: 8
});

You are opening an anchor tag and closing a button. Thats wrong.

answered Jul 08 '17 at 19:03

Shiladitya

12,003
15
25
38

You are right, it was an error, but problem remains – user1784025 Jul 08 '17 at 19:12
I tried to change jquery.min.js from 3.2.1 to 2.2.4 and it worked. Strange. Anyway, thanks. I'll accept your answer. – user1784025 Jul 08 '17 at 19:55

Slick slider wrong width on initialization

1 Answers1

Linked