Показывать 1 картинку в слайдере после показа 2

Question

Я хочу что-то сделать, но я не знаю, как на самом деле это сделать,

У меня есть слайдер (или карусель), который работает отлично, но результат на самом деле не тот, который я получу sh, чтобы иметь.

например: я буду sh, что, когда я прихожу на мою страницу, мой слайдер отображает первое изображение моего списка, а когда я go к следующему, у меня есть остальные изображения отображаются 2 на 2, как для текущей операции. По сути, впервые увиденный (у меня только одно изображение), когда я меняюсь, у меня есть 2 et c ... это пример моей карусели:

        $(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>

для примера я выбираю изображения из Google, но в моем проекте я использую 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

Поместите пустой элемент span с классом «item» после первого изображения. Тогда первое изображение будет одиноким, а остальные попарно.

<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>