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>
Related
I want the user to be able to delete the active/centered item in an OwlCarousel. The only piece of code I found w.r.t. deletion of items was this, so it seems to be a rather rare question:
$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
It works, but refers to the current item ID within the carousel, i.e. doesnt work anymore if I give numbers from my static HTML without reindexing. Here's a fiddle:
https://jsfiddle.net/87x312wv/6
Is there any better way instead of counting the item-ID? I'm rather looking for something like - would be way more natural:
$(".owl-carousel").trigger('remove.owl.carousel', $('owl-carousel .active')).trigger('refresh.owl.carousel');
Any ideas?
I find a solution. For example, imagine that you want to remove each item by clicking on it:
html code:
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
js code:
$(".owl-item").on("click", function (event) {
var items = $(".owl-item");
items.each((index, item) => {
if (item.isEqualNode(event.currentTarget)) {
$(".owl-carousel")
.trigger("remove.owl.carousel", index)
.trigger("refresh.owl.carousel");
return;
}
});
});
I also found an answer, which might even be a little be better performance-wise: Reindex the items only once everytime: Basically setting the option onRefreshed: reindexItems, with the acompanied function, see below
https://jsfiddle.net/q23Lr90m/1/
$(document).ready(function() {
startCarousel();
$('span').on('click', function() {
var dat = $(this).parent().parent().parent().data();
console.log(dat);
var itm = dat.item;
$(".owl-carousel").trigger('remove.owl.carousel', [itm]).trigger('refresh.owl.carousel');
})
});
function reindexItems() {
$(".owl-item:not(.cloned)").each(function(idx) {
//console.log('called');
$(this).attr('data-item', idx);
});
}
function startCarousel(){
$("#owl_about_main_slider").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 500,
margin:10,
onRefreshed: reindexItems,
paginationSpeed : 400,
autoplay:true,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false,
loop:true,
nav:true,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>","<i class='fa fa-angle-right' aria-hidden='true'></i>"]
});
}
I'm using Glide.js for a carousel, but the active item always has the width smaller than that of the others, and this is set by glide.js.
And that height being smaller, makes it inconsistent and ugly, as you can see in this video: https://vimeo.com/323290507
I already tried to add a 'DOMContentLoaded' event listener to get the node of the active item and node of the clones (which contains the correct height) and change the width of the active slide to the same width as the other, this worked only the first time, because glide always changes the width every time you change the current slide.
I also tried using MutationObserver but I'm not really sure how it works and I did not get it.
Here is my code:
<div class="glide">
<div data-glide-el="track" class="glide__track">
<ul class="glide__slides">
{% for article in articles %}
{% with article.specific as article %}
<li class="glide__slide">
{% image article.main_image fill-1300x500 as img %}
<img src="{{img.url}}" width="100%">
</li>
{% endwith %}
{% endfor %}
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<i class="myglide__arrow myglide__arrow--left fas fa-angle-left" data-glide-dir="<"></i>
<i class="myglide__arrow myglide__arrow--right fas fa-angle-right" data-glide-dir=">"></i>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
</div>
<script>
const glide = new Glide('.glide', {
type: 'carousel',
startAt: 0,
perView: 1,
autoplay: 3000,
hoverpause: true,
keyboard: true,
duration: 1000,
arrows: true,
animationTimingFunc: 'ease-in-out',
});
glide.mount();
</script>
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++;
})
firstly here's the fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
There are two instances of owl slider with custom controls each generated by its own code, the problem is, when the controls are clicked both the sliders respond instead of the respective slider responding.
HTML:
<div class="customNavigation">
<a class="btn prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn next">
<i class="fa fa-chevron-right"></i>
</a>
JS:
// Custom Navigation Events
$(".next").click(function(){
slider1.trigger('owl.next');
})
$(".prev").click(function(){
slider1.trigger('owl.prev');
})
The code is a bit long (but very simple), please have a look at the fiddle
This must be a javascript issue, something must be changed somewhere, I tried changing the class names of buttons but they stopped working.
$(".next") action affects to all next css class. Use different CSS class or use a more complex expression like #slider1 > .next if buttons are inside the slider or changing .next with .nextslider1 and .nextslider2
example (http://jsfiddle.net/krish7878/m2gnrx2v/1/)
Html:
<div class="container">
<div id="slider-1">
...
</div>
<div class="customNavigation">
<a class="btn prev1"><i class="fa fa-chevron-left"></i></a>
<a class="btn next1"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
...
<div class="container">
<div id="slider-2">
...
</div>
<div class="customNavigation">
<a class="btn prev2"><i class="fa fa-chevron-left"></i></a>
<a class="btn next2"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
Javascript:
$(document).ready(function() {
var slider1 = $("#slider-1");
slider1.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next1").click(function(){ slider1.trigger('owl.next'); });
$(".prev1").click(function(){ slider1.trigger('owl.prev'); });
var slider2 = $("#slider-2");
slider2.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next2").click(function(){ slider2.trigger('owl.next'); });
$(".prev2").click(function(){ slider2.trigger('owl.prev'); });
});
Also you can make it smaller using a function that composes each slider
function doSlider(num){
var slider = $("#slider-" +num);
slider.owlCarousel({
autoPlay: 3000,
items : 5,
pagination: false,
stopOnHover: true,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]
});
$(".next"+num).click(function(){slider.trigger('owl.next');});
$(".prev"+num ).click(function(){slider.trigger('owl.prev');});
}
$(document).ready(function() {
doSlider(1);
doSlider(2);
});
You use the same click event for each set of buttons.
I changed your html to:
<div class="customNavigation">
<a class="btn1prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="btn1next">
<i class="fa fa-chevron-right"></i>
</a>
and the js accordingly:
// Custom Navigation Events
$(".btn1next").click(function(){
slider1.trigger('owl.next');
})
$(".btn1prev").click(function(){
slider1.trigger('owl.prev');
})
Notice the btn1next and btn1prev. I did the same thing for the 2nd buttons.
The js fiddle: http://jsfiddle.net/krish7878/m2gnrx2v/1/
Got an annoying bug i can't fix.
I append a div and put the slider markup inside
$(article_box).append('[MARKUP]');
$('#screenshot-carousel').carouFredSel({
responsive: true,
// scroll: { fx: "crossfade", duration: "1500" },
items: {
width: 580
},
auto: false,
prev : {
button : ".event .prevPhoto",
key : "left"
},
next : {
button : ".event .nextPhoto",
key : "right"
}
});
Here markup is:
<div class="photo-block" id="'+id+'">
<i class="icon-red icon-in-nav icon-remove"></i>
<div class="controls">
<p class="slides-counter"><span id="the_num">0</span> из <span id="out_of">0</span></p>
</div>
<ul id="screenshot-carousel" class="fixclear">
<li><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
<li id="additional"><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
</ul>
</div>
What i get: the code inserts the markup, and i can see it in browser code viewer (images are there and i can open them in separate tab), but i can't see images in slider. Slider doesn't show slides, actually. All i see is control buttons. There is no bug shown in console , so the code seems to be clear, but what's wrong with showing slides/images?