如何用新的替换/重建 owl 轮播
项目?
描述
在许多情况下,例如当您从数据库中获取新数据时,您会在轮播中添加新数据,但在本示例中,我尝试用新数据替换所有项目。
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<div class="owl-carousel owl-theme">
<div class="item">
<h4>Old 1-1</h4></div>
<div class="item">
<h4>Old 2-1</h4></div>
<div class="item">
<h4>Old 3-1</h4></div>
<div class="item">
<h4>Old 4-1</h4></div>
</div>
最佳答案
根据Owl Carousel 2 documentation ,您可以使用 replace.owl.carousel
事件。
替换.owl.carousel
类型:可触发
参数:data
Removes current content and add a new one passed in the parameter.
用法
首先您需要使用replace
触发器,然后使用refresh
触发器追加新数据。不要使用destroy
或re-initialize
示例 1/更新/替换
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true
});
$('#reb').click(function() {
var html = '<div class="owl-item"><h4>1-2</h4></div><div class="item"><h4>2-2</h4></div><div class="item"><h4>3-2</h4></div><div class="item"><h4>4-2</h4></div><div class="item"><h4>2-2</h4></div>';
$('.owl-carousel').trigger('replace.owl.carousel', html).trigger('refresh.owl.carousel');
});
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<div class="owl-carousel owl-theme">
<div class="item">
<h4>Old 1-1</h4>
</div>
<div class="item">
<h4>Old 2-1</h4>
</div>
<div class="item">
<h4>Old 3-1</h4>
</div>
<div class="item">
<h4>Old 4-1</h4>
</div>
</div>
<a id="reb" class="btn btn-success">Rebuild</a>
示例 2/更新/添加
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true
});
$('#reb').click(function() {
var html = '<h4>New item</h4>';
$('.owl-carousel').trigger('add.owl.carousel', html).trigger('refresh.owl.carousel');
});
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" />
<div class="owl-carousel owl-theme">
<div class="item">
<h4>Old 1-1</h4>
</div>
<div class="item">
<h4>Old 2-1</h4>
</div>
<div class="item">
<h4>Old 3-1</h4>
</div>
<div class="item">
<h4>Old 4-1</h4>
</div>
</div>
<a id="reb" class="btn btn-success">Add</a>
关于owl-carousel - 使用 Owl Carousel 2 替换当前项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48033248/