Horizontal scroll bar is appearing after using slick slider in the webpage

Question

I am creating a slider using slick. When I am using two div tags inside the slick container, the horizontal scroll bar is not apperaing. But when I am using more than two divs inside slick the horizontal scroll bar is appearing. I have putted the slick code inside the container-fluid.

Html code

<section class="bg-white py-5">
            <div class="container-fluid">
                <div class="cust-slider">
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                    </div>
                </div>
          </div>
</section>

JavaScript

 $('.cust-slider').slick({
            dots: true,
            infinite: false,
            speed: 300,
            slidesToShow: 2,
            slidesToScroll: 1,
            responsive: [{
                breakpoint: 1000,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true
                }
            }, {
                breakpoint: 860,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }, {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }]
        }, {
            autoplay: true,
            autoplaySpeed: 6000,
        });

Image See image here

Answer 1

You need to probably override the slick-theme.css rules.

At the moment you will have the default style rule for the slick controls like below:

.slick-next {
  right: -25px;
}

If you remove this with the browser developer tools you will see the scrollbar will go. At the moment its pushing the layout out.

Alternatively, if you are not going to use "next" and "previous" controls, you can just omit them from displaying altogether with the following:

$('.cust-slider').slick({
  arrows: false,
  ....