Responsive Small Carousel

HTML & CSS
1

Hi I have a small carousel on this
PAGE that I am trying to make
it resposive and scale down the image.

I am using:

#carousel img {
    display: block;
    float: left;
    border: 1px solid #c2c2c2;
    max-width: 100%; 
    height: auto;
    
}

but its not working.
I believe it has to do with its parent elements.

2

It’s better just to use a gallery script tht has responsiveness baked in. There are lots around these days. Examples include bxslider, slick, flickety, owl, responsive slides and many more.

1 Like
3

ok ill try them.
Is my carousel to complicated to modify responsively? :grin:

4

I’m sure it can be done, but I’ve found it to be too much trouble in the past. Part of the problem is that JS is affecting the CSS, so it’s not just a matter of editing your styles to make it more responsive. You basically have to mess with the JS, which can end up taking longer than just getting a ready-made script.

1 Like
5

I am using Flickity Do you know if I can put a auto loop on the slider?
I cant find one on their website or I may have overlooked it

6

Why not use slick slider? It’s probably the best slider, and well supported. kenwheeler.github.io/slick/

7

I want to use the “Slider Syncing” one but cant find the HTML for that
in the downloads…

8

They mention autoPlay in their options: http://flickity.metafizzy.co/options.html#autoplay

See if that helps.

1 Like
9

ok ill see thanks

10

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