I am trying to create a carousel like effect on div
s such thta when i click on a but, the next div
displays and the previous one fadeOut
. Below is my code
var oCurImage = $(".webTut div.current");
var oNxtImage = $(oCurImage).next();
var leftBtn = $('.tutLeft'), rightBtn = $('.tutRight');
$(rightBtn).click(function() {
oCurImage.fadeOut().removeClass('current');
oNxtImage.fadeIn().addClass('current').animate({opacity: 1.0}, 1000);
if (oNxtImage.length == 0) {
oNxtImage = $(".webTut div:first-child");
}
});
HTML
<div class="webTut">
<span class="tutBtn"><a class="tutLeft"><i class="fa fa-angle-left"></i></a><a class="tutRight"><i class="fa fa-angle-right"></i></a></span>
<div class="current">
<img src="images/egold.png">
<h1>cname</h1>
<h3>Welcome to nigeriaeexport.com</h3>
<p>Your one stop platform for everything export</p>
</div>
<div style="background: #fff;"></div>
<div style="background: #dd0d0d;"></div>
</div>
css
.webTut div {
width: 60%;
height: 80%;
background: #28bc88;
margin: 6.5% auto 0 auto;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.5);
text-align: center;
display: none;
/*854 x 720*/
}
.webTut div.current {
display: block;
z-index: 1;
}
The thing is i have used this same method with setInterval
for an image slider but here when i click on the button the first time, it shows the next div (the white one) but when i click again, it doesn't change to the next div
(the red one #dd0d0d). What could be the issue and how do i fix. Thanks.
Once you click on right anchor tag you should change value of oCurImage
and oNxtImage
and for getting first div inside div with class .webTut
you should use $(".webTut div:first");
You can run below code snippet.
var oCurImage = $(".webTut div.current"); var oNxtImage = $(oCurImage).next(); var leftBtn = $('.tutLeft'); var rightBtn = $('.tutRight'); $(rightBtn).click(function() { oCurImage.fadeOut().removeClass('current'); if (oNxtImage.length == 0) { oNxtImage = $(".webTut div:first"); } oNxtImage.fadeIn().addClass('current').animate({opacity: 1.0}, 1000); oCurImage = $(".webTut div.current"); oNxtImage = $(oCurImage).next(); });
.webTut div { width: 60%; height: 80%; background: #28bc88; margin: 6.5% auto 0 auto; border-radius: 4px; box-shadow: 0 0 4px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 4px rgba(0,0,0,.5); text-align: center; display: none; /*854 x 720*/ } .webTut div.current { display: block; z-index: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="webTut"> <span class="tutBtn"><a class="tutLeft">left</a> <br/><br/><a class="tutRight">right</i></a></span> <div class="current"> <h1>cname</h1> <h3>Welcome to nigeriaeexport.com</h3> <p>Your one stop platform for everything export</p> </div> <div style="background: #fff;">First Div</div> <div style="background: #dd0d0d;">Second Div</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.