<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="carousel" class="carousel">
<!--MIN : make a div which wrapps all image and buttons-->
<button class="arrow prev">⇦</button>
<div class="gallery">
<!-- MIN : now gallery is a div wrapping all images -->
<ul>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
</div>
<!-- MIN : put the right button to the end of carousel div-->
<!-- MIN : add class detail to each directing arrow,
prev and next for positioning-->
<button class="arrow next">⇨</button>
</div>
<script>
let i = 1;
for(let li of carousel.querySelectorAll('li')) {
li.style.position = 'relative';
li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
i++;
}
/*copying configuration*/
let width = 130; // image width
let count = 3;
let list = carousel.querySelector('ul');
let listElems = carousel.querySelectorAll('li');
let position = 0; //ribbon scroll position
//is left start point of the carousel
carousel.querySelector('.prev').onclick = function(){
position += width*count;
//the button does not work if it goes negative
position = Math.min(position, 0);
list.style.marginLeft = position + 'px';
};
carousel.querySelector('.next').onclick = function() {
//shift left
position -= width * count; // 3 pics are shown in the carousel
//each picture's width is 130
//it moves the lineblock of images each time as the length of 3 images
position = Math.max(position, -width * (listElems.length - count));
//listElem.length is the number of images in the list
//listElem.length - count abstracts scrolled number of images EACH TIME
//-width * (listElems.length - count)) calculates the total WIDTH OF IMAGES
//between the position and total width of scrolled image, bigger one got to saved by Math.max
list.style.marginLeft = position + 'px';
//marginLeft decides the leftest point of the scroll
};
</script>
</body>
</html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="carousel" class="carousel">
<!--MIN : make a div which wrapps all image and buttons-->
<button class="arrow prev">⇦</button>
<div class="gallery">
<!-- MIN : now gallery is a div wrapping all images -->
<ul>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
</div>
<!-- MIN : put the right button to the end of carousel div-->
<!-- MIN : add class detail to each directing arrow,
prev and next for positioning-->
<button class="arrow next">⇨</button>
</div>
<script>
let i = 1;
for(let li of carousel.querySelectorAll('li')) {
li.style.position = 'relative';
li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`);
i++;
}
/*copying configuration*/
let width = 130; // image width
let count = 3;
let list = carousel.querySelector('ul');
let listElems = carousel.querySelectorAll('li');
let position = 0; //ribbon scroll position
//is left start point of the carousel
carousel.querySelector('.prev').onclick = function(){
position += width*count;
//the button does not work if it goes negative
position = Math.min(position, 0);
list.style.marginLeft = position + 'px';
};
carousel.querySelector('.next').onclick = function() {
//shift left
position -= width * count; // 3 pics are shown in the carousel
//each picture's width is 130
//it moves the lineblock of images each time as the length of 3 images
position = Math.max(position, -width * (listElems.length - count));
//listElem.length is the number of images in the list
//listElem.length - count abstracts scrolled number of images EACH TIME
//-width * (listElems.length - count)) calculates the total WIDTH OF IMAGES
//between the position and total width of scrolled image, bigger one got to saved by Math.max
list.style.marginLeft = position + 'px';
//marginLeft decides the leftest point of the scroll
};
</script>
</body>
</html>
댓글
댓글 쓰기