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

Carousel Change first shown item

  • # August 30, 2013 at 9:47 am

    Hi guys,

    i am using this carousel

    http://coolcarousels.frebsite.nl/c/35/

    on my site. everything works fine.

    What I would like to change, is the first item shown when you first load the website.
    As you can see on the site, the first item is centered, and the carousel starts to the right. I would like the 2nd item to be the first shown, so when i load the page it should look like this

    ITEM 1 grey | CENTERED ITEM 2 | ITEM 3 grey

    I dont want to overload this post, you can check the code on the example page (just scroll down a bit and click the […] button). I didnt change anything in the code except colors.
    Hope you get what i mean :D

    greets
    chumii

    # August 30, 2013 at 1:45 pm

    you have to remove from your html:

    <div class="empty"></div>
    

    and change in js code:

    circular: true,
    
    # August 30, 2013 at 3:11 pm

    Wow, easy as this :)

    working like a charm, thank you very much

    # August 30, 2013 at 6:40 pm

    Sry for multipost, cant edit my previous one, but i got another tiny bit i would like to change with that carousel, maybe you can help me too:

    i want the images to be a link to another page (using it as a news-overview kind of thing), but if i do

    <div style="background-color: #cec;">
    <a href="example.html"><img src="img/bugs.jpg" width="554" height="313" /></a>
    <img src="img/bugs-grey.jpg" width="554" height="313" />
    <span>A Bug's Life</span>
    </div>

    nothing happens. it still has the tags in sourcecode, but the image itself is not clickable…

    # August 30, 2013 at 8:45 pm

    try this way:

     <a href="http:/facebook.com">
                    <div style="background-color: #cec;">
                        <img src="img/bugs.jpg" width="554" height="313" />
                        <img src="img/bugs-grey.jpg" width="554" height="313" />
                        <span>A Bug's Life</span>
                    </div>
        </a>
    

    But I don’t know about validation :)

    # August 30, 2013 at 9:06 pm

    Hm, didn’t work that way, messed up css , but you got me into the right direction.

    it’s

                <div style="background-color: #cec;">
                     <a href="http:/facebook.com">
                    <img src="img/bugs.jpg" width="554" height="313" />
                    <img src="img/bugs-grey.jpg" width="554" height="313" />    </a>
                    <span>A Bug's Life</span>
                </div>
    

    Well, the grey preview will be a link too, but i can live with that. Thanks again for your help, getting closer and closer to what i want :D

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

You must be logged in to reply to this topic.