I need sync 2 owl carrousel - javascript

I have this web http://crigamex.wizerlink.net/
I need sync 2 carrousel
enter image description here
I need this https://jsfiddle.net/owcfjaht/
try but have error with
var owl1 = sync1.data("owlCarousel").owl; var owl2 = sync2.data("owlCarousel").owl;
but It was did on version 1 and I use version 2
var owl_1 = $('#owl-1');
var owl_2 = $('#owl-2');
owl_1.owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1,
dots: false,
navText: ["<i class='fa fa-chevron-left fa-2x'></i>","<i class='fa fa-chevron-right fa-2x'></i>"]
});
owl_2.owlCarousel({
loop:true,
margin:10,
nav: false,
dots: false,
responsive:{
0:{
items:1
},
768:{
items:4
},
992:{
items:4
},
1200:{
items:4
}
}
});
owl_2.find(".item").mousedown(function(){
var slide_index = owl_2.find(".item").index(this);
owl_1.trigger('to.owl.carousel',[slide_index,300]);
});


my code!
var owl_1 = $('#owl-1');
var owl_2 = $('#owl-2');
owl_1.owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1,
dots: false,
navText: ["<i class='fa fa-chevron-left fa-2x'></i>","<i class='fa fa-chevron-right fa-2x'></i>"]
});
owl_2.owlCarousel({
touchDrag : false,
mouseDrag : false,
loop:true,
margin:10,
nav: false,
dots: false,
responsive:{
0:{
items:1
},
768:{
items:4
},
992:{
items:4
},
1200:{
items:4
}
}
});
owl_2.find(".item").click(function(){
var slide_index = owl_2.find(".item").index(this);
owl_1.trigger('to.owl.carousel',[slide_index,300]);
});
owl_1.on('changed.owl.carousel', function (e) {
control=e.relatedTarget.current()
owl_2.trigger('to.owl.carousel',[control+1,1000],true);// mueve el 2do carrousel
})

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

Categories