javascript - 显示 2 后在 slider 中显示 1 张图片

Question

我想做某事，但不知道如何真正去做

我有一个可以完美运行的 slider (或轮播)，但结果并不是我想要的。

例如:我希望当我到达我的页面时，我的 slider 显示列表中的第一张图像，而当我转到下一张图像时，我将其余图像按当前操作 2 x 2 显示。基本上，第一次看到(我只有一个图像)，当我改变时我有 2 个等等......这是我的轮播的一个例子:

        $(document).ready(function () {
            var sync1 = $("#sync1");

            console.log(sync1.context.images)
            sync1.owlCarousel({
                items: 2,
                slideSpeed: 2000,
                nav: true,
                // autoplay: true,
                dots: true,
                loop: true,
                slideBy: 2,
                responsiveRefreshRate: 200,
                navText: [
                    '<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>',
                    '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'
                ],
            }).on('changed.owl.carousel', syncPosition);

            function syncPosition(el) {
                var count = el.item.count - 1;
                var current = Math.round(el.item.index - (el.item.count / 2) - .5);
                var selected = current + 1;
                $('.select option[value="' + selected + '"]').prop('selected', true);
                if (current < 0) {
                    current = count;
                }
                if (current > count) {
                    current = 0;
                }
            }

            $('.select').on("change", function (e) {
                var number = $(this).val() - 1;
                sync1.data('owl.carousel').to(number, 300, true);
            });
        });

.owl-theme .owl-nav [class*='owl-'] {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

#sync1.owl-theme {
    position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
    width: 30px;
    height: 60px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
}
#sync1.owl-theme .owl-prev {
    left: 10px;
}

#sync1.owl-theme .owl-next {
    right: 10px;
}

#view-ad-image {
    width: 50%;
    height: 50%;
    overflow: hidden;
    position: relative;
    border-radius: 0;
    margin: 20px auto;
}
#view-ad-image img {
    border-radius: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet"/>

<div id="view-ad-image">
    <div id="sync1" class="owl-carousel owl-theme">
            <img src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528__340.jpg" class="item">
            <img src="https://images.larepubliquedespyrenees.fr/2019/12/28/5e0736b3a43f5e83282803c8/default/1000/ciel-en-feu-a-gurmencon.jpg" class="item">
            <img src="https://thumbs.dreamstime.com/b/%C3%A9l%C3%A9phant-surr%C3%A9aliste-fille-amies-amour-nature-125298254.jpg" class="item">
            <img src="https://lh3.googleusercontent.com/proxy/NkR5BITNlMZsO0IAK-1mzYjDX-tETlg6ObWfWnkHg7xuBg-wmO1W8SaC1dFjcWh8hJsI2y2LiGIzF3hrq_Gm7MkxZB0vrgWeL3vpG_iRtIr_tts5uPGCgz79LQ" class="item">
            <img src="https://www.presse-citron.net/wordpress_prod/wp-content/uploads/2018/11/meilleure-banque-image.jpg" class="item">
    </div>
</div>

例如，我选择来自谷歌的图像，但在我的项目中，我使用 symfony 4 并从我的数据库获取图像，这是一个例子:

<div id="view-ad-image">
    <div id="sync1" class="owl-carousel owl-theme">
        {% for key, images in model.images %}
            {#            {% if key == 0 %}#}
            <img src="{{ asset('build/static/uploads/model/' ~ model.nameFolder ~ '/' ~ images.name) }}"
                 class="item" alt="{{ images.atl }}" >
            {#            {% endif %}#}
        {% endfor %}
    </div>
</div>

Answer 1

在第一个图像后面放置一个带有“item”类的空 span 元素。那么第一张图像将是单独的，而其他图像则是成对的。

<div id="view-ad-image">
    <div id="sync1" class="owl-carousel owl-theme">
        {% for key, images in model.images %}
            <img 
                src="{{ asset('build/static/uploads/model/' ~ model.nameFolder ~ '/' ~ images.name) }}"
                class="item" alt="{{ images.atl }}"
            >
            {% if key == 0 %}<span class="item"></span>{% endif %}
        {% endfor %}
    </div>
</div>