Owl carousel responsive owl-dots working weird - javascript

My owl carousel has a dot-data, and I just want it have a dot-data from 0px to 1024px, and from 1025px there will be no more dot-data just a dot, so I write like this, and it's just work with a owl-nav, and about an owl-dots, I have to reload the page for it to work.Please help me, I would appreciate all the answers, thank you.
$(window).on('load', function() {
const next_icon = '<img src="./images/next-icon.svg">';
const prev_icon = '<img src="./images/prev-icon.svg">';
$('.owl-carousel').owlCarousel({
loop: true,
margin: 30,
items: 1,
dots: true,
responsiveClass: true,
navText: [
prev_icon,
next_icon
],
responsive: {
0: {
dotData: true,
dotsData: true,
nav: false,
},
1025: {
dotData: false,
dotsData: false,
nav: true,
}
}
});
})

First of all - there no such option as dotData. Only dotsData, if we talk about owl-carousel-2 version. And responsiveClass also.
About dotsData
in Owl docs (here: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html) you can see that the dotsData in List of responsive only on load so it works correctly - only if page will be reloaded.
So, you must to create another solution by jQuery. For ex.:
jQuery(window).resize(function() {
if (window.innerWidth > 1024) {
jQuery('.your-dot-item-class').removeAttr('data-dot');
} else {
jQuery('.your-dot-item-class').attr('data-dot', '<p>Some content</p>');
}
});

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

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

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

Image cycle loading out of place

When loading a page with the CarouFredSel image cycle it is always shifted a little to the right until I either go to the next image or reload the page, same issue happens after a hard refresh.
$( document ).ready(function() {
$(".photos").carouFredSel({
width: "100%",
height: "465px",
items: {
visible: 1,
width: "variable",
height: "465px"
},
scroll: {
fx: "none",
duration: 1
},
auto: 50000,
prev: {
button: ".prev",
key: "left"
},
next: {
button: ".next",
key: "right"
},
pagination: {
container: ".pagination",
keys: true
},
swipe: true,
mousewheel: true
})
});
http://coreytegeler.com/gl/music/
I've tried posting this several times before and no one has given me any info yet and it's really holding me up, and help would be so greatly appreciated.
I don't think it's a problem with your configuration of CarouFredSel. I made a jsfiddle of your code and it works fine.(http://jsfiddle.net/YdAee/). I'm going to guess it has something to do with your masonry code, but that's just a guess because that is throwing an error. Look at this code:
///////MASONRY/////
if (randomComplete == true) {
$('#boxes').masonry({
itemSelector: '.box'
});
}
randomComplete is defined out of scope.

Categories