I have a question.

I'm stuck on this super simple code, and for some reason I can't duplicate the code so that I can add multiple sliders onto one page.

It's probably because I'm super tired and my brain isn't working but I don't know.

Can someone help me by taking a look?


Carl Burkholder


#img-grp-wrap {
position: relative;
width: 648px;
height: 414px;

.img-wrap {
position: relative;
z-index: 500;

.img-wrap img {
position: absolute;
top: 0;
left: 0;
-moz-box-shadow: 1px 1px 4px #CCC;

.next, .prev {
position: absolute;
cursor: pointer;
top: 250px;

.next {
right: 0px;
z-index: 900;

.prev {
left: 0px;
z-index: 900;

$('.img-wrap img:gt(0)').hide();

$('.next').click(function() {
$('.img-wrap img:first-child').fadeOut().next().fadeIn().end().appendTo('.img-wrap');

$('.prev').click(function() {
$('.img-wrap img:first-child').fadeOut();
$('.img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
$('.img-wrap img:first-child').fadeIn();

<div id="img-grp-wrap">
<div class="img-wrap">
<img src="grey.jpg" />
<img src="house.jpg" />
<img src="ridge.jpg" />
<img src="http://annhowardesign.com/images/arrowright.jpg" class="next" alt="Next"/>
<img src="http://annhowardesign.com/images/arrowleft.jpg" class="prev" alt="Previous"/>
<script type="text/javascript" src="script.js"></script>