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 Carohausel onChange triggering only on page change

I am using Owl Carousel 2 with 3 items per page setup. I want to select every second item when the slide event occurs because I am blurring first and second items and making the only second one visible.
I am using this piece of jQuery code to achieve this:
$("#service-slider .active:eq(1)").addClass("myActive");
And this is how i initiate my Owl Carousel:
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
onChange: activeSelect(),
onDrag: activeSelect(),
onTranslate: activeSelect(),
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 3
}
}
});
$("#service-slider .active:eq(1)").addClass("myActive");
function activeSelect() {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
}
var owl = $('#service-slider');
owl.owlCarousel();
owl.on('next.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
owl.on('prev.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
It is working fine for the first time but when an item transitioned it is not working; Only working when the whole page changes.
Here is a fiddle: https://jsfiddle.net/iCromwell/mpoxf9rc/1/

user7290573 found a solution. You can use the center option of the Owl Carousel to achieve what I want. His fiddle can be found here: https://jsfiddle.net/y2xhr4dk/
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
center: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 3
}
}
});

Swiper spaceBetween doesn't work properly

I'am trying to use slidesPerView: 'auto' with spaceBetween: 20 property, but Swiper shows only one slide per view.
I want to show next slide right after the first one even if it will be cutted by the document width.
$(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
loop: false,
slidesPerView: 3,
spaceBetween: 40,
navigation: {
prevEl: '.slider .prev-btn',
nextEl: '.slider .next-btn',
},
breakpoints: {
1200: {
slidesPerView: 'auto',
spaceBetween: 40,
},
830: {
slidesPerView: 'auto',
spaceBetween: 10, // <- doesn't work
}
}
});
});
But it shows only one slide per view and ignores the space which is set in options.
How to set space between slides strictly?

I had the same problem with slidesPerView: 'auto' always showing only one slide. The solution for me was with CSS: (codepen)
.swiper-container{
width: 100%;
}
.swiper-wrapper {
width: 50%;
}
.swiper-slide {
text-align: center;
width: auto;
}
.slide-image {
height: 400px;
width: auto;
}
.my-gallery figure {
margin: 0px;
}

Instead of slidesPerView:'auto', use this
breakpoints: {
"#0.00": {
slidesPerView: 1,
},
"#0.75": {
slidesPerView: 2,
},
"#1.00": {
slidesPerView: 3,
},
"#1.50": {
slidesPerView: 4,
},

Owl Carousel 2 width issue on browser scrollbar

I'm using Owl Carousel 2 with Bootstrap framework. There are 12 items that I have in the Carousel and I need to display three on the 1280-pixel wide resolution.
The owl-stage width is calculated as the total width of the Carousel (on desktop-1280px) which comes out to be as 3772px when there is no scroll bar on page.
Now if I open developer tools and then close it back again (i.e. bring a scroll bar onto the page and then remove) the width of class owl-stage becomes 3840px.
Due to this, on page load since the width is 3772 some content of the fourth slide is visible (probably just 5–6 pixels) but it disturbs the layout.
autoWidth:true is not applied.
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
nav: true,
onInitialized: fixOwl,
onRefreshed: fixOwl,
navText: [
"<span class='left-arrow-purple-bar'></span>",
"<span class='right-arrow-purple-bar'></span>"
],
responsiveClass: true,
responsive: {
320: {
items: 1.2,
nav: true
},
520: {
items: 1.45,
nav: true
},
720: {
items: 2.4,
nav: false
},
960: {
items: 3,
nav: true,
loop: false,
slideBy: 3,
margin: 0
}
}
});

Owl carousel 2 - custom animation on touch

Is it possible to use a custom animation option for mobile devices?
I have used options animateIn and animateOut with fadeIn and fadeOut.
This works well, carousel uses this effect when autoplay, but if I try to swipe slides, this animation is disabled, and carousel slide like a default one.
$('.carousel').owlCarousel({
mouseDrag:false,
touchDrag:true,
loop:true,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
autoplay:true,
margin:0,
nav:true,
dots:false,
navText: ['',''],
responsive: {
0:{
items:1
},
600: {
items:1
},
1000: {
items:1
}
}
});
It looks, like animation options have no effect for touchdrag.

My solution might not be ideal but something like this may work:
$(".carousel").owlCarousel({
mouseDrag: false,
touchDrag: true,
loop: true,
animateOut: "fadeOut",
animateIn: "fadeIn",
autoplay: true,
margin: 0,
nav: true,
dots: false,
navText: ["", ""],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
},
onDragged: function(e) {
$(e.target).hide().fadeIn("slow");
}
});
So we tie in to the onDragged event and simply hide and fade-in the entire carousel. Do test to ensure it is not buggy, but this might work for you as a kind of stop-gap solution (it isn't the best way as it may simply be masking the underlying transition and that is something you might notice if you flick through quite quickly).