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

Question

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

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>

Answer 1

初始化轮播时，将轮播对象存储在变量中以供将来使用。

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轮播提供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

Answer 2

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

这是一个可选参数。它指定函数returns要插入的内容。 Index: returns 元素在集合中的索引位置。 HTML：它returns被选元素的当前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 轮播，您需要确保 Owl 和 jQuery 1.7 或更高版本的脚本 included.You 不需要任何特殊标记。您只需要将 div（owl 适用于任何类型的元素）包装在容器元素中。 Class "owl-carousel" 必须应用来自 owl.carousel.css 文件的正确样式。

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

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

How to create new slide item in owl carousel dynamically

javascript

jquery

html

css

owl-carousel