I can't seem to get the last slide to go back to the first slide. I also have a problem when clicking on previous slide the next slide goes below the current slide for a second. If anyone has any suggestions it would be much appreciated. Unfortunately don't have the site uploaded so here's the code:
var main = function() { $('.next-arrow').click (function() { var currentSlide = $('.active-slide'); var nextSlide = currentSlide.next(); var currentDot = $('.active-dot'); var nextDot = currentDot.next(); if(nextSlide.length == 0) { nextSlide = $('.slide').first(); nextDot = $('.dot').first(); }; currentDot.removeClass('active-dot'); nextDot.addClass('active-dot'); currentSlide.fadeOut(500).removeClass('active-slide'); nextSlide.fadeIn(500).addClass('active-slide'); }); $('.prev-arrow').click(function() { var currentSlide = $('.active-slide'); var prevSlide = currentSlide.prev(); var currentDot = $('.active-dot'); var prevDot = currentDot.prev(); if(prevSlide.length == 0) { nextSlide = $('.slide').last(); nextDot = $('.active-dot').last(); }; currentDot.removeClass('active-dot'); prevDot.addClass('active-dot'); currentSlide.fadeOut(500).removeClass('active-slide'); prevSlide.fadeIn(500).addClass('active-slide'); });
};
<div class="carousel"> <div class="slide active-slide"> <div class="pic"> <img src="pic1.png" width="1000" height="360"> <div class="carousel-text"> <h1>Welcome to the Shabby to Chic Workshop.</h1> </div> </div> </div> <div class="slide"> <div class="pic"> <img src="pic2.png" width="1000" height="360"> <div class="carousel-text"> <h1>We make custom furmiture.</h1> </div> </div> </div> <div class="slide"> <div class="pic"> <img src="pic3.png" width="1000" height="360"> <div class="carousel-text"> <h1>Come visit us today!</h1> </div> </div> </div> <div class="s-bar"> <a href="#" class="prev-arrow"><img src="la.png" width="20" height="40"></a> <ul class="s-dots"> <li class="dot active-dot"><img src="dot.png" width="10" height="40"></li> <li class="dot"><img src="dot.png" width="10" height="40"></li> <li class="dot"><img src="dot.png" width="10" height="40"></li> </ul> <a href="#" class="next-arrow"><img src="ra.png" width="20" height="40"></a> </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script type="text/javascript" src="main.js"></script>
.s-bar { text-align: center; position: relative; background-color: transparent;}.s-dots { list-style: none; display: inline-block; padding: 0; margin: 0;}.s-dots > li { list-style: none; display: inline;}.active-dot { opacity: 0.5;}.prev-arrow, .next-arrow { width: 20px; height: 40px;}.carousel-text { font-family: 'Dancing Script', cursive; text-align: left; font-size: 1.8em; color: #ffffff; position: absolute; left: 30px; top: 30px;}.slide { display: none; background: transparent; position: absolute; top: 80; left: 50%; ; width: 1000px; height: 360px;}.active-slide { left: 0; display: block; position: relative; text-align: center; margin-left: auto; margin-right: auto; width: 1000px; height: 360px; z-index: -1;
}
