Eu estou precisando limitar o avanço quando apertar o "botão avança". Do jeito que esta se você ficar apertando o botão vai chegar uma hora que os itens vão sumir da tela. Eu gostaria que isso não acontecesse, que quando o ultimo item aparecesse a animação parasse impedindo que todos os itens saiam da tela, mas estou com problema nesta parte. Basicamente o que tem que acontecer é que se apertar o botão "Avançar" e se já estiver aparecido o ultimo item, ele tem que parar, do jeito que está ele continua avançando até sair da tela.
Ele tem que parar de mover assim que o último item aparecer, de forma que quando chegar no ultimo item, fique parecendo com a imagem abaixo.
var amount = getFirstChild(document.getElementById("scroll1")).clientWidth; //300;
var margin = 16;
var initial = 0;
var scroll_container = document.getElementById("scroll1");
function getFirstChild(el) {
var firstChild = el.firstChild;
while (firstChild != null && firstChild.nodeType == 3) { // skip TextNodes
firstChild = firstChild.nextSibling;
}
return firstChild;
}
// Avança
document.getElementById("myBtn2").addEventListener("click", function() {
initial -= (amount + margin);
scroll_container.style.transform = "translateX(" + initial + "px)";
})
// Volta
document.getElementById("myBtn1").addEventListener("click", function() {
if (initial + (amount + margin) >= 0) {
initial = 0;
scroll_container.style.transform = "translateX(" + 0 + "px)";
} else {
initial += (amount + margin);
scroll_container.style.transform = "translateX(" + initial + "px)";
}
})
#container-controls {
display: inline-flex;
width: 100%;
}
#title_page {
width: calc(100% - 170px);
}
#title_page h2 {
text-align: left;
padding: 0;
font-family: 'Optimistic Display Medium', Helvetica, Arial, sans-serif !important;
font-weight: 500 !important;
margin: 0;
color: #344854;
font-size: 48px;
}
.btn_control {
background: blue;
height: 40px;
width: 80px;
margin: 5px 5px;
text-align: center;
vertical-align: middle;
line-height: 40px;
margin-top: auto;
}
.imagem {
height: 300px;
width: 300px;
margin: 16px 16px 16px 0px;
display: block;
background: black;
position: relative;
}
.wrapper {
display: flex;
align-items: flex-start;
overflow: hidden;
width: 100%;
}
.scrolls {
display: flex;
justify-content: left;
align-items: flex-start;
transform: translateX(0px);
transition: transform 0.5s cubic-bezier(0.25, 0.72, 0.51, 0.96) 0s;
min-width: unset;
margin: 10px;
}
<div>
<div id="container-controls">
<div id="title_page">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
</div>
<div id="myBtn1" class="btn_control"> Retrocede </div>
<div id="myBtn2" class="btn_control"> Avança </div>
</div>
<div class="wrapper">
<div class="scrolls" id="scroll1">
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
<img class="imagem" src="http://placehold.it/50x50" />
</div>
</div>
</div>