Develop Reference

Owl-Carousel2 - set dotsData

I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?

Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>

So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)

If nothing helped to you.
Try to achieve manually.
Here is the example:-
HTML Auto-generated by Owl-carousel
<div class="owl-controls">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
It will auto-generated by Owl carousel.
select parent id/class of this and change content using javascript or jquery. It's totally up to you.
here is the example:-
Javascript
var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
let i=1;
dots.forEach((elem)=>{
elem.innerHTML = i;
i++;
})

Lightslider bugging out inside featherlight on second click

FIDDLE: http://jsfiddle.net/2patspw2/3429/
I am using featherlight as my modal box and am running lightslider inside of it. It runs fine the first time it is clicked, but them for some reason it seems to bug out and duplicate itself. I had thought it might be duplicate slides so I read light slider documentation and added this:
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
This didn't fix the problem, so then I tried doing an each() of function (index) like so:
$('.inline').each(function(index) {
$(document).on("click", '.modal', function() {
// relevant code
});
});
I bound it to a delegated event since I have to activate via an on:click. However the element still seems to duplicate itself?
HTML:
<a href=".inline" class="modal" data-featherlight>Inline</a>
<div class="inline">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> TEST!!!!
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
<a href=".inline-two" class="modal" data-featherlight>Inline2</a>
<div class="inline-two">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> asfasdf
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
jQuery:
$(document).each(function(index) {
$('.modal').on("click", function() {
$('.gal').lightSlider({
gallery: true,
item: 1,
loop: true,
thumbItem: 9,
slideMargin: 0,
enableDrag: false,
currentPagerPosition: 'left',
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
}
});
})
});
Why is the carousel essentially duplicate the navigation and bugging out?
Note I tried doing loop: false as well, and it didn't change anything.

Owl Carousel With Dynamic Content - Prev/Next Navigation Not Working

I am using jquery owl carousel plugin to dynamically present html page components to the users.
The problem is the Prev/Next navigation and loop not working with dynamically added contents if the Drag triggers are set to false/ disabled.
Here is the codes:
Options
var owlcarousel_obj = {
loop: true,
nav: true,
navContainer: "#cv-navigation",
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: true,
dotsEach: true, */
navText: ['<span id="nav-arrow-left" class="nav-arrow inline-block"><i class="fa fa-chevron-left fa-lg"></i></span>', '<span id="nav-arrow-right" class="nav-arrow inline-block"><i class="fa fa-chevron-right fa-lg"></i></span>'],
nestedItemSelector: "owl-item",
responsive:{
0:{
items:1,
},
320:{
items:2,
},
480:{
items:3,
},
768:{
items:4,
},
1000:{
items:6,
}
}
};
initialize owl carousel
var vartcarousel = $("#cv-contents");
vartcarousel.owlCarousel(owlcarousel_obj);
I added this custom trigger, but still not working
$(".nav-arrow-left").on("click touch", function(){
vartcarousel.trigger("next.owl.carousel");
});
$(".nav-arrow-right").on("click touch", function(){
vartcarousel.trigger("prev.owl.carousel");
});
Load contents dynamically
$(".call-header").on("click touch", function(e){
var comvars = $("#packagename-variations-group").html();
vartcarousel.trigger("add.owl.carousel", comvars).trigger("refresh.owl.carousel");
e.stopImmediatePropagation();
});
HTML
<div id="cv-header" class="d-table">
<span class="cv-header-text pull-left">Test</span>
<span class="cv-close-box"><i class="fa fa-times fa-lg"></i></span>
<div id="cv-navigation" class="pull-right d-tcell"></div>
<div class='clear'></div>
</div>
<div id="cv-contents" class="">
</div>
How to solve this problem?

The owlCarouel object is now linked to the object with the "data" jQuery binder, and uses its own prev / next methods, use it like that :
var varcaroulsedata = varcarousel.data('owlCarousel');
$(".nav-arrow-left").on("click touch", function(){
varcaroulsedata.prev();
});
$(".nav-arrow-right").on("click touch", function(){
varcaroulsedata.next();
});

Know if my item is the latest - Owl Carousel

