Javascript Slider Örneği – Jquery Slider Yapımı

furkandemirci Şubat 25, 2019

0 195 Bir dakikadan az

Aşağıdaki kodları direk html dosyası olarak kaydedin çalışacaktır.Boyut ve resimler için kendinize göre ayarlamalısınız.

<html>
<head>
 <title>Furkandemirci.com Slider Kod Örneği </title>
<script
 src="https://code.jquery.com/jquery-3.3.1.js"
 
 crossorigin="anonymous"></script>
<style>

 html {
 border-top: 5px solid #fff;
 background: #58DDAF;
 color: #2a2a2a;
}
html, body {
 margin: 0;
 padding: 0;
 font-family:'Open Sans';
}
h1 {
 color: #fff;
 text-align: center;
 font-weight: 300;
}
#slider {
 position: relative;
 overflow: hidden;
 margin: 20px auto 0 auto;
 border-radius: 4px;
}
#slider ul {
 position: relative;
 margin: 0;
 padding: 0;
 height: 200px;
 list-style: none;
}
#slider ul li {
 position: relative;
 display: block;
 float: left;
 margin: 0;
 padding: 0;
 width: 250px;
 height: 350px;
 background: #ccc;
 text-align: center;
 line-height: 300px;
}
a.control_prev, a.control_next {
 position: absolute;
 top: 40%;
 z-index: 999;
 display: block;
 padding: 4% 3%;
 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;
}
.slider_option {
 position: relative;
 margin: 10px auto;
 width: 160px;
 font-size: 18px;
}

</style>

</head>
<body>
<div id="slider" >
 <a href="#" class="control_next">&gt;</a>
 <a href="#" class="control_prev">&lt;</a>
 <ul>
        <li>SLIDE 1</li>
       <li style="background: #aaa;">SLIDE 1</li>
        <li>SLIDE 2</li>
        <li style="background: #aaa;">SLIDE 2</li>
<!-- /*
 <li><img src="images/ornek1.jpg" /></li>
 <li><img src="images/ornek2.jpg" /></li>
 <li><img src="images/ornek3.jpg" /></li>
 <li><img src="images/ornek4.jpg" /></li>
 <li><img src="images/ornek5.jpg" /></li> */ !-->
 </ul>
</div>

 <div class="slider_option">
 <input type="checkbox" checked="checked" id="checkbox" style="display: none;" />
</div>


<script type="text/javascript">

$(function() {
 $(document).ready(function(){
 if( $("#checkbox").is(':checked') ) {
 setInterval(function () {
 moveRight();
 }, 5000);
 }
 });


 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');

 function moveLeft() {
 $('#slider ul').animate({
 left: +slideWidth
 }, 200, function () {
 $('#slider ul li:last-child').prependTo('#slider ul');
 $('#slider ul').css('left', '');
 });
 };

 function moveRight() {
 $('#slider ul').animate({
 left: -slideWidth
 }, 200, function () {
 $('#slider ul li:first-child').appendTo('#slider ul');
 $('#slider ul').css('left', '');
 });
 };

 $('a.control_prev').click(function (e) {
 event.preventDefault();
 moveLeft();
 });

 $('a.control_next').click(function (e) {
 event.preventDefault();
 moveRight();
 });
});

</script>

</body>
</html>

Etiketler