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?

Convenience

do you have any css for images or div? – Aerothermodynamics

no other javascript, no css. I only included jquery, bootstrap and slick. – Convenience

Answer 1

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.

Ridgepole

You are right, it was an error, but problem remains – Convenience

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. – Convenience