jquery conflict with foundation 5 and owl carousel 2 - javascript

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

Related

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

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-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!

owl-carousel does not scroll smoothly

The carousel can be viewed here under 'clients worked with'.
You'll notice the carousel starts reasonably smoothly then after a second or so starts to stagger. When it gets to what I can only assume is the end of it's play time, it then looks like it almost resets the position.
Here's the JS I'm using:
<script src="javascripts/custom/jquery-3.2.1.min.js"></script>
<script src="javascripts/custom/owl.carousel.js"></script>
<script>
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 10,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 1000,
smartSpeed: 2500,
fluidSpeed: true,
autoplayHoverPause: true
});
$('.play').on('click', function() {
owl.trigger('play.owl.autoplay', [1000])
})
$('.stop').on('click', function() {
owl.trigger('stop.owl.autoplay')
})
</script>

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.

Categories