carouFredsel Responsive carousel with items:variable - javascript

I am trying to make a carouFredsel responsive carousel that should show a variable amount of elements depending on how many fit in the width. The problem I have is that whenever I set responsive to true, the elements get a 100% with and this is not what I need.
I managed to create a fiddle where I show:
1) a carousel with a 100% width that shows as many elements as they fit and when the browser window gets resized, more or less elements are shown
2) an item image that gets resized according to the size of the screen
I would like to combine 1 and 2 and have a carousel that behaves like 1 with elements that behave like 2.
It is not possible for me to know in advance how many items would fit (not even in percentage) since for each carousel the elements may have any width (though all of them have the same).
Is this possible ? What am I missing ?
http://jsfiddle.net/379zW/2/
var options = {
circular: true,
infinite: false,
auto : false,
responsive: false,
prev : {
button : "#p",
key : "left"
},
next : {
button : "#n",
key : "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);

This might solve your problem:
var options = {
circular: true,
infinite: false,
auto: false,
items: {
width: '100%',
height: 'variable',
visible: {
min: 1,
max: 999
}
},
responsive: false,
prev: {
button: "#p",
key: "left"
},
next: {
button: "#n",
key: "right"
},
width: '100%',
};
$("#carousel_123").carouFredSel(options);

Related

Owl Carousel 2 width issue on browser scrollbar

I'm using Owl Carousel 2 with Bootstrap framework. There are 12 items that I have in the Carousel and I need to display three on the 1280-pixel wide resolution.
The owl-stage width is calculated as the total width of the Carousel (on desktop-1280px) which comes out to be as 3772px when there is no scroll bar on page.
Now if I open developer tools and then close it back again (i.e. bring a scroll bar onto the page and then remove) the width of class owl-stage becomes 3840px.
Due to this, on page load since the width is 3772 some content of the fourth slide is visible (probably just 5–6 pixels) but it disturbs the layout.
autoWidth:true is not applied.
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
nav: true,
onInitialized: fixOwl,
onRefreshed: fixOwl,
navText: [
"<span class='left-arrow-purple-bar'></span>",
"<span class='right-arrow-purple-bar'></span>"
],
responsiveClass: true,
responsive: {
320: {
items: 1.2,
nav: true
},
520: {
items: 1.45,
nav: true
},
720: {
items: 2.4,
nav: false
},
960: {
items: 3,
nav: true,
loop: false,
slideBy: 3,
margin: 0
}
}
});

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

CarouFredSel sliding issue

I have set up a caroufredsel, and have items inside of it. But when I click on my next and previous buttons, the first time it appears to shift 1 item, every click after that it shifts the entire width of the content and back to the beginning.
I have set my scroll items to 3. Does it have something to do with the width of the container?
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : 'auto',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});
It also seems that on slide, the height of the carousel changes for some reason. maybe this is related
I would also refactor your selector to be simpler as you are using IDs and there should only be one per page anyway:
Instead of:
jQuery('#tab-1').find('#carousel').carouFredSel();
Use this:
jQuery('#carousel').carouFredSel();
Switching the caroufredsel width to 100% did the trick.
jQuery('#tab-1').find('#carousel').carouFredSel({
responsive : true,
circular: false,
align: "center",
height : 'auto',
width : '100%',
auto : false,
prev : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerLeft');
}
},
next : {
button : function() {
return jQuery('#tab-1').find('.carousel-pagerRight');
}
},
scroll : {
items : 3,
fx : "fade"
},
items : {
height : 'auto',
width: 'auto'
},
swipe: {
onMouse: true,
onTouch: true
}
});

jQuery CarouFredSel plugin triggering a configuration

i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).
And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I need immediately when mouse over, out at next,prev button and set those configuration. I can't find issue.
My code:
$(".sponsors-slider-slide").carouFredSel({
scroll: {
items: 1,
duration: 2000,
queue: true,
timeoutDuration: 0,
easing: "linear",
pauseOnHover: "immediate-resume",
fx: "scroll"
},
responsive: false,
circular: true,
infinite: false,
swipe: {
onTouch: true,
onMouse: true
},
width: "variable",
height: "variable",
items: {
visible: 4,
minimum: 0,
width: "variable",
height: "variable"
},
align: false,
debug: false
});
and example of next button:
$("#sponsors-slider-next").on("mouseover mouseout", function(e){
if(e.type == "mouseover")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 1000, true]);
}
if(e.type == "mouseout")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 2500, true]);
}
return false;
});
The question is, how to set scroll.duration when mouseover immediately on next button, not when carousel is finish slide ?
Thanks in advice.
It has to finish the transition before it can change configurations. To finish the transition immediately, trigger the finish event.
$(".sponsors-slider-slide").trigger('finish');
Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.
BTW, it would be more efficient to chain multiple methods rather than repeat selectors:
$(".sponsors-slider-slide")
.trigger("finish")
.trigger("configuration", {
direction: "left",
scroll: {
duration: 1000
},
reInit: true //not sure that you need this
});

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