Слайдер для фотографий
Татьяна Носаева

Помогите, пожалуйста. Мне надо сделать простой слайдер на js, который при прокрутке оставляет видимой часть предыдущей и последующей фотографий. Я задала размер фото 640Х480px. Сейчас картинки при прокрутке вправо сдвигаются на 640 px, а надо, чтобы первый снимок сдвигался на -640, а последующие на - ширина предыдущих + -680. Как эту разницу прописать, не знаю...За любую помощь/совет буду очень благодарна.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div id="slider" class="slider">
    <button class="arrow prev">⇦</button>

        <div class="img">
        <ul>
            <li id="img1"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-4.jpg" alt="природа"></li>
            <li id="img2"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-5.jpg" alt="природа"></li>
            <li id="img3"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-7.jpg" alt="природа"></li>
            <li id="img4"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-8.jpg" alt="природа"></li>
            <li id="img5"><img src="http://lorempixel.com/image_output/nature-q-c-640-480-3.jpg" alt="природа"></li>


        </ul>
    </div>

   <button class="arrow next">⇨</button>
</div>



<script>

 var lis = document.getElementsByTagName('li');
 for (var i = 0; i < lis.length; i++) {
   lis[i].style.position = 'relative';
   var span = document.createElement('span');
   span.style.cssText = 'position: absolute;left: 0;top:0';
   span.innerHTML = i + 1;
   lis[i].appendChild(span);
 }


var width = 640; // ширина изображения
var count = 1; // количество изображений

var slider = document.getElementById('slider');
var list = slider.querySelector('ul');
var listElems = slider.querySelectorAll('li');

var position =0; // текущий сдвиг влево

slider.querySelector('.prev').onclick = function() {
  // сдвиг влево



  position = Math.min(position + width * count, 0)//Возвращает наименьший из списка аргументов
  list.style.marginLeft = position + 'px';}



slider.querySelector('.next').onclick = function() {
  // сдвиг вправо


  position = Math.max(position - width * count, -width * (listElems.length - count));//Возвращает наибольший из списка аргументов
  list.style.marginLeft = position + 'px';


};

</script>
<style>html {
font-size: 10px;
}

body{
padding: 10px;
/font-size: 1.6rem;/
}

.slider {
position: relative;
width: 1000px;
height: 550px;
/padding: 50px 10px 50px 10px;/
background: #aed;
padding-top: 50px;
}

.img {
width: 800px;
overflow: hidden;
margin: auto;
background: red;

}

.slider img {
width: 640px;
height: 480px;
display: block;
opacity:0.6;

}

.img ul {
height: 480px;
width: 9999px;
list-style: none;
transition: left 500ms;
font-size: 0;
position: relative;

}

.img li {
display: inline-block;
margin-right: 40px;
}

.arrow {
position: absolute;
top: 500px;
padding: 0;
background: #ddd;
border-radius: 15px;
border: 1px solid gray;
font-size: 24px;
line-height: 24px;
color: #444;
display: block;
}

.arrow:focus {
outline: none;
}

.arrow:hover {
background: #ccc;
cursor: pointer;
}

.prev {
left: 25px;
}

.next {
right: 25px;
}</style>
</body>
</html>

2 чел.