I have implemented React Slick Slider for my website, it works proper for desktop view and take proper width accordingly, but if I switch to responsive view the width of the container is not proper and it looks all distorted.

I have tried to fix it with CSS, given 100% width to the slick-track div but nothing worked.

Following is the container : slick-track and below is the inline css being added :

width: 2.14748e+08px;
opacity: 1;
transform: translate3d(-8.05305e+07px, 0px, 0px);

Below is how I am initializing the slider in my ponent:

const settings = {
            dots: false,
            infinite: true,
            speed: 500,
            cssEase: 'linear',
            slidesToShow: this.props.data && this.props.data.upSell && this.props.data.upSell.length>=5?6:this.props.data&& this.props.data.upSell && this.props.data.upSell.length,
            rtl: rtl === "en" ? false : true,
            slidesToScroll: 1,
            asNavFor: null,
            arrows: false,
            initialSlide: rtl==="en"?0:2,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        initialSlide: rtl==="en"?0:3,
                        dots: false
                    }
                }
            ]
        };

Below is the sample HTML structure in a loop :

<Slider className="mx-4" {...settings} ref={c => (this.slider = c)}>
<div class="rtl product-item" tabindex="-1" style="width: 100%; display: inline-block;">
<div class="product-shop-top">
<a href="#"><img src="" alt="" class="product-img"></a>
</div>
<div class="product-item-details">
<h5><a href="#">Product Name</a></h5>
<div class="price-wrapper">
<div class="price-box"><span class="special-price">65</span></div>
</div>
</div>
<div class="buynow-block asas"><button type="button" title="Add to Cart" class="action tocart primary"> </button><a class="towishlist">Add to Wishlist</a></div>
</div>
</Slider>

Note: Attaching the image to show the result.

I want 2 columns in a row for responsive slick slider.

I have implemented React Slick Slider for my website, it works proper for desktop view and take proper width accordingly, but if I switch to responsive view the width of the container is not proper and it looks all distorted.

I have tried to fix it with CSS, given 100% width to the slick-track div but nothing worked.

Following is the container : slick-track and below is the inline css being added :

width: 2.14748e+08px;
opacity: 1;
transform: translate3d(-8.05305e+07px, 0px, 0px);

Below is how I am initializing the slider in my ponent:

const settings = {
            dots: false,
            infinite: true,
            speed: 500,
            cssEase: 'linear',
            slidesToShow: this.props.data && this.props.data.upSell && this.props.data.upSell.length>=5?6:this.props.data&& this.props.data.upSell && this.props.data.upSell.length,
            rtl: rtl === "en" ? false : true,
            slidesToScroll: 1,
            asNavFor: null,
            arrows: false,
            initialSlide: rtl==="en"?0:2,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        initialSlide: rtl==="en"?0:3,
                        dots: false
                    }
                }
            ]
        };

Below is the sample HTML structure in a loop :

<Slider className="mx-4" {...settings} ref={c => (this.slider = c)}>
<div class="rtl product-item" tabindex="-1" style="width: 100%; display: inline-block;">
<div class="product-shop-top">
<a href="#"><img src="" alt="" class="product-img"></a>
</div>
<div class="product-item-details">
<h5><a href="#">Product Name</a></h5>
<div class="price-wrapper">
<div class="price-box"><span class="special-price">65</span></div>
</div>
</div>
<div class="buynow-block asas"><button type="button" title="Add to Cart" class="action tocart primary"> </button><a class="towishlist">Add to Wishlist</a></div>
</div>
</Slider>

Note: Attaching the image to show the result.

I want 2 columns in a row for responsive slick slider.

• javascript
• reactjs
• ecmascript-6
• responsive-design
• react-slick

1 Answer 1

Finally I was able to figure out the issue, the container for slider was inside the same row where other elements on the pages were, this was causing the issue where slider was unable to calculate the width. The structure was like this before :

<div classname="row">
<div classname="elementone"></div>
<div classname="elementtwo"></div>
<div classname="slider"></div>
</div>

So I have moved the slider outside the row and it works fine now.