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();
});
Related
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');
})
}
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
})
When my display size in less than 1170px owl carousel div width overflow. What am I do?
jQuery(document).ready(function($) {
"use strict";
// TESTIMONIALS CAROUSEL HOOK
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 0,
autoplay: true,
dots:false,
autoplayTimeout: 8500,
smartSpeed: 450,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3,
nav:true
}
}
});
});
Try this ! autoWidth true or you modify css!
In js
$('.owl-carousel').owlCarousel({
margin:10,
loop:true,
autoWidth:true,
items:4
})
or in css
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
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.
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