We Keep Coding

Separate OWL Carousel script

I can't get this to work. I need to separate the OWL carousel script into 2 lose items.
(It won't work when I use the "function owlInitialize()" two times)
The reason is that I made a PageBuilder and need to add the whole script per added carousel item.
This is the script which does work but it needs to be separated:
I also rather have a different $(window).width() for each one.
function owlInitialize() {
if ($(window).width() < 860) {
$('.over-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
margin: 30,
dots: true,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
$('.diensten-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
dots: true,
margin: 30,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
}
else{
$('.over-slider.owl-carousel').owlCarousel('destroy');
$('.over-slider').removeClass("owl-carousel");
$('.diensten-slider.owl-carousel').owlCarousel('destroy');
$('.diensten-slider').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});
https://jsfiddle.net/fourroses666/wb7pmfqo/9/

Solution:
https://jsfiddle.net/fourroses666/wb7pmfqo/11/
function owlInitialize() {
if ($(window).width() < 860) {
$('.over-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
margin: 30,
dots: true,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
}
else{
$('.over-slider.owl-carousel').owlCarousel('destroy');
$('.over-slider').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize();
});
$(window).resize(function() {
owlInitialize();
});
// over + diensten slider
function owlInitialize2() {
if ($(window).width() < 860) {
$('.diensten-slider').addClass("owl-carousel");
$('.owl-carousel').owlCarousel({
loop:false,
dots: true,
margin: 30,
responsive:{
0:{
items:1,
},
680:{
items:2,
}
}
});
}
else{
$('.diensten-slider.owl-carousel').owlCarousel('destroy');
$('.diensten-slider').removeClass("owl-carousel");
}
}
$(document).ready(function(e) {
owlInitialize2();
});
$(window).resize(function() {
owlInitialize2();
});

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

owl-carousel autoplay working locally, not on server

my owl-carousel content is autoplaying and working perfectly with the speed setting on local. Once I upload to my server, the autoplay doesnt work and my second owl-carousel reverts back to a very slow speed.
How can this be?
$('.portfolio-slider').owlCarousel({
loop:true,
autoplay:true,
autoplayTimeout:4000,
navText:['<i class="ion-chevron-left"></i>','<i class="ion-chevron-right"></i>'],
nav:true,
responsive:{
0:{
items:1
},
}
})
$('.clients-active').owlCarousel({
loop:true,
navText:['<i class="ion-chevron-left"></i>','<i class="ion-chevron-right"></i>'],
nav:true,
autoplay:true,
autoplaySpeed:800,
autoplayTimeout:2000,
animateOut: 'fadeOut',
responsive:{
0:{
items:2
},
450:{
items:3
},
768:{
items:4
},
1000:{
items:6
}
}
})
Thanks for any help in advance!

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.

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