Jump to content

Carousel layout and returning to first slide

Recommended Posts

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>


<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;


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...