Responsive Carousel Like FlexSlider

[vwoohu]

I tried using the code from full.html and tried to make the carousel work within the 960 grid so that it's responsive to different screen sizes. Without the 960 grid system, it works well when all the containers' widths and heights are 100% but once you put it in a fix container around the carousel container, the height and width gets set into the carousel container. It looks like Cycle cascades up the DOM tree and get the height/width.

http://jquery.malsup.com/cycle/full.html

Any suggestion is appreciated.

[vwoohu]

I actually got it to work with this code with a wrapper container with a width of 960px around the carousel, but the height has to be fixed and not 100%.

$(document).ready(function() { $('.slideshow').cycle({ fx: 'scrollVert', slideResize: false, speed: 1000, timeout: 1000, fit:1, width:'100%', height:'400' }); });

If I entered 100% for the height it doesn't work. Instead it sets a static height/width for the carousel. The goal is to get the height to be flexible too! Hope someone can help out!

Here's the rest of the code:

.container { position: relative; height:auto; margin: 0 auto; }"

then some media query code to change the size of the windows...

@media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } .columns, .column { margin: 0; }

etc....

div class="container"

    div class="slideshow"
             <image 1 width=100% height=100%/>

             <image 2 width=100% height=100%/>

             <image 3  width=100% height=100%/>   

/div /div

[malsup]

Some other pages to look at for ideas:

http://jquery.malsup.com/cycle/fluid.html http://jquery.malsup.com/cycle/resp.html

[vwoohu]

Do you know if there are a list of these examples somewhere? It's not on the website.

Thanks for these examples but these two didn't solve my problem.

The fluid example has % for width;

The responsive example has fixed height... and doesn't work with other animation except fade and custom...

I used the code in the resp example and added a custom animation.

I'm getting very close. I will need to resize the parent container's height with Jquery and see if that fixes the problem.

V

On Thu, May 3, 2012 at 10:58 PM, Mike Alsup < reply@reply.github.com

wrote:

Some other pages to look at for ideas:

http://jquery.malsup.com/cycle/fluid.html http://jquery.malsup.com/cycle/resp.html

---

Reply to this email directly or view it on GitHub: https://github.com/malsup/cycle/issues/113#issuecomment-5503386

Peace,

Vincent (Guang) Hu The DC Health Coach, HHC, AADP Transformative Health and Nutrition Counseling Uniquely Designed for Busy Professionals

Phone: 301-793-4264 Fax: 270-512-0102

Meditation, Kundalini Yoga and Holistic Nutrition Certified Holistic Health Counselor, Kundalini Yoga Instructor www.dchealthcoach.com

[vwoohu]

http://vghmedia.com/clients/cycle/index_final.html Here, I got it to work within a parent container. I just changed the height of the parent container in the media query.

Works like a charm! Thanks again for the plugin.

V

[malsup]

Nice!

[malsup]

FYI: http://jquery.malsup.com/cycle2/demo/carousel.php