HTML
-----
<html>
<head>
<meta charset="UTF-8">
<title>Slider Yapımı</title>
<link rel="stylesheet" href="stle.css">
</head>
<body>
<div class="slider-dis">
<div class="slider-resimler">
<img src="http://www.fillmurray.com/500/400" width="600" height="400" alt="">
<img src="http://www.fillmurray.com/600/400" width="600" height="400" alt="">
<img src="http://www.fillmurray.com/700/400" width="600" height="400" alt="">
<img src="http://www.fillmurray.com/600/400" width="600" height="400" alt="">
<img src="http://www.fillmurray.com/700/400" width="600" height="400" alt="">
</div>
</div>
<div class="butonlar">
<a href="#" class="geri"><</a>
<a href="#" class="ileri">></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>
JS
---
$(document).ready(function() {
var uzunluk = $(".slider-resimler img").length;
var hangiResim = 1;
var interval;
$(".ileri").click(function() {
$(".slider-resimler").stop().animate({"margin-left": "-=600px"}, 300);
hangiResim++;
if (hangiResim === uzunluk+1) {
$(".slider-resimler").stop().animate({"margin-left": "0px"}, 300);
hangiResim = 1;
}
});
$(".geri").click(function() {
$(".slider-resimler").stop().animate({"margin-left": "+=600px"}, 300);
hangiResim--;
if (hangiResim < 1) {
$(".slider-resimler").stop().animate({"margin-left": "0px"}, 300);
hangiResim = 1;
}
});
/*
function slideBasla(){
interval = setInterval(function(){
$(".slider-resimler").animate({"margin-left": "-=600px"}, 1000,function(){
hangiResim++;
if (hangiResim === uzunluk) {
$(".slider-resimler").stop().animate({"margin-left": "0px"}, 1500);
hangiResim = 1;
}
});
},2000);
}
function sliderDur(){
clearInterval(interval);
}
$(".slider-resimler").on("mouseenter",sliderDur).on("mouseleave",slideBasla);
slideBasla();
*/
});
CSS
---
*{
margin: 0;
padding: 0;
}
.slider-dis{
width: 600px;height: 400px;border: 1px solid red;
margin: 50px auto;
overflow: hidden;
}
.slider-resimler{
display: block;
width: 5000px;
height: 400px;
margin: 0;
padding: 0;
}
.slider-resimler img{
float: left;
width: 600px;
height: 400px;
}
.butonlar{
width: 250px;
height: 80px;
margin: -50px auto;
}
.butonlar a{
width: 120px;
height: 60px;
background: blue;
color: magenta;
text-decoration: none;
display: inline-block;
text-align: center;
line-height: 59px;
font-size: 52px;
}
Hiç yorum yok:
Yorum Gönder