<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Carousel</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="image-carousel">
<div class="inner">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROnCnF0sNI5TYUtVCvG9P11a11LJkE0lNsli4XttQOLNBxbW8U" width="1350px" height="550px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSf3kKVchUE4vK8BB3FiXGWAjxntwOeZHF0bXlE8jBhUo3Amcph" width="1350px" height="550px">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnsAguzLk06jyhNj2Fk5YUR4Bh538ghcEVkbIQNescv9YanKBi" width="1350px" height="550px">
<img src="http://hd.wallpaperswide.com/thumbs/mosque-t1.jpg" width="1350px" height="550px">
</div>
<div class="bubbles"></div>
<div class="prev"></div>
<div class="next"></div>
</div>
<script src="script.js"></script>
</body>
</html>
.image-carousel {
width: 1350px;
height: 550px;
overflow: hidden;
position: relative;
}
.inner {
display: flex;
position: absolute;
left: 0;
transition: left 0.25s ease-out;
}
.bubbles {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 5px;
}
.bubble {
margin: 2.5px;
background-color: white;
border-radius: 100000px;
width: 10px;
height: 10px;
display: inline-block;
opacity: 0.25;
transition: opacity 0.1s linear;
cursor: pointer;
}
.bubbles:hover {
opacity: 0.65;
}
.bubble.active {
opacity: 1;
}
.next::after, .prev::after {
content: '>';
position: absolute;
top: 50%;
right: 0;
background-color: white;
font-size: 20px;
width: 1em;
height: 3em;
font-weight: bold;
font-family: sans-serif;
transform: translateY(-50%);
line-height: 3em;
box-sizing: border-box;
padding: 0 0.2em;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.1s linear;
}
.next:hover::after, .prev:hover::after {
opacity: 1;
}
.prev::after {
content: '<';
left: 0;
}
let carousels = document.getElementsByClassName('image-carousel');
[].forEach.call(carousels, function (c) {
let next = c.getElementsByClassName('next')[0],
prev = c.getElementsByClassName('prev')[0],
bubblesContainer = c.getElementsByClassName('bubbles')[0],
inner = c.getElementsByClassName('inner')[0],
imgs = inner.getElementsByTagName('img'),
currentImageIndex = 0,
width = 1350,
bubbles = [];
for (let i = 0; i < imgs.length; i++) {
let b = document.createElement('span');
b.classList.add('bubble');
bubblesContainer.appendChild(b);
bubbles.push(b);
b.addEventListener('click', function () {
currentImageIndex = i;
switchImg();
});
}
function switchImg () {
inner.style.left = -width * currentImageIndex + 'px';
bubbles.forEach(function (b, i) {
if (i === currentImageIndex) {
b.classList.add('active');
} else {
b.classList.remove('active');
}
});
}
next.addEventListener('click', function () {
currentImageIndex++;
if (currentImageIndex >= imgs.length) {
currentImageIndex = 0;
}
switchImg();
});
prev.addEventListener('click', function () {
currentImageIndex--;
if (currentImageIndex < 0) {
currentImageIndex = imgs.length - 1;
}
switchImg();
});
switchImg();
});
