Grow your CSS skills. Land your dream job.

Image Slider suggestions

  • # December 15, 2012 at 2:56 pm

    Hello everyone, I am college student in need of some help on one of my projects. I’m looking for a good image slider (for my index page) that meets these requirements…

    100% page width
    fixed height
    some form of navigation on the bottom
    *also my images are about 900px in width. I’d like those to scale to full width with the browser/slider width.

    I’m good with html and css but haven’t learned javascript yet. Any suggestions, plugins, or ideas would be great. Thanks.

    # December 15, 2012 at 3:29 pm

    This is the one I found and liked but if I fix the height using css then my images become skewed.

    http://www.woothemes.com/flexslider/

    If there is a way to modify this to solve that issue or if there is just a better solution please let me know. Thanks again.

    # December 15, 2012 at 3:30 pm

    >100% page width fixed height some form of navigation on the bottom *also my images are about 900px in width. I’d like those to scale to full width with the browser/slider width.

    You’d have to be careful with something like that as a 900px image scaled up for wide monitors (say 1920px) probably wouldn’t look to good…

    …unless it’s very high quality and then you are going to have page loading issues.

    # December 15, 2012 at 3:50 pm

    Well I would like something like http://www.nike.com/us/en_us/ (only a slideshow)

    I could set a width on it but it really wouldn’t give me the look I’m going for. You’re right though. I don’t want to ruin the quality of the images.

    # December 15, 2012 at 4:44 pm

    I’m a big fan of [Royal Slider](http://codecanyon.net/item/royalslider-touchenabled-jquery-image-gallery/461126). It’s responsive, supports touch events and is very easy to use and customise IMO.

    # December 15, 2012 at 5:03 pm

    If you’ll have tablet & mobile users I suggest you not to use jquery for image slider.

    my suggestion: http://csscience.com/responsiveslidercss3/

    # December 15, 2012 at 11:33 pm

    I personally like [Foundation’s Orbit](http://foundation.zurb.com/docs/orbit.php “Foundation’s Orbit”). Really simple to install and use and it’s pretty flexible!

    # December 15, 2012 at 11:41 pm

    I know you said you haven’t learned Javascript yet, but I’ve gotten pretty fond of the AnythingSlider. It is very customizable. I can get it to work for just about anything by tweaking it. I really don’t know a ton of Javascript, and I managed to get it to work.

    [CSS-Tricks AnythingSlider](http://css-tricks.com/anythingslider-jquery-plugin/ “AnythingSlider”)

    # December 16, 2012 at 7:04 am

    Thanks everyone. Some really nice solutions there.

    I’m going to use the Foundation’s Orbit and adjust it to my needs. This is working great. Thanks again.

    # December 16, 2012 at 7:52 am

    Just came across this thread and noticed is closed, but couldn’t help to vent my little rant publicly about how I feel presenting images with sliders. It’s very annoying to me that I am being forced to click countless of times to view all the images whether I am interested in them all or not. Some of them go as far as not identifying which image is first or last such as Orbit example and countless others. I much more prefer images presented in thumbnail image gallery where I can see them all and the ones I find interesting I choose to click on and view larger version in lightbox. I don’t know if I am the only who feels that way. What do you think? Just because there’s something fancy and new to do things with all the time does not always translates to good UX at least to me.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".