如何在猫头鹰轮播中动态创建新的幻灯片项目 [英] How to create new slide item in owl carousel dynamically

查看：59
本文介绍了如何在猫头鹰轮播中动态创建新的幻灯片项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想根据条件动态创建猫头鹰项目幻灯片.比如

if(i=1 && i<=4){//生成新项目幻灯片(猫头鹰轮播)}否则 if(i>=4 && i<=8){//生成第二张幻灯片}

我正在手动创建幻灯片项目，我想根据 jquery 中的条件动态制作它们.假设满足第一个条件，动态创建新的幻灯片项，如果满足第二个条件，则动态创建新的幻灯片.我是 jquery 的新手

Ps:- 幻灯片应该在 jquery 的帮助下动态创建.

这是滑块代码

<html lang="zh-cn"><头><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"><风格>身体{字体系列:Arial;字体大小:10pt；填充:15px；}.ui-datepicker-日历{显示:无；}</风格><title>是</title><身体><div class="test"></div><div id="owl-demo" class="owl-carousel owl-theme"><div class="item">第一张幻灯片

<div class="item">第二张幻灯片

<div class="item">第三张幻灯片

<脚本>$(document).ready(function() {$("#owl-demo").owlCarousel({navigation : true,//显示下一个和上一个按钮滑动速度:300，分页速度:400，项目 : 1,itemsDesktop : 假,itemsDesktopSmall : false,itemsTablet: 假,itemsMobile : false});});</html>

解决方案 

<html lang="zh-cn"><头><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"><风格>身体{字体系列:Arial;字体大小:10pt；填充:15px；}.ui-datepicker-日历{显示:无；}</风格><title>是</title><身体><div class="test"></div><div id="owl-demo" class="owl-carousel owl-theme"><div class="item">1 张幻灯片

<div class="item">2 幻灯片 </div><div class="item">3 幻灯片 </div>

<button id="addCarous">添加轮播<脚本>$(document).ready(function() {$("#owl-demo").owlCarousel({navigation : true,//显示下一个和上一个按钮滑动速度:300，分页速度:400，项目 : 1,itemsDesktop : 假,itemsDesktopSmall : false,itemsTablet: 假,itemsMobile : false});$("#addCarous").click(function(e){调试器；var number = document.getElementsByClassName("item").length +1;e.preventDefault();//- 防止表单提交$('#owl-demo').trigger('add.owl.carousel', ['<div class="item"> '+number+' 幻灯片 </div>']).trigger('refresh.owl.carousel');});});</html>

这是一个可选参数.它指定返回要插入的内容的函数.索引:它返回集合中元素的索引位置.HTML:它返回所选元素的当前 HTML.这就像在(轮播)中附加标签一样.

<块引用>

$("#id").trigger('add.owl.carousel',[])

活动由 Owl Carousel 在战略代码位置提供.这使您能够侦听任何更改并执行自己的操作.你也可以自己触发事件来控制猫头鹰旋转木马

<块引用>

initialize.owl.carousel 类型:attachable 回调:onInitialize When插件初始化.

initialized.owl.carousel 类型:attachable 回调:onInitialized插件初始化后.

resize.owl.carousel 类型:attachable 回调:onResize 当插件被调整大小.

resized.owl.carousel 类型:attachable 回调:onResized 当插件已调整大小.

refresh.owl.carousel 类型:可附加、可取消、可触发回调:onRefresh 参数:[event, speed] 当内部插件状态需要更新.

refreshed.owl.carousel 类型:attachable 回调:onRefreshed When插件的内部状态已更新.

drag.owl.carousel 类型:attachable 回调:onDrag 当开始拖动项目.

dragged.owl.carousel 类型:attachable 回调:onDragged 当已完成项目的拖动.

translate.owl.carousel 类型:attachable 回调:onTranslate When舞台翻译开始.

translated.owl.carousel 类型:attachable 回调:onTranslated When舞台的翻译已经完成.

change.owl.carousel 类型:attachable 回调:onChange 参数:property 当一个属性要改变它的值时.

changed.owl.carousel 类型:attachable 回调:onChanged 参数:property 当一个属性改变了它的值时.

next.owl.carousel 类型:可触发 参数:[speed] 转到下一个项.

prev.owl.carousel 类型:可触发 参数:[速度] 转到上一项.

to.owl.carousel 类型:可触发参数:[位置，速度] 去定位.

destroy.owl.carousel 类型:可触发 Destroys carousel.

replace.owl.carousel 类型:可触发 参数:数据 移除当前内容并添加传入参数的新内容.

add.owl.carousel 类型:可触发参数:[data, position] 添加给定位置的新项目.

remove.owl.carousel 类型:triggerable 参数:position 移除一个来自给定位置的项目.

要使用 Owl Carousel，您需要确保包含 Owl 和 jQuery 1.7 或更高版本的脚本.您不需要任何特殊标记.您所需要的只是将您的 div(owl 可与任何类型元素一起使用)包装在容器元素内.类owl-carousel"对于应用来自 owl.carousel.css 文件的正确样式是必需的.

http://www.landmarkmlp.com/js-plugin/owl.carousel/

I want to create owl item slides dynamically on the basis of conditions. Such as 

if(i=1 && i<=4)
{

//generate new item slide (owl carousel)
}
else if(i>=4 && i<=8)
{

//Generate second slide
}

I am creating the slide item manually, i want to make them dynamically on the basis of condition in jquery. Suppose the first condition met, create new slide item dynamically, if second condition met, create new slide dynamically. I am new at jquery

Ps:- slide should create dynamically with the help of jquery .

Here is slider code

<!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>

It is an optional parameter. It specifies the function that returns the content to insert. Index: It returns the index position of the element in the set. HTML: It returns the current HTML of the selected element. It's just like appending the tag inside the (carousel).

$("#id").trigger('add.owl.carousel',[])

Events are provided by Owl Carousel in strategic code locations. This gives you the ability to listen for any changes and perform your own actions. You could also trigger events by yourself to control 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.

To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included.You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element . Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

http://www.landmarkmlp.com/js-plugin/owl.carousel/

这篇关于如何在猫头鹰轮播中动态创建新的幻灯片项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