JQuery Carousel won't reset to start and place
I can't get the last slide to go back to the first slide. I also have a problem when clicking on the previous slide, the next slide goes below the current slide for a second. If anyone has any suggestions, it would be greatly appreciated. Unfortunately the site is not loaded, here is 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(600).removeClass('active-slide');
nextSlide.fadeIn(600).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 = $('.dot').last();
};
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);
.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,
.next {
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;
position: absolute;
top: 80;
left: 50%;
margin-left: -500px;
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-main">
<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>
source to share
You must change your code for the click handler prev
, after if
to:
nextDot.addClass('active-dot');
and
nextSlide.fadeIn(600).addClass('active-slide');
Also, CSS has classes next
and prev
, whereas in HTML you have next-arrow
and prev-arrow
. They must be the same. Hope this helps.
source to share
I managed to get the carousel, so now it is spinning. After using Firebug, I realized that the ".slide" classes must be contained in another div, the ".active-slide" class is added to the ".s-bar" and therefore does not show the first slide. For the layout task, I changed ".active-slide" to display: absolute, not block. Having two slides for a moment as both blocks were causing the problem.
source to share