I'm currently working on a thumbnail slider project. My goal is to display 5 thumbnails at a time, and allow users to move to the next or previous set of thumbnails by clicking on the corresponding buttons. I attempted to modify an existing slider that moves one item at a time, but my limited knowledge of JavaScript hindered my progress. Although the original code was functional, my modifications caused it to malfunction.
Is there anyone who can assist me in resolving this issue? Here is a link to the jfiddle with my code: http://jsfiddle.net/aqcktp3q/5/
Below is the HTML source code:
<section class="image-menu">
<div id="project" style="width:1150px;height:150px;">
<a href="#" class="control_next" style="color:#aaa;">></a>
<a href="#" class="control_prev" style="color:#aaa;"><</a>
<ul>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 1</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 2</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 3</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 4</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 5</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 6</div></a>
</li>
</ul>
</div>
CSS:
.image-menu {
width:1160px;
text-align:center;
margin:0 auto;
position:relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.image-menu a {
color: black;
font-weight:bold;
}
.image-menu a:hover {
text-decoration:none;
color:#B22222;
}
.image-menu a img {
border: 3px solid #FFFFFF;
}
.image-menu a:hover img {
border: 3px solid #B22222;
}
.image-menu ul {
padding-left:40px;
}
#project {
position: relative;
overflow: hidden;
margin: 3px auto 0 auto;
border-radius: 4px;
}
#project ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#project ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 170px;
height: 150px;
background: #ccc;
text-align: center;
/*line-height: 170px;*/
}
#project ul li div {
width: 170px;
height: 20px;
line-height: 20px;
}
a.control_prev, a.control_next {
position: absolute;
top: 0%;
z-index: 999;
display: block;
padding: 9% 2%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
JS:
jQuery(document).ready(function ($) {
var slideCount = $('#project ul li').length;
var slideWidth = $('#project ul li').width();
var slideHeight = $('#project ul li').height();
var sliderUlWidth = slideWidth * slideCount;
$('#project').css({
width: sliderUlWidth,
height: slideHeight
});
$('#project ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#project ul li:last-child').prependTo('#project ul');
function moveLeft() {
$('#project ul').animate({
left: +slideWidth
}, 200, function () {
$('#project ul li:last-child').prependTo('#project ul');
$('#project ul').css('left', '');
});
};
function moveRight() {
$('#project ul').animate({
left: -slideWidth
}, 200, function () {
$('#project ul li:first-child').appendTo('#project ul');
$('#project ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});