Slickslider внутри Flexboxgrid делает содержание подходящим для слайдов - PullRequest
Новая
       36

Slickslider внутри Flexboxgrid делает содержание подходящим для слайдов

0 голосов
/ 04 февраля 2019

Как подогнать изображения так, чтобы ничего не обрезалось (представьте себе background-size: contains;) При изменении размера содержимое слайдера должно сжиматься, чтобы оно соответствовало по горизонтали.

Известная проблема, что слайкслайдер плохо работает внутриflexboxgrid.Но я вынужден работать с обоими.Подгонка min-height:0 уже применена.

Текущее поведение: https://i.imgur.com/nWuLIbr.gifv

JS в заголовке: 

jQuery(document).on('ready', function() {
    jQuery('.slider_sector').slick({
        infinite: true,
        speed: 600,
        slidesToShow: 1,
        slidesToScroll: 1,
        draggable: true,
        variableWidth: true,
    });
});

HTML: 

<div class='section width_m'>
    <div class='row'>
        <div class='col-xs-12'>
            <div class='box bgbox'>

                    <div class='col-xs-12 col-md-7'>
                        <div class='box lider'>
                            <div class='slider_sector'>
                                <?php if ( have_rows('slides_sector')) :
                                    while ( have_rows('slides_sector')) : the_row(); ?>
                                        <div>
                                            <img src='<?php the_sub_field("slide") ?>'>
                                        </div>
                                    <?php endwhile;
                                endif; ?>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

CSS: 

.box.ledenslider * {
    min-height: 0;
    min-width: 0;
}
...