I have a fully functioning image slider floated next to an unordered list of (3) DIVS. The first color of the slider corresponds with the first DIV. I'm trying to create an effect whereby when someone clicks the 'next' button on the slider, not only will the slider transition to the next color, but the DIV floated next to it will fade out, while the next DIV, which corresponds to the next color fades in.
I have the slider working, but I'm having difficulty figuring out how to allow each click of the button to also continuously loop through each DIV that corresponds to the colors of the slider.
I'm a relative beginner to jquery, but I can understand some of its more complex logic, I just can't figure out. I tried making the overflow of the DIV's hidden, and follow the same process of image slider, but with no luck.
I'd really appreciate any help. A Jsfiddle of what I have so far is below.
<ul id="slide_info">
<div id="info1">
<h2>Blue Header</h2>
<p>Description</p>
</div>
<div id="info2">
<h2>Red Header</h2>
<p>Description</p>
</div>
<div id="info3">
<h2>Yellow Header</h2>
<p>Description</p>
</div>
</ul>
Here it is. You can tweak the height and widths of divs according to your requirement.
jQuery(document).ready(function ($) {
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
var slideinfoWidth = $('.desc').width();
var slideinfoHeight = $('.desc').height();
var sliderUlinfoWidth = slideCount * slideWidth;
$('#slide_info').css({ width: slideinfoWidth, height: slideinfoHeight });
$('#info').css({ width: sliderUlinfoWidth});
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 300, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
$('#info').animate({
left: - slideinfoWidth
}, 300, function () {
$('.desc:first-child').appendTo('#info');
$('#info').css('left', '');
});
};
$('a.control_next').click(function () {
moveRight();
});
}); html, body {
margin: 0;
padding: 0;
}
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
float:right;
width: 50% !important;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 550px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 639.5px;
height: 550px;
text-align: center;
line-height: 300px;
}
a.control_next {
position: absolute;
top: 45%;
z-index: 999;
display: block;
padding: 50px 50px;
width: auto;
height: auto;
background-color: #fff;
color: #000;
text-decoration: none;
opacity: 0.5;
background-image:url(prev-icon.png);
background-repeat:no-repeat;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_next {
right: 0;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;}
#feat {
width: 100%;}
.feat_slides {
background-position: center top;
background-size: cover;
background-repeat: no-repeat;}
#feat_slide1 {
background: #006699;}
#feat_slide2 {
background: #CC0033;}
#feat_slide3 {
background:#FFFF99;}
#slide_info {
float: left;
width:50%;
padding-left: 0;}
.slide_info {
}
#info1, #info2, #info3 {
background-color: #fff;
width: 50%;
height: 500px;
padding-top: 215px;
padding-left: 30px;}
.desc{
float:left;
}
#slide_info{
overflow:hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="feat">
<ul id="slide_info"><div id="info">
<div class="desc" id="info1">
<h2>Blue Header</h2>
<p>Description</p>
</div>
<div class="desc" id="info2">
<h2>Red Header</h2>
<p>Description</p>
</div>
<div class="desc" id="info3">
<h2>Yellow Header</h2>
<p>Description</p>
</div>
</div>
</ul>
<div id="slider">
<a href="#" class="control_next" id="toggle_info">BUTTON</a>
<ul>
<li class="feat_slides" id="feat_slide1"></li>
<li class="feat_slides" id="feat_slide2"></li>
<li class="feat_slides" id="feat_slide3"></li>
</ul>
</div>
</div>