我想根据条件动态创建猫头鹰元素幻灯片。比如
if(i=1 && i<=4)
{
//generate new item slide (owl carousel)
}
else if(i>=4 && i<=8)
{
//Generate second slide
}
我正在手动创建幻灯片元素，我想根据 jquery 中的条件动态制作它们。假设满足第一个条件，动态创建新幻灯片元素，如果满足第二个条件，动态创建新幻灯片。我是 jquery 的新手
Ps:- slide 应该在 jquery 的帮助下动态创建。
这是 slider 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="myjs2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="style2.css">
<style>
body
{
font-family:Arial;
font-size : 10pt;
padding:15px;
}
.ui-datepicker-calendar {
display: none;
}
</style>
<title>yes</title>
</head>
<body>
<div class="test"></div>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
first slide
</div>
<div class="item">
second slide
</div>
<div class="item">
Third slide
</div>
</div>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false
});
});
</script>
</body>
</html>最佳答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="myjs2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="style2.css">
<style>
body
{
font-family:Arial;
font-size : 10pt;
padding:15px;
}
.ui-datepicker-calendar {
display: none;
}
</style>
<title>yes</title>
</head>
<body>
<div class="test"></div>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"> 1 slide </div>
<div class="item"> 2 slide </div>
<div class="item"> 3 slide </div>
</div>
<button id="addCarous"> Add Carousel</button>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false
});
$("#addCarous").click(function(e){
debugger;
var number = document.getElementsByClassName("item").length +1;
e.preventDefault(); //-- prevent form submit
$('#owl-demo').trigger('add.owl.carousel', ['<div class="item"> '+number+' slide </div>'])
.trigger('refresh.owl.carousel');
});
});
</script>
</body>
</html>
这是一个可选参数。它指定返回要插入的内容的函数。索引:它返回集合中元素的索引位置。 HTML:它返回所选元素的当前 HTML。这就像在(轮播)中添加标签一样。
$("#id").trigger('add.owl.carousel',[])
事件由 Owl Carousel 在战略代码位置提供。这使您能够监听任何更改并执行自己的操作。 你也可以自己触发事件来控制Owl Carousel
initialize.owl.carousel Type: attachable Callback: onInitialize When the plugin initializes.
initialized.owl.carousel Type: attachable Callback: onInitialized When the plugin has initialized.
resize.owl.carousel Type: attachable Callback: onResize When the plugin gets resized.
resized.owl.carousel Type: attachable Callback: onResized When the plugin has resized.
refresh.owl.carousel Type: attachable, cancelable, triggerable Callback: onRefresh Parameter: [event, speed] When the internal state of the plugin needs update.
refreshed.owl.carousel Type: attachable Callback: onRefreshed When the internal state of the plugin has updated.
drag.owl.carousel Type: attachable Callback: onDrag When the dragging of an item is started.
dragged.owl.carousel Type: attachable Callback: onDragged When the dragging of an item has finished.
translate.owl.carousel Type: attachable Callback: onTranslate When the translation of the stage starts.
translated.owl.carousel Type: attachable Callback: onTranslated When the translation of the stage has finished.
change.owl.carousel Type: attachable Callback: onChange Parameter: property When a property is going to change its value.
changed.owl.carousel Type: attachable Callback: onChanged Parameter: property When a property has changed its value.
next.owl.carousel Type: triggerable Parameter: [speed] Goes to next item.
prev.owl.carousel Type: triggerable Parameter: [speed] Goes to previous item.
to.owl.carousel Type: triggerable Parameter: [position, speed] Goes to position.
destroy.owl.carousel Type: triggerable Destroys carousel.
replace.owl.carousel Type: triggerable Parameter: data Removes current content and add a new one passed in the parameter.
add.owl.carousel Type: triggerable Parameter: [data, position] Adds a new item on a given position.
remove.owl.carousel Type: triggerable Parameter: position Removes an item from a given position.
要使用 Owl Carousel，您需要确保包含 Owl 和 jQuery 1.7 或更高版本的脚本。您不需要任何特殊标记。您所需要的只是将您的 div(猫头鹰适用于任何类型的元素)包装在容器元素中。 “owl-carousel”类必须应用来自 owl.carousel.css 文件的适当样式。
关于javascript - 如何动态地在 Owl Carousel 中创建新的幻灯片元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58022159/