Banyak buat pemula yang tertarik untuk membuat slider, tapi masih binggung gamana sih buatnya. namun sebenarnya mudah bila sudah pernah mencoba, banyak development yang menawarkan slider ciptaanya jadi kita mudah untuk membuatnya dengan cara memanggil fungsinya saja.
namun sekarang kita mau mencoba membuat slider yang paling simple, dan gx butuh banyak script dan mungkin anda bisa mengembangkan nya sendiri menjadi lebih cangih.
pertama buat dulu container nya
<div style="max-width:640px;margin:0 auto;padding:0 50px;">
<div id="slider">
<div href="#" class="control_next">></div>
<div href="#" class="control_prev"><</div>
<ul>
<li>
<img src="http://3.bp.blogspot.com/-mJxz8cPM4K8/VAH2IZSgiSI/AAAAAAAAAoc/v1Ekaubc1n4/s1600/slider.png"/>
<div>
<h2>Chaos Solution Simple Slider</h2>
</div>
</li>
<li style="background: #aaa;">
<img src="http://3.bp.blogspot.com/-mJxz8cPM4K8/VAH2IZSgiSI/AAAAAAAAAoc/v1Ekaubc1n4/s1600/slider.png"/>
<div>
<h2>Slider Responsive Design</h2>
</div>
</li>
<li>
<img src="http://3.bp.blogspot.com/-mJxz8cPM4K8/VAH2IZSgiSI/AAAAAAAAAoc/v1Ekaubc1n4/s1600/slider.png"/>
<div>
<h2><a href="http://chaossolution.blogspot.com/2014/08/cara-membuat-simple-slidershow.html">Click here Go to Page</a></h2>
</div>
</li>
</ul>
</div>
</div>
lalu css nya agar tampilanya terbentuk
<style>
#slider {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
line-height: 0;
min-height:350px;
background:url(http://1.bp.blogspot.com/-bGtcAC1JigQ/U-t4OHqxJMI/AAAAAAAAAnc/rFIodvo1QyE/s1600/723.GIF) no-repeat center center;
font-family:"Tahoma";
}
#slider ul {
position: relative;
margin: 0;
line-height: 0;
padding: 0;
list-style: none;
display:none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
line-height: 0;
overflow: hidden;
}
.control_prev, .control_next {
background: none repeat scroll 0 0 #fff;
border-radius: 50%;
color: #31ace2;
cursor: pointer;
display: inline-block;
font-size: 20px;
height: 50px;
line-height: 50px;
margin: 0 10px;
opacity: 0;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 40%;
vertical-align: middle;
width: 50px;
z-index: 999;
transition: all 0.5s ease;
}
#slider:hover .control_prev,#slider:hover .control_next{
transition: all 0.5s ease;
opacity: 0.5;
}
#slider .control_prev:hover,#slider .control_next:hover {
opacity: 0.8;
transition: all 0.4s ease;
}
.control_prev {
}
.control_next {
right: 0;
}
#slider li div {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#slider li div h2{
background-color: rgba(255, 255, 255, 0.8);
line-height:40px;
font-weight: normal;
margin:0;
}
#slider li div p {
background-color: rgba(255, 255, 255, 0.8);
line-height:20px;
}
#slider:hover li div{
}
img{
max-width:100%;
}
</style>
lalu yang kita butuhkan selanjutnya yaitu jquery,
bisa download atau langsung apasang scriptnnya
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
yang terakhir script slidernya sendiri agar slidernya bisa digunakan
<script>
jQuery(document).ready(function ($) {
var slideHeight = 400;
$('#slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval(function () {
moveRight();
}, 5000);
});
$('#slider').width('100%');
var windowWidth = $(window).width();
var slideWidth = $('#slider').width();
var slideCount = $('#slider ul li').length;
var sliderUlWidth = slideCount * slideWidth;
$('#slider ul').css({ display: 'block' ,width: sliderUlWidth, marginLeft: - slideWidth,});
$('#slider ul li').width(slideWidth);
$('#slider ul li:last-child').prependTo('#slider ul');
if(slideHeight){
$('#slider').height(slideHeight).css("min-height","0");
$('#slider').css("background","none");
}
$(window).resize(function() {
var responsive = $('#slider').parent().width();
slideWidth = $('#slider').width();
if(slideWidth >= responsive){
slideWidth = responsive;
sliderUlWidth = slideCount * slideWidth;
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li').width(slideWidth);
}
});
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 1500, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 1500, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
$('.control_prev').click(function () {
moveLeft();
});
$('.control_next').click(function () {
moveRight();
});
});
</script>
Untuk Demonya kurang lebih seperti di homepage
