We Keep Coding

Get multiple owl carousels respond to next prev event

I'm having problem with my owl carousel navigation. When I click "next" or "prev" all the carousels switching images. I want only the one that i click on to trigger. Below is my current code. Could you help me out?
jQuery(function ($) {
var owl = $('.image-slider-properties');
owl.each(function(){
$(this).owlCarousel({
loop:true,
nav:true,
autoPlay:false,
items:1,
autoWidth:true,
nav : true,
navText: [$('.am-next'),$('.am-prev')],
margin:10,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
})
});
$('.am-next').click(function() {
owl.trigger('owl.prev');
})
$('.am-prev').click(function() {
owl.trigger('owl.next');
})
}

Owl carousal first slide video once finished then start the remaining slider images autoplay

My problem is owl carousal using home slider, images and including video also.
So we need first slider it's video playing, video time duration is (60sec+).
Once finish this video slider, then automatically start the remaining slider images.
Script :
var carousel = function() {
$('.home-slider').owlCarousel({
loop:true,
autoplay: true,
margin:0,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
nav:false,
dots: false,
autoplayHoverPause: false,
items: 1,
navText : ["<span class='ion-md-arrow-back'></span>","<span class='ion-chevron-right'></span>"],
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});

Why does my dropdown stop working if I use code with errors?

This drop down code is working:
$(document).ready(function(){
$('.owl-wrapper').owlCarousel({
loop:true,
margin:0,
nav:true,
autoPlay: 100,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
})
This drop down code is not working: Why?
$(document).ready(function(){
$('.owl-wrapper').owlCarousel({
loop:true,
margin:0,
nav:true,
autoPlay: 100,
responsive:{
0:{
items:
},
600:{
items:2
},
1000:{
items:3
}
}
})

You have missed to give the value to items in your second example. You need to give it a value as you have given in your first example.
$(document).ready(function(){
$('.owl-wrapper').owlCarousel({
loop:true,
margin:0,
nav:true,
autoPlay: 100,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
You can always check here to know how to use the owlCarousel.

How to make carousel slide continuously with Owl Carousel

I want to do, that logos with Owl Carousel plugin will slide continuously (no with 1,2,3... seconds delay, but slide without stop) Is it possible with Owl Carousel?

Here is how I got owl carousel to constantly scroll.
I had to add in a trigger to start the loop as the autoplay was too long, and meant it didn't start straight away, then I have a second trigger that sets the speed back to match the main setting.
You need to make sure that autoplaySpeed and smartSpeed are set to the same timing, and that slideTransition is set to linear.
jQuery(document).ready(function() {
jQuery('.owl-carousel').owlCarousel({
loop: true,
items: 6,
autoplay: true,
slideTransition: 'linear',
autoplaySpeed: 6000,
smartSpeed: 6000,
center: true,
});
jQuery('.owl-carousel').trigger('play.owl.autoplay',[2000]);
function setSpeed(){
jQuery('.owl-carousel').trigger('play.owl.autoplay',[6000]);
}
setTimeout(setSpeed, 1000);
});

This should work, using autoplaySpeed and autoplayTimeout:
$('.owl-carousel').owlCarousel({
stagePadding: 0,
loop:true,
margin:10,
nav: false,
autoplay: true,
slideTransition: 'linear',
autoplayTimeout: 3000,
autoplaySpeed: 3000,
autoplayHoverPause: true,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:5
}
}
})

You can define your slideSpeed and autoPlay status with;
$('#my_carousel').owlCarousel({
autoPlay: true,
slideSpeed: 200
});
But firstly; you should see the all options in the Owl Carousel

jquery conflict with foundation 5 and owl carousel 2

I have really pathetic issue but I don't know why its happened. I am using owl carousel 2 with foundation 5 and its working fine on all browsers just giving me issue in safari browser.
Here is my file structure:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
</body>
</html>
when I remove app.js carousel start working on safari but when it's on carousel stop slides.
Here my code in app.js.
jQuery(function(){
jQuery.noConflict();
jQuery(document).foundation();
});
And this one in theme.js
jQuery(function(){
"use strict";
jQuery.noConflict();
jQuery(document).ready(function(){
//parallax
//carousel
jQuery('.owl-carousel').each(function(){
//var tot = jQuery(this).find("div.item").length;
var owl = jQuery('.owl-carousel');
jQuery(".prev").on('click', function () {
//owl.trigger('prev.owl.carousel');
owl.trigger('prev.owl.carousel');
});
jQuery(".next").on('click', function () {
owl.trigger('next.owl.carousel');
//var toIndex = 5;
//owl.trigger("to.owl.carousel", 5);
//owl.trigger('to.owl.carousel', jQuery(this).index());
});
if( jQuery(this).find("div.item").length > 5){
jQuery(this).owlCarousel({
items: 4,
loop: true,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
margin: 0,
responsiveClass:true,
dots:false,
//autoWidth:true,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:2,
nav:false
},
1000:{
items:4,
nav:false,
}
}
});
}else{
jQuery(this).owlCarousel({
loop: false,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:true,
margin: 0,
responsiveClass:true,
scrollPerPage : true,
dots:false,
//autoWidth:true,
responsive:{
0:{
items:1,
nav:false
},
600:{
items:3,
nav:false
},
1000:{
items:4,
nav:false,
}
}
});
}
});
});
// Define your library strictly...
})();

I found solution myself. Actually foundation also using.
jQuery(document).foundation();
And I was also using
jQuery(document).ready(function(){
});
so both function was working fine on other browsers but on safari its giving confliction thats why it was not working so i just remove .ready function from theme.js and its solved. maybe it will help with someone else