javascript - How to create new slide item in owl carousel dynamically

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/ui/1.12.1/themes/base/jquery-ui.css">

    <script src=".3.1/jquery.min.js"></script>
    <script src=".12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href=".1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href=".3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href=".3.4/assets/owl.theme.default.min.css">
    <script src=".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>

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
}

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./ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare./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>

Share Improve this question asked Sep 20, 2019 at 5:17 ajay kumar 931 gold badge1 silver badge12 bronze badges

just add the additional Div from the JS dynamically – arunsakthivel96 Commented Sep 20, 2019 at 5:46
not getting, how to do this – ajay kumar Commented Sep 20, 2019 at 5:49

Add a ment |

2 Answers 2

Sorted by: Reset to default 12

<!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./ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
    <script src="myjs2.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
    <script src="https://cdnjs.cloudflare./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 e from owl.carousel.css file.

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

When you initialize the carousel store the carousel object in a variable for future use.

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 provides the refresh.owl.carousel event for updating the carousel state when you modify the slides.

Example:

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

You can find all the supported options here

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to create new slide item in owl carousel dynamically - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)