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.
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

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.

The cycle library is missing too.

Is that value for fx correct?

If you are using this cycle plugin then the value should be:

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?


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.

This may be of interest.

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

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