jQuery Cycle 2 carousel: Responsive, show images based on viewport - javascript

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.

Related

called a jQuery function only over a specific width of window

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}

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

Lof JSliderNews jQuery - how to pause on hover?

jQuery(function($) {
var buttons = {
previous: jQuery('#lofslidecontent45 .lof-previous'),
next: jQuery('#lofslidecontent45 .lof-next')
};
window.setTimeout(function(){
$obj = jQuery('#lofslidecontent45').lofJSidernews({
interval: 4000,
direction: 'opacitys',
easing: 'easeInOutExpo',
duration: 1200,
auto: true,
maxItemDisplay: 3,
navPosition: 'horizontal', // horizontal
navigatorHeight: 40,
navigatorWidth: 70,
mainWidth: 1000,
buttons: buttons,
isPreloaded:false
});
},500);
});
How to configure pause on hover?
is there any reference for this slider?
or is there any option like hover: stop?
there is no such config like hover: "stop".
But if you look in the actual .js file, you will find
$( obj ).hover(function(){
self.stop();
$buttonControl.addClass("action-start").removeClass("action-stop").addClass("hover-stop");
}, function(){
if( $buttonControl.hasClass("hover-stop") ){
if( self.settings.auto ){
$buttonControl.removeClass("action-start").removeClass("hover-stop").addClass("action-stop");
self.play( self.settings.interval,'next', true );
}
}
} );
That means, hover stop functionality is default there.

Pause event in carouFredsel

I'm having trouble with a carousel.
I want to add a pause or a stop event to a carousel.
I already have built a slider, on the left side you have a navigation page for the sliders.
The slider starts automatically, I want it to stop if I choose a slide manually
Here's my code:
Thanks for any hints.
jQuery(this).parent().find('.navigation>ul>li').eq(0).addClass('active').end().each(function(){
jQuery(this).on('click', function(){
jQuery(this).parents('.csc-slider').find('.pager>a').eq(jQuery(this).index()).trigger('click');
return false;
});
});
var swidth = jQuery(this).width();
jQuery(this).find('img')
.width(swidth +'px !important')
.eq(0)
.imagesLoaded()
.done(function($images){
jQuery($images).parents('.slideshow')
.find('.item')
.css({display:'block', float:'left'})
.end()
.carouFredSel({
width: "100%",
height: "variable",
items: {
visible: 1,
height: "auto"
},
scroll: {
fx : "crossfade",
duration : 5000,
onAfter:function(data) {
var p = jQuery(this).parents('.csc-slider');
var i = p.find('.pager>a.selected').index();
p.find('li.active').removeClass('active');
p.find('.navigation>ul>li').eq(i).addClass('active');
}},
auto: {
pauseOnHover: "resume",
pauseOnEvent: true,
timeoutDuration: 5000,
},
prev: {
button: jQuery($images).parents('.csc-slider').find('.prev'),
},
next: {
button: jQuery($images).parents('.csc-slider').find('.next'),
},
pagination: jQuery($images).parents('.csc-slider').find('.pager'),
});
You can add a click event to navigation buttons to stop the auto scrolling:
$(".slider-pages .prev, .slider-pages .next, .slider-nav a").click(function(){
carouFredselObject.trigger("configuration", {auto: false});
});

Merging two "(document).ready(function()"s

I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?
You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.

Categories