1

I use owl carousel 2 and with RTL option, but don't know why it going to disappear when you drag/touch last item (5-or-6/slide it to right, it going to disappear)! I don't want to use loop to ignore this! how can I solve this issue?

$('.owl-carousel').owlCarousel({
  center: true,
  rtl: true,
  items: 3,
  loop: false,
  margin: 10,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

<div class="owl-carousel">
  <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>
Jack The Baker
  • 1,781
  • 1
  • 20
  • 51

1 Answers1

2

Just remove center: true option and it will work fine.

$(function(){
 $('.owl-carousel').owlCarousel({
   rtl: true,
   items: 3,
   loop: false
 });
})
.item{text-align:center;}
<!DOCTYPE html>
<html>
<head>
 <link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>

 <div class="owl-carousel">
   <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>


</body>
</html>
Growyour GK
  • 463
  • 2
  • 6