I use this code on my site. I want to load this code only in a specific width of window.
For example, in the less than 768 pixels, this script will no longer be called.
jQuery(document).ready(function() {
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
})
You can use jQuery's width function and then do something like this:
jQuery(document).ready(function() {
if (jQuery( window ).width() > 768) {
/// your code here
}
});
.width() Refernece
Try This
jQuery(document).ready(function() {
if ($(window).width() < 768){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}
})
}
})
if ($( window ).width() > 768){//ur code}
Related
I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93
$(document).ready(function() {
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function () {
$('body').css('overflow', 'hidden');
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
}
});
owl2.on('drag.owl.carousel', function (event) {
document.ontouchmove = function (e) {
e.preventDefault();
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I changed my code like below and it works correctly and I solved my problem.
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function (e) {
var current = e.item.index + 1;
var total = e.item.count;
if (current === total) {
$('body').css('overflow', 'auto');
}
else {
$('body').css('overflow', 'hidden');
}
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
},
});
owl2.on('drag.owl.carousel', function (e) {
var current = e.item.index + 1;
var total = e.item.count;
document.ontouchmove = function (e) {
if (current !== total) {
e.preventDefault();
}
else {
return true;
}
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
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
}
}
});
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
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);
I've created a slideshow using jQuery Cycle 2 and the Carousel plugin. So far so good, everything works as it should, it's even fluid. But I would like it to be responsive as well.
I found a script on the official Github by a user, but the thread is not active anymore. I tried to edit it myself, but without luck so far.
The problem is that script checks the viewport and based on the viewport shows a certain amount of slides. This works, when I refresh the page. However, when I resize the page manually, the script goes bezerk and I don't know why. The difference is made by carouselVisible: $ The problem is in initCycle(); (at least that is what I expect).
The JS is (complete Fiddle below):
// Responsive Slideshow
function initCycle() {
var width = $(window).width();
if (width < 768) {
$(".slideshow").cycle({
manualSpeed: 500,
timeout: 0,
slides: 'li',
next: '#next4',
prev: '#prev4',
pagerActiveClass: 'selected',
pagerTemplate: '',
fx: 'carousel',
carouselVisible: 2,
carouselOffset: 20,
carouselFluid: true
});
} else if (width > 768 && width < 980) {
$(".slideshow").cycle({
manualSpeed: 500,
timeout: 0,
slides: 'li',
next: '#next4',
prev: '#prev4',
pagerActiveClass: 'selected',
pagerTemplate: '',
fx: 'carousel',
carouselVisible: 3,
carouselOffset: 20,
carouselFluid: true
});
} else {
$(".slideshow").cycle({
manualSpeed: 500,
timeout: 0,
slides: 'li',
next: '#next4',
prev: '#prev4',
pagerActiveClass: 'selected',
pagerTemplate: '',
fx: 'carousel',
carouselVisible: 4,
carouselOffset: 20,
carouselFluid: true
});
}
}
initCycle();
function reinit_cycle() {
var width = $(window).width();
if (width < 768) {
$('.slideshow').cycle('destroy');
reinitCycle(2);
} else if (width > 768 && wWidth < 980) {
$('.slideshow').cycle('destroy');
reinitCycle(3);
} else {
$('.slideshow').cycle('destroy');
reinitCycle(4);
}
}
function reinitCycle(visibleSlides) {
$(".slideshow").cycle({
manualSpeed: 500,
timeout: 0,
slides: 'li',
next: '#next4',
prev: '#prev4',
pagerActiveClass: 'selected',
pagerTemplate: '',
fx: 'carousel',
carouselVisible: visibleSlides,
carouselFluid: true
});
}
var reinitTimer;
$(window).resize(function () {
clearTimeout(reinitTimer);
reinitTimer = setTimeout(reinit_cycle, 100);
});
The fiddle is here.