Skip to content

Instantly share code, notes, and snippets.

@ahonymous

ahonymous/index.html

Created February 4, 2017 21:25
Show Gist options
  • Save ahonymous/c89a82dadc0e89058860e4c4d0d2cbb7 to your computer and use it in GitHub Desktop.
Save ahonymous/c89a82dadc0e89058860e4c4d0d2cbb7 to your computer and use it in GitHub Desktop.
Download ZIP
jquery slider
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slider-jk</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
<div class='slider-jk-block'>
<ul class='slider-jk-content' data-current=0>
<li class='slider-jk-element'>
<img src="img/animal-img-1.jpg" alt="Animal" class="img-responsive">
</li>
<li class='slider-jk-element'>
<img src="img/animal-img-2.jpg" alt="Animal" class="img-responsive">
</li>
<li class='slider-jk-element'>
<img src="img/animal-img-3.jpg" alt="Animal" class="img-responsive">
</li>
<li class="slider-jk-element">
<img src="img/animal-img-4.jpg" alt="Animal" class="img-responsive">
</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>
Raw
main.js
slideWidth=640;
var sliderTimer;
$(function(){
$('.slider-jk-content').width($('.slider-jk-content').children().length*slideWidth);
sliderTimer=setInterval(nextSlide,1000);
$('.slider-jk-block').hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer=setInterval(prevSlide,1000);
});
$('#next_slide').click(function(){
clearInterval(sliderTimer);
nextSlide();
sliderTimer=setInterval(nextSlide,1000);
});
$('#prev_slide').click(function(){
clearInterval(sliderTimer);
prevSlide();
sliderTimer=setInterval(nextSlide,1000);
});
});
function nextSlide(){
var currentSlide=parseInt($('.slider-jk-content').data('current'));
currentSlide++;
if(currentSlide>=$('.slider-jk-content').children().length)
{
$('.slider-jk-content').css('left',-(currentSlide-2)*slideWidth);
$('.slider-jk-content').append($('.slider-jk-content').children().first().clone());
$('.slider-jk-content').children().first().remove();
currentSlide--;
}
$('.slider-jk-content').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}
function prevSlide(){
var currentSlide=parseInt($('.slider-jk-content').data('current'));
currentSlide--;
if(currentSlide<0)
{
$('.slider-jk-content').css('left',-(currentSlide+2)*slideWidth);
$('.slider-jk-content').prepend($('.slider-jk-content').children().last().clone());
$('.slider-jk-content').children().last().remove();
currentSlide++;
}
$('.slider-jk-content').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}
Raw
style.css
.wrapper {
background: url("../img/bg-img.jpg") center/cover no-repeat;
height: 100vh;
}
.slider-jk-block {
width: 640px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider-jk-content {
position: absolute;
left: 0;
top: 0;
height: 400px;
margin: 0;
padding: 0;
}
.slider-jk-element {
width: 640px;
height: 400px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
.slider-jk-element img {
width: 100%;
}
.img-responsive {
width: 100%;
height: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment