<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 ---------->
<script type="text/template" id="imgs">
<% for (let i = 0; i < arr.length; i++) { %>
<li><img src=<%= arr[i] %> alt=""></li>
<% } %>
</script>
<div class="carousel">
<a href="#" class="button prev"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<div class="list-images">
<ul>
</ul>
</div>
<a href="#" class="button next"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100vh;
background: #f0efe9;
}
.carousel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 470px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
height: 130px;
background: #fff;
border-radius: 5px;
box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}
.carousel .list-images {
width: 390px;
overflow: hidden;
margin: 0;
padding: 0;
}
.carousel .button {
width: 40px;
height: 130px;
text-align: center;
color: #50e3a4;
font-size: 16px;
line-height: 130px;
}
.carousel .button:hover i {
color: #333;
}
.carousel .list-images ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 10000px;
display: flex;
list-style: none;
-webkit-transition: margin-left 250ms;
transition: margin-left 250ms;
}
.carousel .list-images ul li {
height: 130px;
}
.carousel img {
width: 130px;
height: 130px;
}
class Carousel {
constructor(options) {
this.width = options.width;
this.count = options.count;
this.carousel = options.carousel;
this.list = options.list;
this.position = options.position;
this.prevButton = options.prevButton;
this.nextButton = options.nextButton;
this.imgs = options.imgs;
}
prev() {
this.position = Math.min(this.position + this.width * this.count, 0);
this.list.style.marginLeft = this.position + "px";
}
next() {
this.position = Math.max(this.position - this.width * this.count, -this.width * (this.listItems.length - this.count));
this.list.style.marginLeft = this.position + "px";
}
init() {
let tmpl = _.template(document.querySelector("#imgs").innerHTML);
this.list.innerHTML = tmpl(this.imgs);
this.listItems = document.querySelectorAll(".list-images ul li");
this.prevButton.addEventListener("click", this.prev.bind(this), false);
this.nextButton.addEventListener("click", this.next.bind(this), false);
}
}
let carousel = new Carousel({
width: 130,
count: 3,
carousel: document.querySelector(".carousel"),
list: document.querySelector(".list-images ul"),
listItems: document.querySelectorAll(".list-images ul li"),
prevButton: document.querySelector(".button.prev"),
nextButton: document.querySelector(".button.next"),
position: 0,
imgs: {
arr: ["https://dummyimage.com/128x128/ffffff/000000.png&text=slide-1",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-2",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-3",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-4",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-5",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-6",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-7",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-8",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-9",
"https://dummyimage.com/128x128/ffffff/000000.png&text=slide-10"]
}
});
carousel.init();
