Merhabalar bu yazımda bir önceki yazımda paylaştığım jquery sliderin daha gelişmiş ve sosyal medya haali örnek olarak facebookta resimlere tıklayıp büyüttüğünüzde arka fonun kararıp sadece resmi öne çıkaran tuşlar ile ileri geri yapabileceğiniz güzel bir slider.Dahada geliştirip kullanabilirsiniz. Dosya linki
home.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="slider.js"></script>
</head>
<body>
<style type="text/css">
body{margin:0px; padding:0px; background-color:#eee;}
ul,li,a{list-style:none;text-decoration:none;margin:0px;padding:0px;}
li.k{float:left; margin-left:10px;}
li.k:hover{opacity:0.7;}
img.sld {width:250px;height:200px;}
.slider{position:absolute; }
.kara{background-color:black;opacity:0.8;position:fixed;width:1370px;height:1200px;z-index:1;}
.slider_b{position:relative;width:700px;height:450px;overflow:hidden; z-index:2; top:70px;
left:330px;display:none;}
img.sld_b{width:700px;height:450px;display:none;}
.left{position:absolute;z-index:2; left:1050px;top:280px;cursor:pointer;display:none;}
.right{position:absolute;z-index:2;top:280px; left:270px;cursor:pointer;display:none;}
.close{position:absolute;z-index:2;top:10px; left:1310px;cursor:pointer;display:none; }
</style>
<div class="slider">
<ul >
<li class='k'>
<img class='sld' src='1.jpg' alt=''/>
</li>
<li class='k'>
<img class='sld' src='2.jpg' alt=''/>
</li>
<li class='k'>
<img class='sld' src='3.jpg' alt=''/>
</li>
<li class='k'>
<img class='sld' src='4.jpg' alt=''/>
</li>
<li class='k'>
<img class='sld' src='5.jpg' alt=''/>
</li>
<li class='k'>
<img class='sld' src='6.jpg' alt=''/>
</li>
</ul>
</div>
<div class="slider_b">
<ul>
<li>
<img class='sld_b' src='1.jpg' alt=''/>
</li>
<li>
<img class='sld_b' src='2.jpg' alt=''/>
</li>
<li>
<img class='sld_b' src='3.jpg' alt=''/>
</li>
<li>
<img class='sld_b' src='4.jpg' alt=''/>
</li>
<li>
<img class='sld_b' src='5.jpg' alt=''/>
</li>
<li>
<img class='sld_b' src='6.jpg' alt=''/>
</li>
</ul>
</div>
<img class="left" src="right.png"/>
<img class="right" src="left.png"/>
<img class="close" src="close.png"/>
</body>
</html>
slider.js
$(function(){
$("li.k").click(function(){
son=$("li.k:last").index();
ilk=$("li.k:first").index();
li_deger=$(this).index();
li_sayi=$("ul li.k").length;
$("body").prepend("<div class='kara'></div>");
$(".slider_b").show();
$("img.sld_b:eq("+li_deger+")").show();
$(".close").show();
$(".right").show();
$(".left").show();
});//li.k son
$(".left").click(function(){
if (li_deger<li_sayi-1){
li_deger++;
$("img.sld_b").hide();
$("img.sld_b:eq("+li_deger+")").show();
}if(li_deger==ilk){
$("img.sld_b:eq("+ilk+")").show();
}
});//left son
$(".right").click(function(){
if (li_deger>0){
li_deger--;
$("img.sld_b:eq("+li_deger+")").show();
}if(li_deger==son){
$("img.sld_b:eq("+son+")").show();
}
});//right son
$(".close").click(function(){
$("img.sld_b:eq("+li_deger+")").hide();
$(".slider_b").hide();
$(".close").hide();
$(".right").hide();
$(".left").hide();
$(".kara").hide();
$(this).hide();
});//clsoe son
});//genel son
Bu yazı yorumlara kapalı.