1

Em minha página preciso de 3 carrossel:

Um para o banner, outro para régua e mais um para avaliações. Todos vão ser com imagens e precisaria que cada um tivesse seu parâmetro, porém com o OwlCarousel não consegui fazer, já que quando faço a chamada do Own ele não permite modificar os demais carrossel.

$(document).ready(function(){

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

});

Com o script acima ele fica o mesmo para os 3 e preciso dividir para cada um ter sua característica. Obrigado!

3
  • Por quê você não utiliza o id de cada carrossel como seletor? $("#carousel_1").owlCarousel({...}), $("#carousel_2").owlCarousel({...}), $("#carousel_3").owlCarousel({...}).
    – Woss
    Commented 3/06/2017 às 0:26
  • Eu tentei mas não carregou corretamente Commented 3/06/2017 às 0:27
  • Consegue colocar na pergunta esse código também?
    – Woss
    Commented 3/06/2017 às 0:32

3 Respostas 3

3

Como eu disse nos comentários, basta inserir um id único para cada carrossel e utilizá-lo como seletor. Perceba que o id deve estar no elemento referente ao carrossel, isto é, o mesmo elemento que possui a classe .owl-carousel. Veja um exemplo abaixo:

$(() => {

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

2
  • Valeu amigo deu certo! Commented 3/06/2017 às 0:57
  • Você pode agradecer votando positivamente na resposta e aceitá-la. Para isso, veja a pontuação ao lado esquerdo da resposta. Ao pressionar ^ você estará votando positivamente e pressionando você estará aceitando-a como solução ao problema.
    – Woss
    Commented 3/06/2017 às 0:59
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>

Nesse caso tentei criar outro JS para o comentarios e nao funciona

0

Olá, um item importante, você obrigatoriamente deve inserir a classe owl-carousel. Não necessariamente precisa trabalhar com ids, pode ser com classes também, mas, cada classe terá sua configuração.

Abaixo, segue o código para três 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .