How to make a continuous slider?

Asked

Viewed 54 times

2

I’m trying to make a continuous slider like this

inserir a descrição da imagem aqui

<div class="owl-carousel owl-theme">
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb01.jpg" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb02.png" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb03.png" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb04.jpg" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb05.png" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb06.png" alt="">
            </a>
        </div>
        <div class="item">
            <a href="#" title="">
                <img src="portfolio/img/thumb07.png" alt="">
            </a>
        </div>
    </div>

html jquery css

  • this can help you http://jsfiddle.net/mjaA3/2506/ is basically what you need

1 answer

2


Guy by the classes you are using seems to me that you use the OWL Caroucel, in his documentation already has a model for this type of application, calls stagepadding as you can refer here: https://owlcarousel2.github.io/OwlCarousel2/demos/stagepadding.html

The model looks like this

$('.owl-carousel').owlCarousel({
    stagePadding: 80, //aqui vc controla o espaçamento nas laterais direita e esquerda
    loop:true,
    margin:10,
    nav:false,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
.owl-item {
    background-color: #D2527F;
    color: white;
    text-align: center;
    padding: 60px 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel">
    <div> Slide 1 </div>
    <div> Slide 2 </div>
    <div> Slide 3 </div>
    <div> Slide 4 </div>
    <div> Slide 5 </div>
</div>

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.