SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Carousel Buttons

    Hi Im working on a quick site - bought a template and have finished editing apart from one issue.
    Theres an image carousel (i think its CSS driven) and id like to turn off / make inactive the next and back buttons when there is no next & back. Eg: The back button shouldnt be active when the page first loads as there is no back to go back to.
    Any ideas how i can do this?

    This is the exact page im using: http://www.templatemonster.com/demo/44532.html

    CSS:

    Code:
    #carousel{position:relative;}
    	#carousel .es-carousel{width:100%; overflow:hidden;}
    		#carousel li{float:left; position:relative;}
    #carousel .es-nav-prev, #carousel .es-nav-next{
    	display:block !important;
    	top:50%;
    	text-indent: -100%;
    	font-size:0;
    	line-height:0;
    	white-space: nowrap;
    	display:block;
    	width:23px;
    	height:39px;
    	cursor:pointer;
    	position:absolute;
    	overflow:hidden;
    	cursor:pointer;
    	z-index:5;
    }
    #carousel .es-nav-prev{background:url(../images/prev.png) no-repeat center top; left:-43px;}
    #carousel .es-nav-next{background:url(../images/next.png) no-repeat center top; right:-43px;}
    	#carousel .es-nav-prev:hover, #carousel .es-nav-next:hover{background-position:0 -53px;}
    HTML:
    Code:
        <section id="content">
        <div class="content-box1">
          <p>Each unit boasts two spacious queen-sized bedrooms with televisions and built in robes. Electric blankets have been fitted and additional luxurious blankets are located in the robes.
                </p></div>
        	<div class="container_12">
                	<article class="grid_12">
                        <div class="car-wrapper">
                          <div id="carousel" class="es-carousel-wrapper">
                            <div class="es-carousel">
                              <ul>
                                <li><img src="images/bedroom1.jpg" alt=""></a></li>
                                <li><img src="images/bedroom2.jpg" alt=""></a></li>
                                <li><img src="images/bedroom3.jpg" alt=""></a></li>
                                <li><img src="images/bedroom4.jpg" alt=""></a></li>
                              </ul>
                            </div>
                          </div>
                        </div>  
                    </article>
                <div class="clear"></div>
            </div>
        </section>
    Thank you kindly!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by maree_DW View Post
    This is the exact page im using: http://www.templatemonster.com/demo/44532.html
    I don't see any next and back buttons on that page.

    EDIT: O, I see, you have to click on an image first. Helpful info. But I'd say leave the buttons alone, as they allow you to view the other images once you've opened one. I clcked on a middle image first, so it was convelient to be able to go left or right. Even on the first image, it's fine if the left arrow doesn't work, as it makes it clear that it's the first image in the gallery.

    What really bothers me about that gallery is that there's no indication you can click on those iages to view larger versions.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, sorry the link didnt copy across properly, If you navigate to the 'our portfolio' page.. thats the carousel im talking about. Sorry!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Ah, OK, thanks for the clarification.

    Well, this sort of thing ultimately is controlled by JS. However, you can hide the arrows by default and then let JS show them where they apply. All you have to do is remove this line in the CSS (carousell.css, line 1):

    Code:
    #carousel .es-nav-prev, #carousel .es-nav-next {
    display: block!important;
    top: 50%;
    text-indent: -100%;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    display: block;
    width: 23px;
    height: 39px;
    cursor: pointer;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    z-index: 5;
    }
    However, what you haven't thought of is what will happen at the end of the slideshow. You'll end up with a left arrow < without a forward arrow > which looks a bit odd.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect - thankyou so much ralph.m!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •