前端之家

  1. 首页
  2. 问答

猫头鹰传送带2项目在RTL中的拖动/触摸时消失

• 问答

我使用owl carousel 2和RTL选项，但是不知道为什么拖动/触摸最后一项（5或6 /将其向右滑动）时它会消失，它将消失）！我不想使用loop来忽略它！我该如何解决这个问题？

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

xrf0827 回答：猫头鹰传送带2项目在RTL中的拖动/触摸时消失

只需删除 center：true 选项，它将正常工作。

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

htmljavascriptjqueryowl-carouselowl-carousel-2
本文链接：https://www.f2er.com/2899217.html

大家都在问