CODEWITHSUNDEEP
javascriptphpsymfony
Imrickjames
Imrickjames

Reputation: 129

Show 1 picture in a slider after show 2

I'm looking to do something but I don't know how to really do it,

I have a slider (or carousel) that works perfectly but the result is not really the one I wish to have.

for example: I wish that when I arrive on my page my slider displays the first image of my list, and when I go to next I have the rest of the images displayed 2 by 2 as for the current operation. Basically, first seen ( i have only one image ), when i change i have 2 etc ... this is an exemple of my carousel : 

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

for the exemple i choice images from google but in my project i use symfony 4 and i get images from my databse, this is a exemple :

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

Upvotes: 0

Views: 62

Answers (1)

Vyctorya
Vyctorya

Reputation: 1438

Put an empty span element with the class "item" after the first image. Then the first image would be alone and the others in pairs.

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

Upvotes: 1

Related Questions