Owl Carohausel onChange triggering only on page change - javascript

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

Related

Enabling touchdrag for mobile devices or Refreshing owl carousel in angular

I am trying to enable touchdrag and mousedrag only for mobile devices.
customOptions: OwlOptions = {
loop: true,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
navText: ['', ''],
items: 4,
responsive: {
0: {
touchDrag: true,
mouseDrag: true
},
768: {
touchDrag: false,
mouseDrag: false
}
},
nav: true
}
Somewhere I read, carousel should be refreshed for changes to happen when resized. But everywhere they used jquery
$('owl-carousel').trigger('refresh.owl.carousel')
But I want to do it without using jquery as I am using owl-carousel-o tag and also owloptions. If there is some other way also please suggest.
The docs already provides a solution for you.
Here I chose "initialized" event to change the options. Despite the name, it seemed to fire more than 1 time. So I put a flag there to make it run only once. Below is the link of working demo with Angular 14.
https://stackblitz.com/edit/angular-ivy-uznbfk?file=src/app/hello.component.ts
I used a hostlistener when the screen resizes and assigned the values in there to change. It is working fine now.
#HostListener('window:resize', ['$event'])
checkScreenSize(event?) {
this.isDesktop = window.innerWidth >= 768 ? true : false;
if (this.isDesktop) {
this.customOptions.touchDrag = false;
this.customOptions.mouseDrag = false;
}
else {
this.customOptions.touchDrag = true;
this.customOptions.mouseDrag = true;
}
}
customOptions: OwlOptions = {
margin: 10,
stagePadding: 10,
loop: false,
dots: false,
navSpeed: 600,
navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right' aria-hidden='true'></i>"],
nav: true,
responsive: {
0: {
items: 4
}
}
}

Displaying a carousel on clicking each link - using Jquery and OwlCarousel

I have 3 carousels, and i'm trying to display each carousel on clicking a respective link, using jquery.
When i add the css "display: none" to a div, the owl carousel does not quite behave correct. The size of the carousel elements shrink, and sometimes disappear.
I have made a jsfiddle for it, i'd appreciate your help in finding what is going wrong - https://jsfiddle.net/prtkvarma/yLjw7gsk/3/
Thanks.
Following is just the JS part of the code -
jQuery(document).ready(function($) {
$('.owl-one').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-two').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
$('.owl-three').owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 2
},
480: {
items: 3
},
786: {
items: 4
}
}
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
/*showing/hiding particular carousels on clicking links*/
$('.link-promotions').click(function() {
$('.sec-casino-games').hide();
$('.sec-live-odds').hide();
$(".sec-promotions").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-casino-games').click(function() {
$('.sec-promotions').hide();
$('.sec-live-odds').hide();
$(".sec-casino-games").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
$('.link-live-odds').click(function() {
$('.sec-promotions').hide();
$('.sec-casino-games').hide();
$(".sec-live-odds").show(1000);
$(".pic1, .pic2, .pic3, .pic4").hide('slow');
});
});
You typically want to stay away from built in special effects that hardcode inline styles on elements that leverage libraries that are heavy on visual user experience. The reason for this is because the jQuery built in special effects all change the style attribute of the element directly, which will typically clash with library CSS rules.
I've taken the liberty to rewrite most of your jQuery to be simpler, less redundant, and streamlined. The main thing, to answer your question, is to leverage the .addClass() method, which allows you to .animate() add classes to your element, much like that same manner that .hide() does. This is done by adding time in milliseconds as second parameter when using the .addClass() method.
jQuery
jQuery(document).ready(function($) {
$('.owl-carousel').each(function(index, element) {
jQuery(element).owlCarousel({
items: 4,
lazyLoad: true,
margin: 20,
nav: true,
dots: false,
responsive: {
0: {
items: 4
}
}
});
});
var owl_content = jQuery('.owl-carousel');
var owl_links = jQuery('.select-link a');
jQuery(owl_links).each(function(index, element) {
jQuery(element).click(function(e) {
jQuery(owl_content).each(function(i, el) {
jQuery(el).addClass('c', 500);
if (i === index) {
jQuery(owl_content[index]).removeClass('c', 500);
console.log(i);
}
});
});
});
/*Change css of links on click*/
$('.select-link li').click(function() {
$('.select-link li').removeClass('active-link');
$(this).addClass('active-link');
});
jQuery('.c.first').removeClass('c');
});
Fiddle
https://jsfiddle.net/dixalex/yLjw7gsk/8/
Sources
animating addClass/removeClass with jquery

How to view only 3 items on Owl Slider instead of 5

I am trying to implement owl slider in my website and it is working good but the only problem is that owl slider show 5 items on one slide by default so I need to make it 3 items to be display per slide instead of 5.
I have also tried to add below code which is available on it official website but it is not working for me please let me know how to fix.
jQuery(document).ready(function(){
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true: false,
loop:($(".owl-carousel .item").length > 1) ? true: false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
})
Thanks
I have a similar problem, and my problem is below:
I import a dynamic css style file;
When document is ready, the dynamic file have not loaded, but owl is inited;
And then the dynamic file loaded, now the dynamic file's some style resize owl-carousel container, but now owl's responsive is not triggered;
You may should init Owl when all style is ready.
window.addEventListener("load", function () {
jQuery('.owl-demo').owlCarousel({
margin: 0,
responsiveClass: true,
smartSpeed: 500,
dots: ($(".owl-carousel .item").length > 1) ? true : false,
loop: ($(".owl-carousel .item").length > 1) ? true : false,
responsive: {
0: {
items: 1,
},
1140: {
items: 3,
},
1110: {
items: 3,
}
}
}, false);
Another workaround is below:
setTimeout(function () {
$('.owl-carousel').trigger('refresh.owl.carousel');
}, 500);

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

jQuery multi sliders change slide in one time

I'm using slidesjs and I want make multi sliders
I have 2 sliders #show and #show2, and I want that 2 slidersw work in 1 time: slides will be change in one time.
Now now 1 slider slides change earlier than 2, what is wrong in my code ?
I want that slides will change in one time:
<script>
$(function(){
$("#show").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
$("#show2").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
});
</script>
I try .ready but slides also change in different time
Give them both a class, and target them at the same time.
<div class="sliders" id="show"></div>
<div class="sliders" id="show2"></div>
JS:
$(".sliders").slidesjs({ ... });

Categories