Why is Math.min?

<!DOCTYPE html>

the <head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="style.css">
</head>

the <body>

 <div id="carousel" class="carousel">
 <button class="arrow prev">back to</button>
 <div class="gallery">
 <ul class="images">
 <p><img src="https://en.js.cx/carousel/1.png"></li>
 <p><img src="https://en.js.cx/carousel/2.png"></li>
 <p><img src="https://en.js.cx/carousel/3.png"></li>
 <p><img src="https://en.js.cx/carousel/4.png"></li>
 <p><img src="https://en.js.cx/carousel/5.png"></li>
 <p><img src="https://en.js.cx/carousel/6.png"></li>
 <p><img src="https://en.js.cx/carousel/7.png"></li>
 <p><img src="https://en.js.cx/carousel/8.png"></li>
 <p><img src="https://en.js.cx/carousel/9.png"></li>
 <p><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
</div>
 <button class="arrow next">⇨</button>
</div>

the <script>

 /* configuration */
 let width = 130; // image width
 let count = 3; // visible images count

 let list = carousel.querySelector('ul');
 let listElems = carousel.querySelectorAll('li');

 let position = 0; // ribbon scroll position

 carousel.querySelector('.prev').onclick = function() {
 // shift left
 position += width * count;
 // can't move to the left too much, end of images
 position = Math.min(position, 0)
 list.style.marginLeft = position + 'px';
};

 carousel.querySelector('.next').onclick = function() {
 // shift right
 position -= width * count;
 // can only shift the ribbbon for (total ribbon length - visible count) images
 position = Math.max(position, -width * (listElems.length - count));
 list.style.marginLeft = position + 'px';
};
</script>

</body>
</html>


body {
 padding: 10px;
}

.carousel {
 position: relative;
 width: 398px;
 padding: 10px 40px;
 border: 1px solid #CCC;
 border-radius: 15px;
 background: #eee;
}

.carousel img {
 width: 130px;
 height: 130px;
 /* make it block to remove the space around images */
 display: block;
}

.arrow {
 position: absolute;
 top: 60px;
 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: 7px;
}

.next {
 right: 7px;
}

.gallery {
 width: 390px;
 overflow: hidden;
}

.gallery ul {
 height: 130px;
 width: 9999px;
 margin: 0;
 padding: 0;
 list-style: none;
 transition: margin-left 250ms;
 /* remove white-space between inline-block'ed li */
 /* http://davidwalsh.name/remove-whitespace-inline-block */
 font-size: 0;
}

.gallery li {
 display: inline-block;
}


Position seems to be much more than zero...position = Math.min(position, 0)

carousel.querySelector('.prev').onclick = function() {
 // shift left
 position += width * count;
 // can't move to the left too much, end of images
 position = Math.min(position, 0)
 list.style.marginLeft = position + 'px';
 };


it also moves the code to the left, but we see that it adds margin on the left, that is - it is impossible, well or it is negative, although the debugger always shows that the position is zero.

Here the opposite is true, but also illogical, to be exact - the left margin is removed, and the idea of the element should move to the left - but no.

carousel.querySelector('.next').onclick = function() {
 // shift right
 position -= width * count;
 // can only shift the ribbbon for (total ribbon length - visible count) images
 position = Math.max(position, -width * (listElems.length - count));
 list.style.marginLeft = position + 'px';
 };
March 25th 20 at 12:40
1 answer
March 25th 20 at 12:42
Position seems to be much more than zero...

no,
carousel.querySelector('.next').onclick = function() {
 // shift right
 position -=

as we can see when you click on next it is taken away, and when you click on excellent it added.
although the debugger always shows that the position is zero.

You look at what position?
list.style.marginLeft = position + 'px';
and
let list = carousel.querySelector('ul');
You look at what position?

All5d41bf722de01555303423.png - antonietta77 commented on March 25th 20 at 12:45
I don't understand how taking away the margin-left, we move the picture to the right - antonietta77 commented on March 25th 20 at 12:48
and again with the same code in my browser at all not correctly located image, before they were placed normally, in the sandbox everything is fine) - antonietta77 commented on March 25th 20 at 12:51
@antonietta77,
margin-left: 10px; //move the picture to the right
margin-left: -10px //move the picture to the left - jammie_Lemke58 commented on March 25th 20 at 12:54
carousel.querySelector('.next').onclick = function() {
 // shift right
 position -= width * count;
 // can only shift the ribbbon for (total ribbon length - visible count) images
 position = Math.max(position, -width * (listElems.length - count));
 list.style.marginLeft = position + 'px';
 };

So I can't understand why there position is reduced? Somehow it is very difficult... And in the screenshot you can see in my posted image, help to fix. - antonietta77 commented on March 25th 20 at 12:57
@antonietta77, who should be - he understands, or to ask where did you get this code. - jammie_Lemke58 commented on March 25th 20 at 13:00

Find more questions by tags JavaScript