Question

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

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
  });

Owlcarousel privides 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>');
}

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

您可以找到所有受支持的选项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>

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

$（“＃id”）。trigger（'add.owl.carousel'，[]）

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

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

initialized.owl.carousel类型：可附加的回调：onInitialized   插件初始化后。

resize.owl.carousel类型：可附加的回调：onResize   插件大小调整。

resized.owl.carousel类型：可附加的回调：onResized   插件已调整大小。

refresh.owl.carousel类型：可附加，可取消，可触发   回调：onRefresh参数：[事件，速度]当内部   插件的状态需要更新。

refreshed.owl.carousel类型：可附加的回调：onRefreshed时间   插件的内部状态已更新。

drag.owl.carousel类型：可附加的回调：onDrag当   开始拖动项目。

dragged.owl.carousel类型：可附加的回调：onDragged当   项目的拖动已完成。

translate.owl.carousel类型：可附加的回调：onTranslate何时   舞台的翻译开始了。

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

change.owl.carousel类型：可附加的回调：onChange参数：   属性当属性要更改其值时。

changed.owl.carousel类型：可附加的回调：onChanged参数：   属性当属性更改其值时。

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

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

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

destroy.owl.carousel类型：可触发的销毁旋转木马。

replace.owl.carousel类型：可触发参数：data Removes   当前内容，并在参数中添加新内容。

add.owl.carousel类型：可触发参数：[数据，位置]添加   给定位置上的新商品。

remove.owl.carousel类型：可触发参数：position移除一个   给定位置的物品。

要使用Owl Carousel，您需要确保同时包含Owl和jQuery 1.7或更高版本的脚本。不需要任何特殊标记。您需要做的就是将divs（owl与任何type元素一起使用）包装在container元素内。必须使用“ owl-carousel”类才能应用来自owl.carousel.css文件的适当样式。

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

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

2 个答案: