Неправильная ширина слайдера React Slick в адаптивном представлении

Я реализовал React Slick Slider для своего веб-сайта, он работает правильно для рабочего стола и соответственно принимает правильную ширину, но если я переключусь на отзывчивый вид, ширина контейнера будет неправильной, и он будет выглядеть искаженным.

Я попытался исправить это с помощью CSS, учитывая 100% ширину slick-track div, но ничего не сработало.

Ниже приведен контейнер: slick-track, а ниже - добавляемый встроенный CSS:

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

Ниже показано, как я инициализирую слайдер в своем компоненте:

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
                    }
                }
            ]
        };

Ниже приведен образец структуры HTML в цикле:

<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>

Примечание: прикрепите изображение, чтобы показать результат. введите здесь описание изображения

Мне нужны 2 столбца подряд для гибкого слайдера.


reactjs javascript responsive-design ecmascript-6 react-slick
person H.Husain    schedule 23.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец, я смог выяснить проблему, контейнер для слайдера находился внутри той же строки, что и другие элементы на страницах, это вызывало проблему, когда слайдер не мог вычислить ширину. Структура была такой раньше:

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

Итак, я переместил ползунок за пределы строки, и теперь он работает нормально.

person H.Husain    schedule 24.03.2019
comment
Отметьте свой ответ как ответ (маленькая галочка рядом с вашим вопросом) - person Dehan; 24.03.2019