Hello!
I would like to modify the carousel slider so that instead of 3 images, it rotates only 1 image at a time. Does anybody know of any code changes that I can implement for that to work?
Thank you.
Hello!
I would like to modify the carousel slider so that instead of 3 images, it rotates only 1 image at a time. Does anybody know of any code changes that I can implement for that to work?
Thank you.
I think adding num = 1
to the parameters in the shortcode should do it.
Thanks for your reply. It’s not really what I’m looking for. “num = 1” stops the carousel altogether. What I’m trying to do is devote one image per single “slide”, while the slider continues rotating through 5-6 slides. Any ideas?
Ah! Now I think I see what you are after.
It’s a little tricky, especially when it comes to keeping mobile display working okay. But a very quick hack on the CSS file seemed to get closer. in views/public/css/jcarousel.responsive.css
, change the line under .jcarousel li
for width to something bigger, and make it important
width: 800px !important;
That got close to what I think you are looking for, but generally using !important
is sketchy, and not sure what it’d mean for truly responsive design (I fear bad things).
I’m hoping to find a better solution that actually works with the underlying jcarousel library it depends on.
An alternative approach might be instead of changing that CSS file, to go into views/public/javascripts/jcarousel.responsive.js
and comment out these lines:
/*
if (width >= 600) {
width = width / 3;
} else if (width >= 350) {
width = width / 2;
}
*/
My intuition is to trust that more, since it leaves more in the hands of the javascript itself.
Thank you again!! I tried both options, but something still seemed off and didn’t work out as hoped. However, I used your idea of changing the width portion of the JS file. I changed it in this way:
if (width >= 80000000) {
width = width / 3;
} else if (width >= 350) {
width = width / 1;
}
And it is displaying one image per slide! Hurrah! Thank you once again.