Слайдер на чистом js
Хочу понять, как можно преобразовать код данного слайдера, чтобы открывался и начал работать в модальном окошке. Конечно есть Lightbox либо fancyBox, но суть не в этом. Хочется понять и разобраться, как это можно сделать именно на чистом js, на примере данного кода. И если например, допустим, будут две или три ссылки на открытие слайдера, где в каждой будет свой набор картинок, под каждую ссылку нужно будет повторять данный код или это будет не грамотным решением? Как такую задачу реализовать грамотно?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS</title>
<style>
#slider{
width: 400px;
}
#slider img{
width: 100%;
height: 300px;
}
#buttons{
text-align: center;
}
</style>
<script src="script.js"></script>
</head>
<body>
<div id="slider">
<img src="">
<div id="buttons">
<input id="btnPrev" type="button" value="<-">
<input id="btnNext" type="button" value="->">
</div>
</div>
</body>
</html>
window.onload = function(){
var images = ['Chrysanthemum.jpg', 'Desert.jpg', 'Jellyfish.jpg', 'Penguins.jpg', 'Tulips.jpg'];
var i = 0;
var img = document.querySelector('#slider img');
img.src = 'img/' + images[i];
document.querySelector('#btnPrev').onclick = function(){
(i > 1) ? i-- : (i = images.length - 1);
img.src = 'img/' + images[i];
}
document.querySelector('#btnNext').onclick = function(){
(i < images.length - 1) ? i++ : i = 0;
img.src = 'img/' + images[i];
}
}
|