CSS Carousel Buttons

HTML & CSS
1

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:

#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:

    <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

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.

3

Oops, sorry the link didnt copy across properly, If you navigate to the ‘our portfolio’ page… thats the carousel im talking about. Sorry!

4

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):

#carousel .es-nav-prev, #carousel .es-nav-next {
[COLOR="#FF0000"]display: block!important;[/COLOR]
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.

5

Perfect - thankyou so much ralph.m!