Treehouse: Grow your CSS skills. Land your dream job.

Slideshow/Carousel mark up (responsive)

  • # November 8, 2012 at 3:41 am

    Hi there,

    I’m busy working on a site which has a slideshow with some captions on the homepage. While it isn’t a problem for me to create some mark up that will make the slideshow function correctly. I’m having a bit of trouble making the mark up semantic. This is a ‘mock up’ of how the slideshow will look on a desktop device:


    And this is the mark up that I feel would be ‘semantic’, with all the related title, image and text grouped together.

    Problem is, with this mark up I really can’t seem to make it work for a desktop or tablet version. With all the images displaying above the row of headings, which acts as navigation between the slides and the caption text.

    Grouping all the images together, then all the headings, then the text would work & get the slideshow looking right – but when scaled down it will make no sense?

    I could position all the images absolutely at the top (on top of each other) but then I’d have to position all the headings absolutely below – and figure out the ‘top’ value when the page scales – and again with the paragraph. All of which seems a bit messy and I’m not sure its even possible?

    It’d be good to get peoples thoughts on this, I look forward to hearing your thoughts & solutions!

    Thanks in advance,

    # November 8, 2012 at 3:49 am

    It’s a good thing you really care that much about semantic html, but honestly, here I would just put all the images first, then all the heading and in the end all the paragraphs..

    I’m interested in this topic and hope someone else will share their thoughts

    # November 8, 2012 at 11:59 am

    Hi & Thanks!

    Yeah its a tricky one, I think thats what I’m going to have to end up doing because of time. Its an interesting topic though so it would be good if people would join the discussion.

    What to do with slideshows when scaled down (other than just hiding them!) seems to be one of the trickiest issues I’ve come across, when scaled down the semantic’s become even more important I think, so make it readable but with things like this, its hard to know whats right!

    Thanks again,

    # November 9, 2012 at 4:47 am

    Hi Grimski,
    as I see it you need to change your approach to the semantic of those carousel.

    From what I see from the screenshot your headings are also a navigation list. You have not a list of boxes, but a true carousel, full of information accessible only by clicking the single titles.

    So, if you would respect a semantic approach, I suggest something like that:

    Then you can use CSS to hide the headings in the DIV class=”carousel-box” and stylize the OL id=”carousel-nav” (I choose an ordred list because of the numbers before the titles, but you can also choose an UL, if you prefer) for the carousel with a little bit of margins and position: absolute.

    If you are using HTML5 you can also replace the ol with a NAV. Same thing for the divs below.


    EDIT: I’ve updated the snippet with a little bit of CSS (just some basic style for the positioning of the elements). With a little bit of JS to set the visibility of the elements and to trigger the “active” status on selected links you should be fine :-)

    # November 9, 2012 at 9:48 am

    Hi Claudio,

    Thanks for your reply – that seems like a good solution for the mark up to me. I can’t see your CSS/Javascript on jsFiddle though?

    That was my next question too, about how the elements are positioned & how they might react when scaled?

    Thanks again,

    # November 12, 2012 at 9:32 am

    Anyone have any ideas on the CSS for this when scaling?

    I guess it’d all have to be absolute, not sure how to set the ‘top’ values etc when it scales, might it need some javascript to work out the values and set them?

    # November 12, 2012 at 9:38 am

    here’s the link to the complete version of Claudio

    # November 12, 2012 at 1:26 pm

    Thanks a lot, couldn’t see that for some reason the other day!

    Would javascript be necessary to position the top value of the links and text? As if the image scaled when the browser is resized, its height would change?

    Guess another way would be to always keep the height the same and the image just crops – but I think the height changing would be better?

    Thanks again,

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

You must be logged in to reply to this topic.