I would like to know if it is possible to know if my owl-carousel is on the end of the list to disable the next button.
Here is my Javascript:
<script>
$(document).ready(function() {
var owl = $("#owl");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
if(owl.)
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>
Here is my HTML:
<div class="col-xs-6">
<div class="row contracts" rv-show="context:contracts | length | gt 1">
<div class="col-sm-12 box box-flex" rv-slide="context:stepHide" style="">
<ul id="owl">
<li class="col-xs-2">987456</li>
<li class="col-xs-2">558745</li>
<li class="col-xs-2">126985</li>
<li class="col-xs-2">598746</li>
<li class="col-xs-2">325478</li>
<li class="col-xs-2">987652</li><li class="col-xs-2">126985</li>
<li class="col-xs-2">598746</li>
<li class="col-xs-2">325478</li>
<li class="col-xs-2">987652</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
<a class="btn play">Autoplay</a>
<a class="btn stop">Stop</a>
</div>
</div>
</div>
</div>
</div>
So when the last li item is showed, I want to disable next button.
I searched into Owl functions but I didn't find something as I want.
Thank you

You can do this with cominaison of afterAction and currentItem like this
<script>
$(document).ready(function() {
var owl = $("#owl");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
afterAction: function() {
if(this.owl.currentItem == $(owl).children().length - 1) {
$('.btn .next').hide();
} else {
$('.btn .next').show();
}
},
});
// Custom Navigation Events
$(".next").click(function(){
owl.trigger('owl.next');
if(owl.)
})
$(".prev").click(function(){
owl.trigger('owl.prev');
})
$(".play").click(function(){
owl.trigger('owl.play',1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function(){
owl.trigger('owl.stop');
})
});
</script>

Isotope hide on click

My site has all elements displayed by default.
Isotope has the inbuilt method 'filter' - ie show ONLY this.
I'd like to make a function where I hide/show an element based on clicking on a button on screen - ie hide ONLY this (and show the others) / unhide this (and show the others).
Here's what I'm doing code-wise.
var music = $('#music').isotope();
$('nav button').on('click', function () {
music.isotope({
filter: "div." + $(this).attr("class")
});

With filtering, the filter parameter must match items in your HTML markup, if not the filter will not return anything.
FIDDLE DEMO: http://jsfiddle.net/XWVhc/1/
I can only provide an alternate example as you have not provided any html markup so that we could debug your current code, however, I'll explain how this works.
HTML FOR FILTERS:
Here we have a few simple buttons that will filter our items with the data-filter attribute attached to each button.
<div id="filter-buttons-holder">
<div class="filter-button" data-filter=".dog">DOG</div>
<div class="filter-button" data-filter=".cat">CAT</div>
<div class="filter-button" data-filter=".foo">FOO</div>
<div class="filter-button" data-filter=".bar">BAR</div>
<div class="filter-button selected" data-filter=".dog, .foo, .cat, .bar">SHOW ALL</div>
</div>
HTML FOR ISOTOPE ITEMS:
Here's the markup for our isotope items, notice that each item has a class of isotope-item and also has a class of what 'category' it belongs too, you can add multiple classes and it will still filter as expected.
<div id="module-columns-holder" class="isotope">
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="cat foo isotope-item">
<div><h1>CAT</h1></div>
</a>
<a href="/" class="dog isotope-item">
<div><h1>DOG</h1></div>
</a>
<a href="/" class="foo isotope-item">
<div><h1>FOO</h1></div>
</a>
<a href="/" class="bar isotope-item">
<div><h1>BAR</h1></div>
</a>
</div>
JAVASCRIPT FILTERING
Here we set up our isotope container, notice the last data attribute is a filter, this is effectively what you're after, however you can specify which 'category' you want to filter on initially.
//Setup isotope for filters
var isotopeContainer = $('#module-columns-holder');
isotopeContainer.isotope({
itemSelector: '.isotope-item',
layoutMode : 'fitRows',
animationOptions : {
queue : false,
duration : 750,
easing: 'linear'
},
filter: '.dog, .cat, .foo, .bar'
});
CLICK EVENT FOR FILTERS
You can attach a filter to the buttons we created earlier so that you can have live filtering
$('#filter-buttons-holder .filter-button').on('click',function(){
var filters = $(this).data('filter');
var parent = $(this).closest('#filter-buttons-holder');
parent.find('.selected').removeClass('selected');
$(this).addClass('selected');
isotopeContainer.isotope({ filter: filters });
return false;
});
Hope this helps