Как сохранить отзывчивость изображения с помощью Slick Slider (ширина 100%) - PullRequest
Новая
       24

Как сохранить отзывчивость изображения с помощью Slick Slider (ширина 100%)

0 голосов
/ 28 марта 2020

У меня есть настройка Slick Slider, как мне здесь нравится, но у меня есть одна проблема. Как только окно браузера (очевидно, мобильное) уменьшается до ширины, меньшей ширины изображения, оно просто отсекает боковые стороны изображения, несмотря на настройку адаптивного и мобильного первого параметра в функции вызова для самого слайдера. И вот тут я запутался. Я попытался отредактировать Slick-Slide и Slick-Slide .img, чтобы они имели ширину: 100% и высоту: автоматически, когда для области просмотра меньше 900 пикселей или немного, и это привело к получению огромных, увеличенных и искаженных изображений, охватывающих весь экран. .

Вот что у меня есть. 

    .carousel-wrapper {
        position: relative;
    }

    .slick-slide {
        max-height: 700px;
    }

    .slick-slide img {
        max-height: 700px;
    }

    .prev,
    .next {
        position: absolute;
        z-index: 1;
        color: white;
        border: none;
        font-size: 4em;
        opacity: .5;
        background-color: transparent;
        transition: .3s color;
    }

    .prev:hover,
    .next:hover,
    .prev:focus,
    .next:focus {
        color: aqua;
    }

    .prev {
        left: 0;
        top: 50%;
        transform: translate(50%, -50%);
    }

    .next {
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .slick-dots li button {
        color: aqua;
    }

    @media only screen and (max-width: 860px) {
        .prev,
        .next {
            display: none;
            visibility: hidden;
        }


<section id="image-gallery">
    <div class="container">
        <div class="row">
            <div class="col d-flex">
                <h1 class="section-header">Gallery</h1>
            </div>
        </div>
    </div>

    <div class="container-fluid carousel-wrapper">

        <button class="prev slick-arrow"><i class="fas fa-angle-left"></i>
        </button>
        <button class="next slick-arrow"><i class="fas fa-angle-right"></i></button>
        <div class="slick-carousel">
            <div>
                <img class="img-fluid" src="../images/site_images/web_layouts/advent/2239_webster_0001.jpg">
            </div>
            <div>
                <img class="img-fluid" src="../images/site_images/web_layouts/advent/2239_webster_twilight_002.jpg">
            </div>
            <div>
                <img class="img-fluid" src="../images/site_images/web_layouts/advent/2239_webster_twilight_003.jpg">
            </div>
            <div>
                <img class="img-fluid" src="../images/site_images/web_layouts/advent/2239_webster_twilight_004.jpg">
            </div>
            <div>
                <img class="img-fluid" src="../images/site_images/web_layouts/advent/2239_webster_twilight_005.jpg">
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
    $(document).ready(function () {
        $('.slick-carousel').slick({
            mobileFirst: true,
            slidestoShow: 3,
            dots: true,
            infinite: true,
            cssEase: 'linear',
            variableWidth: true,
            variableHeight: true,
            centerMode: true,
            centerPadding: '50px',
            arrows: true,
            prevArrow: $('.prev'),
            nextArrow: $('.next'),
            autoPlay: true,
            responsive: [
                {
                    breakpoint: 860,
                    settings: {
                        slidesToShow: 1
                    }
                }
            ]
        });
    });
</script>
...