<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="jumbozoid" class="main-content">
<div class="arrow arrow-prev" onclick="plusDivs(-1)"><span>⟨</span></div>
<div class="gallery-slide">
<div class="wrap-content">
<div class="slideshow">
<img src="http://naufalh.000webhostapp.com/img/collect/0.png" alt="flat blue montain">
<p>TRY 1</p>
</div>
<div class="slideshow">
<img src="http://naufalh.000webhostapp.com/img/collect/1.png" alt="flat beautifull sunset">
<p>TRY 2</p>
</div>
<div class="slideshow">
<img src="http://naufalh.000webhostapp.com/img/collect/2.png" alt="flat mountain rain">
<p>TRY 3</p>
</div>
</div>
</div>
<div class="arrow arrow-next" onclick="plusDivs(1)"><span>⟩</span></div>
</section>
<div>Current counter: <span id="counter"></span></div>
<script src="script.js"></script>
</body>
</html>
// manual slideshow
var slideIndex = 1;
var imgTarget = document.getElementsByClassName("slideshow");
var counter = 0;
var counterTarget = document.getElementById("counter");
function plusDivs(n) {
showDivs(slideIndex += n);
counter = 0;
}
function showDivs(n) {
var i;
if (n > imgTarget.length) {slideIndex = 1}
if (n < 1) {slideIndex = imgTarget.length}
for (i = 0; i < imgTarget.length; i++) {
imgTarget[i].style.opacity = '0' ;
imgTarget[i].style.transition = '1s ease-in-out';
}
imgTarget[slideIndex - 1].style.opacity = '1' ;
imgTarget[slideIndex - 1].style.transition = '1s ease-in-out';
}
showDivs(slideIndex);
setInterval(function()
{
counter++;
counterTarget.innerHTML = counter;
if(counter >= 5)
{
plusDivs(1);
}
}, 1000);
@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Dawning+of+a+New+Day');
/*import font*/
*{
margin: 0;padding:0;
}
a{
text-decoration: none;
}
ul,ol{
list-style-type: none;
}
html,body,.container{
width: 100%;
height: 100%;
font-family: 'amatic sc', cursive;
font-size: 100%;
}
/*end reset*/
.clearfix::after{
clear: both;
content: '';
display: table;
}
.wrap-content{
width: 80%;
margin: auto;
}
.title-content{
text-align: center;
font-size: 3rem;
}
/*most used*/
#header .wrap-content{
moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 10px;
padding: 20px 20px 10px 20px;
border-bottom: 2px solid #2d2d2d;
}
.logo{
text-align: center;
margin: auto;
font-size: 1.5em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.logo img{
opacity: 0.6;
transition:.5s ease;
}
.logo img:hover{
opacity: 1;
transition:.5s ease;
}
.moto{
position: relative;
top:-10px;
}
nav{
text-align: right;
width: 70%;
}
nav a{
color: #2d2d2d;
}
nav ul {
margin-top: 40px;
}
nav ul ,nav li {
display: inline-block;
}
nav li::before{
content: '/';
margin:0 5px;
}
nav li:first-child::before{
content: '';
margin: 0;
}
/*end header section*/
#jumbozoid{
width: 100%;
height: 70%;
margin-top: 50px;
margin-bottom: 50px;
position: relative;
overflow: hidden;
}
.arrow{
position: absolute;
z-index: 99999;
top:0;
width: 10%;height: 100%;
font-size: 3.5rem;
color: #2d2d2d;
cursor: pointer;
}
.arrow-prev{
left: 0;
}
.arrow-next{
right: 0;
}
.arrow span{
position: absolute;
top:50%;left: 50%;
transform: translate(-50%,-50%);
}
.gallery-slide , .gallery-slide .wrap-content , .slideshow{
height: 100%;
}
.gallery-slide .wrap-content{
position: relative;
}
.slideshow{
position:absolute;
width: 100%;
}
.slideshow img{
display:block;
margin: auto;
width: 100%;
height: 100%;
max-height: 100%;
}
.slideshow p{
position: absolute;
top:50%;left: 50%;
transform: translate(-50%,-50%);
font-size: 3rem;
color: #fff;
background: rgba(45, 45, 45, 0.7);
padding: 10px;
}
/*end content section*/
#footer .title-content{
color:rgba(45, 45, 45, 0.7);
cursor: default;
}
#footer .title-content:hover{
color: #2d2d2d;
}
/*end footer section*/