Question

我正在使用猫头鹰传送带，并且在使用滑块时遇到了一些麻烦。

我通过使用jquery添加类来更改图像的大小。但是单击一些元素后，就像在第三个屏幕截图中一样。

我想知道如何在单击按钮后动态更改图像的大小。

单击后图像的大小应始终与第一个屏幕相同。我该怎么办？

Slider after one clicking(the height of the previous element is the same as centered element)

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');
}

使用猫头鹰轮播动态更改滑块图像的大小

0 个答案: