Skip to content

Instantly share code, notes, and snippets.

@Dmitry-7

Dmitry-7/index.html

Created January 30, 2018 07:54
Show Gist options
  • Save Dmitry-7/797158836831bb2e68b4357264dafa7f to your computer and use it in GitHub Desktop.
Save Dmitry-7/797158836831bb2e68b4357264dafa7f to your computer and use it in GitHub Desktop.
Download ZIP
vanillaJsSlider
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu">
</div>
</header>
<section>
<div id="sliderWrapper">
<div id="sliderWindow">
<div id="prevButton"></div>
<div id="nextButton"></div>
<ul id="sliderRibbon" class="transition">
<li class="sliderItem"><img src="img/1.png" alt="">
</li>
<li class="sliderItem"><img src="img/2.png" alt="">
</li>
<li class="sliderItem">
<img src="img/3.png" alt="">
</li>
<li class="sliderItem">
<img src="img/4.png" alt="">
</li>
</ul>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
function cloneFirstRibbonElement(){
var ribbonFirstElement= document.querySelector('.sliderItem');
var ribbonFirstElementClone = ribbonFirstElement.cloneNode(true);
sliderRibbon.appendChild(ribbonFirstElementClone);
}
function sliderShift(){
if(stepPosition==1 && this.id=="nextButton"){
sliderShiftFirstToLast('toLast');
}else if(stepPosition==sliderRibbonChildCount && this.id=="prevButton"){
sliderShiftFirstToLast('toFirst');
}
if (this.id=="nextButton"){
stepPosition--;
left=sliderStep*(stepPosition-1);
} else{
stepPosition++;
}
left=(sliderStep*(stepPosition-1))*(-1);
sliderRibbon.style.left = left + 'px';
clearInterval(timer);
timer = setInterval(sliderShift,400000);
}
function sliderShiftFirstToLast(direction){
if (direction == 'toFirst'){
//sliderRibbon.classList.remove("transition");
sliderRibbon.style.left = 0 + 'px';
stepPosition=1;
sleep(5000);
sliderRibbon.classList.add("transition");
}
}
function autoSlider(){
timer = setInterval(sliderShift,400000);
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
var prevButton = document.getElementById('prevButton');
var nextButton = document.getElementById('nextButton');
var sliderRibbon = document.getElementById('sliderRibbon');
var sliderWindow = document.getElementById('sliderWindow');
var sliderRibbonChildCount = sliderRibbon.childElementCount+1;
var left = 0;
var stepPosition = 1;
var computedStyle = getComputedStyle(sliderWindow,null);
var sliderStep = parseInt((computedStyle.width).replace(/\D+/g,""));
var timer;
prevButton.addEventListener('click',sliderShift);
nextButton.addEventListener('click',sliderShift);
cloneFirstRibbonElement();
autoSlider();
*{
margin: 0;
padding: 0;
}
header{
height:200px;
background-color: green;
}
header:before{
content:'';
display:table;
}
.menu{
margin-left: auto;
margin-right: auto;
background-color: gray;
height:70px;
width:400px;
margin-top: 20px;
}
#sliderWrapper{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width:200px;
height: 200px;
}
#sliderWindow{
width:200px;
height: 200px;
background-color: blue;
/*overflow:hidden;*/
position:relative;
}
#sliderRibbon{
width: 1000px;
height:200px;
background-color: pink;
display: inline-block;
position: relative;
left: 0;
/*transition: all ease 1s;*/
}
/*.noTransition{
transition: 0s !important;
}*/
.transition{
transition: all ease 1s;
}
#sliderRibbon::after{
content: "";
display: block;
clear: both;
}
#sliderRibbon li{
list-style: none;
/*display: inline-block;*/
float:left;
}
#prevButton{
position: absolute;
left:1%;
top:50%;
height: 20px;
width:20px;
background-color: white;
z-index: 2;
}
#nextButton{
position: absolute;
right:1%;
top:50%;
height: 20px;
width:20px;
background-color: white;
z-index: 2;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu">
</div>
</header>
<section>
<div id="sliderWrapper">
<div id="sliderWindow">
<div id="prevButton"></div>
<div id="nextButton"></div>
<ul id="sliderRibbon" class="transition">
<li class="sliderItem"><img src="img/1.png" alt="">
</li>
<li class="sliderItem"><img src="img/2.png" alt="">
</li>
<li class="sliderItem">
<img src="img/3.png" alt="">
</li>
<li class="sliderItem">
<img src="img/4.png" alt="">
</li>
</ul>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
function cloneFirstRibbonElement(){
var ribbonFirstElement= document.querySelector('.sliderItem');
var ribbonFirstElementClone = ribbonFirstElement.cloneNode(true);
sliderRibbon.appendChild(ribbonFirstElementClone);
}
function sliderShift(){
if(stepPosition==1 && this.id=="nextButton"){
sliderShiftFirstToLast('toLast');
}else if(stepPosition==sliderRibbonChildCount && this.id=="prevButton"){
sliderShiftFirstToLast('toFirst');
}
if (this.id=="nextButton"){
stepPosition--;
left=sliderStep*(stepPosition-1);
} else{
stepPosition++;
}
left=(sliderStep*(stepPosition-1))*(-1);
sliderRibbon.style.left = left + 'px';
clearInterval(timer);
timer = setInterval(sliderShift,400000);
}
function sliderShiftFirstToLast(direction){
if (direction == 'toFirst'){
//sliderRibbon.classList.remove("transition");
sliderRibbon.style.left = 0 + 'px';
stepPosition=1;
sleep(5000);
sliderRibbon.classList.add("transition");
}
}
function autoSlider(){
timer = setInterval(sliderShift,400000);
}
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
var prevButton = document.getElementById('prevButton');
var nextButton = document.getElementById('nextButton');
var sliderRibbon = document.getElementById('sliderRibbon');
var sliderWindow = document.getElementById('sliderWindow');
var sliderRibbonChildCount = sliderRibbon.childElementCount+1;
var left = 0;
var stepPosition = 1;
var computedStyle = getComputedStyle(sliderWindow,null);
var sliderStep = parseInt((computedStyle.width).replace(/\D+/g,""));
var timer;
prevButton.addEventListener('click',sliderShift);
nextButton.addEventListener('click',sliderShift);
cloneFirstRibbonElement();
autoSlider();
Raw
style.css
*{
margin: 0;
padding: 0;
}
header{
height:200px;
background-color: green;
}
header:before{
content:'';
display:table;
}
.menu{
margin-left: auto;
margin-right: auto;
background-color: gray;
height:70px;
width:400px;
margin-top: 20px;
}
#sliderWrapper{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width:200px;
height: 200px;
}
#sliderWindow{
width:200px;
height: 200px;
background-color: blue;
/*overflow:hidden;*/
position:relative;
}
#sliderRibbon{
width: 1000px;
height:200px;
background-color: pink;
display: inline-block;
position: relative;
left: 0;
/*transition: all ease 1s;*/
}
/*.noTransition{
transition: 0s !important;
}*/
.transition{
transition: all ease 1s;
}
#sliderRibbon::after{
content: "";
display: block;
clear: both;
}
#sliderRibbon li{
list-style: none;
/*display: inline-block;*/
float:left;
}
#prevButton{
position: absolute;
left:1%;
top:50%;
height: 20px;
width:20px;
background-color: white;
z-index: 2;
}
#nextButton{
position: absolute;
right:1%;
top:50%;
height: 20px;
width:20px;
background-color: white;
z-index: 2;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment