As a newbie to caroufredsel, I am trying to override the default wrapper name in for the carousels using a dynamic count.
However, the carousel rendered only has the default caroufresel_wrapper. Whereas my javascript is trying to get caroufredsel_wrapper0, caroufredsel_wrapper1, caroufredsel_wrapper2 for 3 carousels on the same page. I find it amusing that it will not get overridden.
My code for carousel creation is here
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
wrapper: { element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'},
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}
});
});
}
The documentation does not make it explicit, but the carouFredSel accepts two parameters: (options, configs). The wrapper makes it part of the configs parameter. Try this:
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}},
{
wrapper: {
element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'
});
Related
i have following code:
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
callbacks: true
});
}
which works fine - as expected. But when i try to do something like this:
var onResize = function() {
$(".owl-carousel").owlCarousel({
autoplay: false,
center: true,
loop: true,
nav: false,
dots: false,
items: 1,
stagePadding: 140,
});
}
$(window).resize(function() {
onResize();
});
then it just ignores the options. Dots are visible etc. Everything looks like it is with default options. Can somebody please help me with this?
Thanks
The resize function isn’t better! Besides, it makes no difference to your load to use media queries to show or hide. You should try it. Keep it simple.
I would like a little help here. I have two jquery sliders but i would like them to run at the same time. Is it possible?
Here is my code :
$(function () {
$('#slider').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
$('#slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
with the above code the second start after some milliseconds. I would appreciate if someone can fix it.
As those options are identical, I'd think
$("#slider, #slider_small").camera({
/* ...options here... */
});
would do it. Properly-designed jQuery plugins understand they're working on sets of elements.
$(function () {
$('#slider, #slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
most standard JQuery plugins knows to accepts an array of elements, and with , in the selector you can select multiple elements.
p.s. the plugin most probably will use for-each so what's the real problem here? if its just jumping then maybe your solution is css?
I use a owl carousel and I want to detect the first and last elements when active. I'm trying to trigger a function with the afterAction attribute but I cannot make it happen.
This is the initialiser:
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
},
afterAction : afterAction
});
function afterAction(){
console.log("owl after action");
}
For the first and last "elements" that are visible in the carousel:
In the afterAction function this.visibleItems returns an array of the visible items displayed in the carousel. The first visible item will always be at array position 0 and the last will be the length - 1.
function afterAction() {
var first = this.visibleItems[0];
var last = this.visibleItems[this.visibleItems.length - 1];
console.log(first, last);
console.log($('.owl-item')[first], $('.owl-item')[last]);
}
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
},
afterAction : afterAction
});
You can access the elements inside the carousel (I'm assuming you're referring to the panels) like this $('#carousel .owl-item:first) and $('#carousel .owl-item:last). To create the carousel and trigger a function only after the carousel is built try the method below.
var exampleApp = {
createCarousel : function(options) {
$('#carousel').owlCarousel({
slideBy: 4,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 4,
nav: true,
loop: false
}
}
});
this.afterwards(options.passedStr);
},
afterWards : function( testStr ){ // passedStr becomes testStr here
console.log('afterwards method ',testStr );
},
init : function (options) {
this.createCarousel(options);
}
}
exampleApp.init({"passedStr":"singleton pattern"});
This is a JavaScript Singleton pattern.
I have inherited a web page that has a slide show on it and I can't figure out how to change the width of the <article> containing the slide show. I think it is getting size via JavaScript, but I have searched and can't figure out where.
If you view source on the page you will not see a width in the article tag, but if you use firebug to look at the styles you will see:
element.style {
width: 565px;
}
I've posted a sample version here: http://208.112.58.198/help/index_new.htm.
Your element's CSS width is being applied by the jquery plugin.
/help/wp-content/themes/Cobalt3/cobalt/js/main68b3.js this file line number #339 has the following code.
$('#part-slideshow').carouFredSel({
height: 300,
width: '100%',
circular: true,
items: {
visible: 1,
height: 300,
},
scroll: {
items: 1,
fx: "crossfade",
duration: 1000,
easing: "swing"
},
auto: {
timeoutDuration: 5000,
delay: 5000,
pauseOnHover: true
},
pagination: '#pagination',
swipe: {
onTouch: true,
onMouse: true
},
responsive: true
});
The plugin binds a resize event function to the carousel elements, which sets the element width responsive to the screen size because responsive: true option is added in the call.
I have a carousel but somehow the last thumb doesn't work, you can double click it and shows wrong large image.. I really can't find the issue :(
Here it works with the last thumb: CAROUSEL
Here it doesn't: FIDDLE
The script:
$(function() {
$('#carousel').carouFredSel({
responsive: false,
circular: false,
auto: false,
items: {
visible: 2,
width: 1000,
height: '475'
},
scroll: {
fx: 'crossfade'
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 4
},
width: 254,
height: 112
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
$('#carousel').carouFredSel({ needed to be
visible: 1 and NOT visible: 2