Several different carousel with owlCarousel

Question

Several different carousel with owlCarousel

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

On my page I need 3 carousel:

One for the banner , another for ruler and one more for evaluations. All will be with images and it would need that each one had its parameter, however with the OwlCarousel I could not do it, since when I make the call of Own it does not allow to modify the other carrousel.

$(document).ready(function(){

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

});

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

javascript jquery

asked by anonymous 03.06.2017 / 02:23

3 answers

Avoid unnecessary spaces in textarea with default text A range within another range

score 2 · Answer 1

As I said in the comments, simply enter a single id for each carousel and use it as a selector. Note that% w / o% must be in the element relative to the carousel, that is, the same element that has class id . Here's 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><scriptsrc="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>

score 1 · Answer 2

<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 this case I tried to create another JS for the comments and it does not work

score 0 · Answer 3

Hello, an important item, you must enter the owl-carousel class. You do not necessarily need to work with ids, it can be with classes as well, but each class will have its configuration.

Below is 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><scriptsrc="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>