Cycle rotator stopped working once i added text

hello all. started experimenting w/cycle.
it was working but once i added the text & grouped image & text w/in an item div it quit.
created a code pen.
http://codepen.io/pdxSherpa/pen/fluCk
would especially love some advice on how to tweak this so rather than having the image on top of each other they are next to each other w/the slide rbuttons on the far end sides to move them along?
thank you
D

There’s no .rotator element in your HTML (sloppy copy/paste?), and you haven’t included the jQuery library in that Pen.

sorry my brain was a bit fried when i posted it last night.
the jquery was in on my laptop version & it did work. just went back to it now & saw addy typos.
fixed them but still not quite there

i do have this two links as well to jqery & cycle2

<script type="text/javasrcipt" src="js/jquery.cycle2.js"></script>

& it was working before i added the text.
thx
D

The cycle library is missing too.

Is that value for fx correct?

If you are using this cycle plugin then the value should be:
`fx:‘scrollLeft’,’

ha…at this point i wish i had never posted this one. Apologies :frowning: . should have written and planned the post better. wish i could delete this.
however…i’ll take some advice on carousels in general.
want to create a responsive page w/one carousel that is horizontal for wider screens, but it falls back to non carousel series of stacked vertical divs when it is seen in smaller screens.

I was thinking that the best way to approach this would be to have a .js that appends classes for the carousel when the screen re sizes?

thx
D

Wouldn’t it be better to just find a decent responsive slider? I don’t think a series of stacked images on a mobile will go down well especially with screen space at a premium.

the original & existing page has two sliders (and 99.9% sure the owner doesn’t want changes to that) a horizontal scrolling one at the bottom, where you select the product. and right above it a second div displaying the product selected w/a slider below it w/the three views of the same product and when you click on the the product displays that view.
So i don’t want that in the mobile/tablet version due to the space available.
I would want a mini horizonatal scroll bar at the top & when you click on it it would take you down the page to the proudct, w/no other sliders or possibly an automatic one for the product.
so not sure if the best course of action is to have a js. add/remove classes to enable & disable the diff sliders according to screen size. use css to apply diff stylesheet or what.
Thx
D

This may be of interest.

Thank you, that does look pretty interesting. will be spending some time on it.
D

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.