Browser slideshow
A Pen by akira kanno on CodePen.
<header> | |
<h1>Native Javascript exercises</h1> | |
</header> | |
<div class="slide"> | |
<div class="slide-content"> | |
<h2 id="change-text">Slide1</h2> | |
</div> | |
<div class="tool-bar"> | |
<div class="nav"> | |
<div id="prev">◀︎</div> | |
<div id="next">▶︎</div> | |
</div> | |
</div> | |
</div> |
Browser slideshow
A Pen by akira kanno on CodePen.
var slideTxt = ['Slide1','Slide2','Slide3','Slide4','Slide5']; | |
var current = 0; | |
var changeText = function(num){ | |
if(current + num >= 0 && current + num < slideTxt.length){ | |
current += num; | |
document.getElementById('change-text').textContent = slideTxt[current]; | |
} | |
}; | |
document.getElementById('prev').onclick = function(){ | |
changeText(-1); | |
}; | |
document.getElementById('next').onclick = function(){ | |
changeText(1); | |
}; |
header{ | |
width: 100%; | |
height: 80px; | |
background: #000; | |
color: #fff; | |
text-align: center; | |
line-height: 80px; | |
} | |
.slide{ | |
width: 720px; | |
margin: 20px auto; | |
border: 1px solid #000; | |
background: #000; | |
} | |
.slide-content{ | |
height: 450px; | |
background: #fff; | |
position: relative; | |
} | |
.slide-content h2{ | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
} | |
.tool-bar{ | |
height: 50px; | |
overflow: hidden; | |
text-align: center; | |
color: #fff; | |
} | |
.nav{ | |
display: inline-block; | |
line-height: 50px; | |
} | |
#prev, | |
#next{ | |
float: left; | |
width: 40px; | |
height: 40px; | |
cursor: pointer; | |
} |