1

Estou trabalhando com o Owl Carousel v2.2.1 e preciso sejam exibidas 3 imagens de cada vez. Isso já é possível usando a paginação, mas eu preciso que o mesmo evento seja feito usando as setas. Toda vez que clicar na seta deve mudar a página (aparecer as próximas 3 imagens).

Tentei usar a opção sliderBy e também scrollPerPage: true, mas não funcionou, apenas faz o loop com a próxima imagem.

Alguém poderia ajudar?

1
  • Se possível poste seu código para auxiliar o entendimento da questão. Commented 10/03/2018 às 15:53

1 Resposta 1

1

Use a opção slideBy (veja doc.).

O valor padrão do slideBy é 1, ou seja, a cada clique nas setas, o slide irá avançar/voltar 1 item. Ao setar 3, irá avançar/voltar de 3 em 3 itens.

Exemplo:

$(document).ready(function() {
   var owl = $('.owl-carousel');
   owl.owlCarousel({
      margin: 10,
      nav: true,
      loop: true,
      slideBy: 3
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
 <div 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 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 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>

1
  • Obrigado pela resposta @dvd agora consegui utilizar esta opção.
    – scooby
    Commented 14/03/2018 às 23:21

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 .