Question

我正在尝试使用Owl Carousel在另一个Carousel中制作Carousel，这很容易做到，但是实际上，当您尝试使用“ mouseDrag”或“ touchDrag”时要面对的实际问题属性。

我要制作背景轮播：mouseDrag：false 并想制作前景中的轮播：mouseDrag：true

当我制作它时，它会禁用两个Carousels上的鼠标拖动功能（请注意，两者的ID并不相同）。

我将代码粘贴到这里：

<div id="owl-3" >
<div class="owl-carousel owl-theme" style="width: 100% !important; background: red;">
<div class="item" style="width: 100% !important; background: blue;">
<div class="row">
<div class="col s12 m6 l4">
<div class="owl-4" style="width: 500px;">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
<div class="item">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
</div>
</div>
<div class="col s12 m6 l8">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, quos!
</div>
</div>
</div>
</div>
</div>

我想要的选项：

 $('#owl-3 .owl-carousel').owlCarousel({
        loop: true,
        nav: false,
        dots: false,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: false,
        items: 1,
        mouseDrag: false


    });

    $('.owl-4 .owl-carousel').owlCarousel({
        loop: false,
        nav: false,
        dots: false,
        autoplay: true,
        autoplayTimeout: 1000,
        autoplayHoverPause: false,
        items: 1,
        mouseDrag: true
    });

我仅将Materializecss用于网格系统，但我认为问题不在于此。

任何解决方案？

Answer 1

请看下面的示例，希望对您有所帮助。

$(document).ready(function() {
			var outerCarousel = $('#outer-carousel');
			outerCarousel.owlCarousel({
				loop: true,
				center: true,
				items: 1,
				nav: false,
				dots: false,
        mouseDrag: false
			});
			
			var innerCarousel = $('#inner-carousel');
			innerCarousel.owlCarousel({
				loop: true,
				center: true,
				items: 1,
				nav: true,
				dots: false,
				mouseDrag: false,
				touchDrag: false,
				pullDrag: false,
        mouseDrag: false
			});
			
			$('#prev-outer').click(function () {
				outerCarousel.trigger('prev.owl.carousel', [200]);
			});
			
			$('#next-outer').click(function () {
				outerCarousel.trigger('next.owl.carousel', [200]);
			});
			
			$('#prev-inner').click(function () {
				innerCarousel.trigger('prev.owl.carousel', [200]);
			});
			
			$('#next-inner').click(function () {
				innerCarousel.trigger('next.owl.carousel', [200]);
			});
			
			$('#inner-zero').click(function () {
				innerCarousel.trigger('to.owl.carousel', [0,200]);
			});
			
			$('#inner-one').click(function () {
				innerCarousel.trigger('to.owl.carousel', [1,200]);
			});
			
			$('#inner-two').click(function () {
				innerCarousel.trigger('to.owl.carousel', [2,200]);
			});
			
		});

body {
		color: white;
		background-color: black;
	}
	#outer-carousel {
		width: 85%;
		border: 1px solid red;
	}
	
	.outer-carousel-item {
		margin: 20px; 
		border: 1px solid green;
		text-align: center;
	}
	
	#inner-carousel {
		width: 90%;
		padding: 20px;
		margin: auto;
		border: 1px solid white;
	}
	
	.inner-carousel-item {
		width: 90%;
		margin: 0 auto 20px auto;
		padding: 20px;
		border: 1px solid yellow;
	}
	
	.nav-button {
		margin: 20px;
		display: inline-block;
		padding: 5px;
		background-color: blue;
	}

<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>



<div>
<p>outer carousel nav</p>
<div id="prev-outer" class="nav-button">prev</div>
<div id="next-outer" class="nav-button">next</div>
</div>
<div style="clear: both; margin-bottom: 40px"></div>
<div id="outer-carousel" class="owl-carousel">
	<div class="outer-carousel-item">
		<p>outer carousel item 0</p>
		<div>
			<div id="prev-inner" class="nav-button">prev</div>
			<div id="next-inner" class="nav-button">next</div>	
		</div>
		<div style="clear: both"></div>
		<div>
			<div id="inner-zero" class="nav-button">goto 0</div>
			<div id="inner-one" class="nav-button">goto 1</div>
			<div id="inner-two" class="nav-button">goto 2</div>
		</div>
		<div id="inner-carousel" class="owl-carousel">
			<div class="inner-carousel-item">
				<p>inner carousel item 0</p>
			</div>
			<div class="inner-carousel-item">
				<p>inner carousel item 1</p>
			</div>
			<div class="inner-carousel-item">
				<p>inner carousel item 2</p>
			</div>
		</div>
		<div style="clear: both; height: 20px"></div>
	</div>
	<div class="outer-carousel-item">
		<p>outer carousel item 1</p>
	</div>
	<div class="outer-carousel-item">
		<p>outer carousel item 2</p>
	</div>
</div>

如何使用猫头鹰轮播在另一个轮播中创建轮播

1 个答案: