function buildCarousel(visibleSlides) {
$('.slideshow').cycle({
fx: 'carousel',
speed: 600,
slides: 'li',
carouselVisible: visibleSlides,
carouselFluid: true,
swipe:true,
swipefx:'scrollHorz',
next: '#next4',
prev: '#prev4',
pager: '#gallery-chooser ul',
});
$('.slideshow li img').css('opacity','1');
}
function initCycle() {
var width = $(document).width();
var visibleSlides = 4;
if ( width < 400 ) {visibleSlides = 1}
else if(width < 700) {visibleSlides = 2}
else if(width < 1024) {visibleSlides = 3}
else if(width < 1400) {visibleSlides = 4}
else {visibleSlides = 5};
buildCarousel(visibleSlides);
}
function reinit_cycle() {
var width = $(window).width();
var destroyCarousel = function() {
$('.slideshow').cycle('destroy');
}
if (width < 400) {
destroyCarousel(); // call the function
reinitCycle(1);
} else if (width > 400 && width < 700) {
destroyCarousel();
reinitCycle(2);
} else if (width > 700 && width < 1024) {
destroyCarousel();
reinitCycle(3);
} else if (width > 1024 && width < 1400) {
destroyCarousel();
reinitCycle(4);
} else {
destroyCarousel();
reinitCycle(5);
}
}
function reinitCycle(visibleSlides) {
buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
clearTimeout(reinitTimer);
reinitTimer = setTimeout(reinit_cycle, 100);
});
$(document).ready(function(){
initCycle();
});