如何在猫头鹰轮播中动态创建新的幻灯片项目

Posted 2023-05-07

技术标签:

【中文标题】如何在猫头鹰轮播中动态创建新的幻灯片项目【英文标题】：How to create new slide item in owl carousel dynamically 【发布时间】：2020-01-21 03:30:19 【问题描述】：

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

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


//generate new item slide (owl carousel)

else if(i>=4 && i<=8)


//Generate second slide

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

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

这是滑块代码

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

【问题讨论】：

只需从 JS 中动态添加额外的 Div 没有得到，怎么办 【参考方案1】：

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

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

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

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

initialize.owl.carousel 类型：可附加回调：onInitialize When 插件初始化。

initialized.owl.carousel 类型：可附加回调：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 类型：可附加回调：onTranslate When 舞台翻译开始。

translated.owl.carousel 类型：可附加回调：onTranslated When 舞台翻译完成。

change.owl.carousel 类型：可附加回调：onChange 参数： property 当一个属性要改变它的值时。

changed.owl.carousel 类型：可附加回调：onChanged 参数： property 当一个属性改变了它的值。

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

prev.owl.carousel 类型：可触发参数：[speed] 转到上一项。

to.owl.carousel 类型：可触发参数：[position, speed] Goes 定位。

destroy.owl.carousel 类型：可触发销毁轮播。

replace.owl.carousel 类型：可触发参数：data 移除当前内容并在参数中添加一个新的。

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

remove.owl.carousel 类型：可触发参数：position 移除一个来自给定位置的项目。

要使用 Owl Carousel，您需要确保同时包含 Owl 和 jQuery 1.7 或更高版本的脚本。您不需要任何特殊标记。您所需要的只是将您的 div（owl 可与任何类型元素一起使用）包装在容器元素中。 “owl-carousel”类是强制应用来自 owl.carousel.css 文件的正确样式的。

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

【讨论】：

【参考方案2】：

当您初始化轮播时，将轮播对象存储在一个变量中以备将来使用。

var $owl = $("#owl-demo").owlCarousel(
  navigation: true, // Show next and prev buttons
  slideSpeed: 300,
  paginationSpeed: 400,
  items: 1,
  itemsDesktop: false,
  itemsDesktopSmall: false,
  itemsTablet: false,
  itemsMobile: false,
);

Owl carousel 提供refresh.owl.carousel 事件，用于在您修改幻灯片时更新轮播状态。

示例：

if ((i = 1 && i <= 4)) 
  $("#owl-demo").append('<div class="item">New slide</div>');
 else if (i >= 4 && i <= 8) 
  $("#owl-demo").append('<div class="item">New slide 2</div>');


// We are refreshing the carousel state to update new slide
$owl.trigger("refresh.owl.carousel");

您可以找到所有支持的选项here

【讨论】：

知道了。非常感谢

以上是关于如何在猫头鹰轮播中动态创建新的幻灯片项目的主要内容，如果未能解决你的问题，请参考以下文章

根据用户在轮播中的位置查找猫头鹰轮播的索引

Sencha touch 2 - 如何创建动态轮播？

Bootstrap 4 - 创建动态轮播

在全屏图像轮播中拟合纵向和横向图像

如何在 Bootstrap 4 轮播中制作全角背景图像？

调整jquery css大小时的猫头鹰轮播响应裁剪宽度