Динамическое изменение размера изображений слайдера с помощью owl-carousel - PullRequest
Новая
       10

Динамическое изменение размера изображений слайдера с помощью owl-carousel

0 голосов
/ 12 октября 2018

Я использую owl-carousel, и у меня есть некоторые проблемы со слайдером.

Я изменяю размер изображений, добавляя классы, используя jquery.Но после некоторого щелчка элементы выглядят как на третьем скриншоте.

Я хочу знать, как динамически изменять размер изображений после нажатия на кнопки.

Размер изображений после нажатия должен всегда быть таким же, как на первом экране.Как это сделать?

Ползунок в начале

Ползунок после одного нажатия (высота предыдущего элемента такая же, как и у центрированного элемента)

Более двух кликов

HTML 

                <div class="screenshot-wrapper">
                <h2 class="visually-hidden">Screenshots</h2>
                <p class="screenshot-slogan">Take a look at our screenshots</p>
                <p class="screenshot-descr">Everyone’s reasons for learning user interface design are different. If you’re already a developer, or <br> a PM, or a UX designer, why develop this totally separate skill?</p>

                <div class="screenshot-slider">

                    <div class="screenshot-slider-wrapper owl-carousel-screenshots">
                        <div>
                            <img src="images/slide-1.png" alt="" class="screenshot-slide">
                        </div>
                        <div>
                            <img src="images/slide-2.png" alt="" class="screenshot-slide">
                        </div>
                        <div>
                            <img src="images/slide-3.png" alt="" class="screenshot-slide">
                        </div>
                        <div>
                            <img src="images/slide-4.png" alt="" class="screenshot-slide">
                        </div>
                        <div>
                            <img src="images/slide-5.png" alt="" class="screenshot-slide">
                        </div>
                        <div>
                            <img src="images/slide-6.png" alt="" class="screenshot-slide">
                        </div>
                        <div>
                            <img src="images/slide-7.png" alt="" class="screenshot-slide">
                        </div>
                    </div>

                    <div id="screenshot-navs"></div>
                </div>
            </div>

style.css 

            .owl-item.active.center img {
                width: 360px;
                height: 500px;

            }

            .owl-item.active.center {
                z-index: 7;
                margin-right: 65px;
                margin-left: -50px;
            }

            .owl-item.active img, .owl-item img {
                width: 260px;
                height: 280px;
            }


            .owl-item.active.changeVisible {
                z-index: 2;
            }


            .owl-item.active.changeVisible-2 {
                z-index: 1;
            }

            .owl-item.active.changeVisible-3 {
                z-index: 0;
            }

            .owl-item.active img.prev {
                height: 435px;
            }

            .owl-item.active img.prevdouble {
                height: 355px;
            }


            .owl-item.active img.prevlast {
                height: 280px;
            }

scripts.js

    var owl = $('.owl-carousel-screenshots').owlCarousel({
    loop:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:false,
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items: 7,
            nav: true,
            center: true,
            margin: 0,
            startPosition: 3,
            loop: true,
            dots: false,
            onInitialized: carouselInit,
            stageOuterClass: 'owl-stage-screen',
            navContainer: '#screenshot-navs',
            navText: ['',''],
            navClass: ['rnd-back','rnd-frwd']
        }
    }
});

function carouselInit(e) {
    var prev = e.item.index - 1;
    var next = e.item.index + 1;
    var nextNext = next + 1;
    var prevPrev = prev - 1;
    var lastNext = nextNext + 1;
    var lastPrev = prevPrev -1;
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(prev).addClass('changeVisible');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(next).addClass('changeVisible');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(prev).find('img').addClass('prev');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(next).find('img').addClass('prev');


    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(prevPrev).addClass('changeVisible-2');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(nextNext).addClass('changeVisible-2');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(prevPrev).find('img').addClass('prevdouble');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(nextNext).find('img').addClass('prevdouble');

    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(lastPrev).addClass('changeVisible-3');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(lastNext).addClass('changeVisible-3');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(lastPrev).find('img').addClass('prevlast');
    $('.owl-carousel-screenshots .owl-item').not('.clone').eq(lastNext).find('img').addClass('prevlast');
}
...