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>
2
Answers
When you initialize the carousel store the carousel object in a variable for future use.
Owl carousel provides the
refresh.owl.carousel
event for updating the carousel state when you modify the slides.Example:
You can find all the supported options here
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).
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
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/