Several different carousel with owlCarousel

Asked

Viewed 1,394 times

1

On my page I need 3 carousel:

One to the banner, another for ruler and one more for ratings. All will be with images and would need each one to have its parameter, but with Owlcarousel I could not do, since when I call Own it does not allow to modify the other carousel.

$(document).ready(function(){

    $('.owl-carousel').({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

});

With the above script it stays the same for the 3 and need to split for each have its feature. Thanks!

javascript jquery

  • Why don’t you use the id of each carousel as selector? $("#carousel_1").owlCarousel({...}), $("#carousel_2").owlCarousel({...}), $("#carousel_3").owlCarousel({...}).

  • I tried but didn’t load properly

  • Can you ask the question that code too?

3 answers

3

As I said in the comments, just insert a id single for each carousel and use it as selector. Note that the id must be in the carousel element, that is, the same element as the class .owl-carousel. See an example below:

$(() => {

  $('#carousel1').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  });
  
  $('#carousel2').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 5
      }
    }
  });
  
  $('#carousel3').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 1
      },
      1000: {
        items: 5
      }
    }
  });

});
.item {
  height: 60px;
  background: LAVENDER;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<div id="carousel1" class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
</div>

<div id="carousel2" class="owl-carousel owl-theme">
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
</div>

<div id="carousel3" class="owl-carousel owl-theme">
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

  • Thanks friend worked out!

  • You can thank us by voting positively on the answer and accepting it. For this, see the score on the left side of the answer. By pressing ^ you will be voting positively and pressing ✓ you will be accepting it as solution to the problem.

1

<script type="text/javascript">
$(document).ready(function(){

    $("#marcas").owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

});
</script>



<section id="marcas">
      <div class="row">
          <div class="owl-carousel owl-theme">

            <div class="item">exemplo1</div>
            <div class="item">exemplo2</div>
          </div>
       </div>
</section>


 <section id="comentarios">
      <div class="row">
          <div class="owl-carousel owl-theme">

            <div class="item">exemplo1</div>
            <div class="item">exemplo2</div>
          </div>
       </div>
</section>

In that case I tried to create another JS for comments and it does not work

0

Hello, an important item, you must enter the class Owl-Carousel. Not necessarily need to work with ids, it can be with classes as well, but each class will have its configuration.

Below, follow the code for three slides.

$(function() {
  $('.style1').owlCarousel({
    loop: true,
    items: 1
  });

  $('.style2').owlCarousel({
    loop: true,
    items: 2
  });

  $('.style3').owlCarousel({
    loop: true,
    items: 3
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />

<div class="owl-carousel style1">
  <div><img src="https://placehold.it/800x200/ff0000" alt=""></div>
  <div><img src="https://placehold.it/800x200/ff0000" alt=""></div>
  <div><img src="https://placehold.it/800x200/ff0000" alt=""></div>
</div>

<div class="owl-carousel style2">
  <div><img src="https://placehold.it/800x200/00ff00" alt=""></div>
  <div><img src="https://placehold.it/800x200/00ff00" alt=""></div>
  <div><img src="https://placehold.it/800x200/00ff00" alt=""></div>
</div>

<div class="owl-carousel style3">
  <div><img src="https://placehold.it/800x200/aabbcc" alt=""></div>
  <div><img src="https://placehold.it/800x200/aabbcc" alt=""></div>
  <div><img src="https://placehold.it/800x200/aabbcc" alt=""></div>
</div>

Browser other questions tagged javascript jquery

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