How to make slider work correctly?

https://jsfiddle.net/ef3tzokm/5/

There is a slider. Crooked moved in JSFiddle, but not the point. Problems two. Rather 1 problem and 1 question:
1) Why is the style transition-duration works only with the second button on the button left/right? I tried in JS to shove, the result is the same.

2) How to make so that the slider is not pressed, when the display first 3 or last 3 categories? Or loop (the best way). If in the area would have only one card at a time, it would be easy, but I have shown at 3, the rest hidden behind the display area. Can eat a method better?
April 4th 20 at 00:51
2 answers
April 4th 20 at 00:53
Solution
1) Why is the style transition-duration works only with the second button on the button left/right? I tried in JS to shove, the result is the same. because styles do not set the value left: 0;

<!DOCTYPE html>
<html>
the <head>
<title></title>
 <style type="text/css">

#wrap
{
 width: 150px;
}
#categories
{
 justify-content: center;
 align-items: center;
 display: flex;
 box-shadow: 0px 5px 13px -6px rgba(0,0,0,0.75);
 background-color: #fff;
 height: 190px;
}
 #categories .wrap
{
 margin: 0;
 display: flex;
 overflow: hidden;
 justify-content: space-between;
}

.leftArrow,.rightArrow
{
 height: 88px;
 display: block;
 padding: 51px 0;
 cursor: pointer;
}
.arrow
{
 min-width: 32px;
 max-width: 100%;
 color: red;
}
.leftArrow:hover
{
 position: relative;
 right: 10px;
}
.rightArrow:hover
{
 position: relative;
 right: -10px;
}
.toLeft
{
 right: 345px; 
 transition-duration: .25s;
 transition: right 1s ease-out 0.5 s;
}
.categoryItem
{
 width: 345px;
 position: relative;
 padding: 5px;
 display: flex;
 align-items: center;
 border-right: 1px solid #e7e7e7;
 transition: left 0.5 s;
 left: 0;
}

 .categoryItem img
{
 width: 170px;
 height: auto;
 margin-left: 24px;
}
.productInfo
{
 font-family: 'Bebas Neue', cursive;
 margin-left: 5px;
}
 .productInfo .title
{
 font-size: 27px;
 text-transform: uppercase;
 width: 110px;
 line-height: 0.9;
 color: #afafaf;
 margin-bottom: 20px;
}
 .goToShop button
{
 background-color: #3cc395;
 border: none;
 font-size: 19px;
 font-weight: bold;
 font-family: 'Bebas Neue', cursive;
 color: #fff;
 padding: 9px 16px;
 border-radius: 3px;
 box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.75);
}
 .goToShop button:hover
{
 box-shadow: none;
 position: relative;
 top: 3px;
}
</style>
</head>
the <body>
 <div id="categories">
 <div class="arrow" id="left"><img src="https://png.pngtree.com/png-clipart/20190920/original/pngtree-left-and-right-arrow-icons-png-image_4636456.jpg" alt="" class="leftArrow"></div>
 <div class="wrap">
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>
 <div class="categoryItem">
 <img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
 <div class="productInfo">
 <div class="title">branded shoes</div>
 <div class="goToShop">
<button>SHOP</button>
</div>
</div>
</div>

</div>
 <div class="arrow" id="right"><img src="https://png.pngtree.com/png-clipart/20190920/original/pngtree-left-and-right-arrow-icons-png-image_4636456.jpg" alt="" class="rightArrow"></div>

</div>

 <script type="text/javascript">
 "use strict";

 var left = document.querySelector("#left");
 var right = document.querySelector("#right");
 var elements = document.getElementsByClassName("categoryItem");
 var pos = 0;
 let coords = elements[0].getBoundingClientRect().width;
 let max = Math.floor((elements.length * coords) / 2);


 left.onclick = function()
{
 if (pos >= 0) return;
 pos += coords;
 for (var i = 0; i < elements.length; i++)
 { 
 elements[i].style.left = pos+'px';
}
};

 right.onclick = function()
{
 if (pos <= -max) return;
 pos= coords;
 for (var i = 0; i < elements.length; i++)
{
 elements[i].style.left = pos+'px'; 
}
};
</script>
</body>
</html>
Thank you very much. That's what I was looking for. - faustino.Kul commented on April 4th 20 at 00:56
@faustino.Kul, view the corrected version, np) - maximillian.Hamill commented on April 4th 20 at 00:59
@maximillian.HamillLooked, but can't understand the difference. - faustino.Kul commented on April 4th 20 at 01:02
let coords = elements[0].getBoundingClientRect().width;

know the width of the block, to exactly it was.
you have to, it was 345, and if blocks had 7 that markup has gone. - maximillian.Hamill commented on April 4th 20 at 01:05
@maximillian.Hamill, Okay. Thanks again. The last question is about adaptiv. When you write media queries, and you need to show in the slider on 1 or 2 products, what then? - faustino.Kul commented on April 4th 20 at 01:08
April 4th 20 at 00:55
Do not reinvent the wheel. Here's a link to the office.cool site slider: Swiper. In their documentation everything is described.

On all of my projects only use the slider. Complaining is a sin. Just a miracle.
AVE Swiper -how nice it recommend normal slider. - jamey93 commented on April 4th 20 at 00:58
@jamey93, at the time, was tortured with crutches. Benefit of the endless search for norms of the solution led me to this magic :))) - andres_Ha commented on April 4th 20 at 01:01
@andres_Ha, I'm learning JS, I does not matter to insert beautiful and high quality code. I want to learn to do yourself. It's not for a real project, so don't worry. This horror will remain in my computer. - faustino.Kul commented on April 4th 20 at 01:04
@faustino.Kul, first, this:

PS. I want to reinvent the wheel. Just answer my questions. I know that the code of the curve and bad. I'm learning. If you have any tips - I will be very happy to hear them.


was not.

So, sorry if something is wrong. But if you need a turnkey solution, use my proposed option.

What about solving your problem:

On codepen is full of all sorts of sliders. Let's see how they are implemented. These options are easier than to go into the source code of large tools. But with your code I can not help. My knowledge of JS is not enough for a slider, but want to help, so climb with their advice. - andres_Ha commented on April 4th 20 at 01:07
@andres_Ha, just now when I read your message, I realized that it sounds rude. I'm not with the implication of writing. Just wanted to clarify that I'm not looking for ready solutions. Sorry if I offended you. Thanks for the advice. - faustino.Kul commented on April 4th 20 at 01:10
@faustino.Kul, it's okay, I'm not one of those who is offended, not understanding the fact, anyway. And desire I perfectly understand. Myself breaks the desire to create many things myself and know how they are made.

And if you want, keep learning and don't give up. Brick by brick and built the tools that someone once, too, would recommend to others.

Good luck and happy NG! - andres_Ha commented on April 4th 20 at 01:13
@andres_Ha, thanks for the motivation. And you all the best! - faustino.Kul commented on April 4th 20 at 01:16

Find more questions by tags JavaScript