Wordpress auto width carousel
- Started
- Last post
- 4 Responses
- monNom1
quick solution: javascript
all images go in an absolutely positions container like
[ img ][img[ img ][img[ - img - ][img[ img ][img][ - img - ][img]
when the page loads, use javascript to grab the width of each image. stick those results in an array.
now, when you click the image button, you set the positioning of your container to half the screen width, minus (half the index image width plus all the widths of the previous images combined).
psuedo-code:
containter_el = getElementReference();
screen_w = getScreenWidth();
img_w = getImageWidthsArray();function gotoImageNum(index){
offset = (screen_w/2) - ((img_w[index]/2) + getSumOfArray(index));
container_el.style.left = offset;
}function getSumOfArray(index){
var out = 0, i = 0;
while(i<index){
out += img_w[i];
i++
}
return out;}
easy!
- monNom you are an "Array" of sunshine.utopian
- thanks for this - yes I have access to Slick / Owl jQuery plugins which do exactly what I need - but I was looking for a Wordpress plugin that does it...fadein11
- No budget to integrate a jQuery plugin into Wordpress - or may be - but I would rather not do it if there is an off the shelf solution.fadein11
- drake-von-drake-1
Couldn't you just use JS?
http://www.owlcarousel.owlgraphi…
or maybe https://wordpress.org/plugins/fo…
- yes - read my post.fadein11
- thanks but I have been battling with Owl for a while now - it doesn't work with variable width images in the plugins and Slick is better if I have to implementfadein11
- it myself. Just need a quicker solution.fadein11
- OKdrake-von-drake
- _niko0
I tend to use this one, it's pretty powerful