Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images.
var firstval = 0;
function Carousel() {
firstval += 2;
parent = document.getElementById('container-carousel');
parent.style.left = "-" + firstval + "px";
if (!(firstval % 150)) {
setTimeout(Carousel, 3000);
firstval = 0;
var firstChild = parent.firstElementChild;
parent.appendChild(firstChild);
parent.style.left= 0;
return;
}
runCarousel = setTimeout(Carousel, 10);
}
Carousel(); #wrapper-carousel {
position: relative;
width: 450px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
#container-carousel {
position: absolute;
width: 450px;
height: 150px;
}
.child {
width: 150px;
height: 150px;
padding-top: 35px;
float: left;
text-align: center;
font-size: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="wrapper-carousel">
<div id="container-carousel">
<div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
<div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0018904_50_red_roses_in_vase_320.jpeg"> </div>
<div class="child"><img width="100" src="https://d2z4fd79oscvvx.cloudfront.net/0020232_chocolate_cream_gateaux_cake_320.jpeg"> </div>
</div>
<a class="left" href="#wrapper-carousel" style="font-size:100px;z-index:3000;">‹</a>
<a class="right" href="#wrapper-carousel" style="font-size:100px;z-index:3000">›</a>
</div>I am looking to include basic buttons to navigate this carousel. No third-party plugin or framework carousel will be used in this implementation.
View my JsFiddle demo here: https://jsfiddle.net/varunPes/wzkLjh8s/21/