Most of the comments are placed within this fiddle, not too comfortable with SO’s manner of dealing with multi level code, but placing it here as well. Comments held within the code relay most of the changes and their reason, and repeating them here would feel unneeded.
https://jsfiddle.net/Luis_Perez64/qzr9yjud/
window.onload = function(){
//CAROUSEL
let leftSlideBtn = document.querySelectorAll('.nav-left');
let rightSlideBtn = document.querySelectorAll('.nav-right');
let flexElements = document.querySelectorAll('.flex');
let itemPos = [];
let duration = 800;
////////////////////////////////////SLIDE FORWARD////////////////////////////////
for (let i = 0; i < rightSlideBtn.length; i++) {
/*
Instead of dealing with global vars which are more than not warned against,
It comes out better to just pass in your variables.
Reason for the functions is to keep the context of this scope technically global,
and pass in/through the variables cleanly.
*/
rightSlideBtn[i].addEventListener('click', function() {
F_slideHandlers(flexElements[i], i)
});
// NOTE: Commented out the remove event listener from the code below, never resuscribes although it happens only on first pull.
rightSlideBtn[i].addEventListener('mousedown', function() {
F_TransitionError(flexElements[i], i)
});
/*
Using an array to handle your positioning, because there could be multiple elements and each should have their own thought
on what their position is. The manner in which you were seeking to solve this would
require counters, and arithmetic to keep within just one variable.
// NOTE: !!!! This is more than likely the main change that you'd have to make to your initial implementation, but everything else comes in as heavy, personal, recommendations.
*/
itemPos.push(0)
}
function F_slideHandlers(flex, idx) {
let totalFlexItemWidth = flex.children[1].offsetLeft - flex.children[0].offsetLeft;
let F_overflowedWidth = flex.scrollWidth - flex.offsetWidth;
F_slide(flex, totalFlexItemWidth, F_overflowedWidth, idx);
// NOTE: Why are these two functions needed? Adding and removing event listeners
F_btnOff(flex, idx);
F_btnOn(flex, idx);
}
function F_slide(flexItem, flexItemFullwidth, F_overflow, idx) {
itemPos[idx] -= flexItemFullwidth;
for (let i = 0; i < flexItem.children.length; i++) {
flexItem.children[i].style.left = itemPos[idx] + 'px';
flexItem.children[i].style.transitionDuration = duration + 'ms';
}
}
function F_btnOff(flex, idx) {
/* rightSlideBtn[idx] && rightSlideBtn[idx].removeEventListener('click', () => F_slideHandlers(flex, idx)); */
}
function F_btnOn(flex, idx) {
/*
setTimeout(function() {
rightSlideBtn[idx] && rightSlideBtn[idx].addEventListener('click', () => F_slideHandlers(flex, idx));
} , duration);
*/
}
function F_TransitionError(flex, idx) {
F_ErrorFix(flex, idx);
F_fixed(flex, idx);
}
function F_ErrorFix(flexItems, idx) {
for (let i = 0; i < flexItems.length; i++) {
flexItems[i].style.left = itemPos[idx] + 'px';
}
}
function F_fixed(flex, idx) {
// NOTE: I feel the only real reason for this was to fix the overrun caused by multiple event listeners grabbing and mutating that itemPosition variable initially.
for (let i = 0; i < rightSlideBtn.length; i++) {
/* rightSlideBtn[i].removeEventListener('mousedown', () => F_TransitionError(flex, idx)) */
;
}
}
} #wrapper{
background: #f4f4f4;
height: 250px;
width: 100%;
margin-top: 100px;
}
img{
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.content-slider-nav-btn{
position: absolute;
height: 45px;
width: 45px;
border-radius: 50%;
margin-top: 100px;
background: #333;
color: #fff;
z-index: 1;
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.4), 1px 0 1px rgba(0, 0, 0, 0.4);
}
.content-slider-nav-btn:hover {
background: #000;
cursor: pointer;
transform: scale(1.0);
transition: 500ms ease;
}
.content-slider-nav-btn:active {
background: transparent;
cursor: pointer;
transform: scale(1.1);
transition: 500ms ease;
/* box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.2), 1px 2px 10px 2px rgba(0, 0, 0, 0.2); */
}
.content-slider-nav-btn i {
margin-top: 13px;
margin-left: 15px;
font-size: 17px;
}
.nav-left {
left: 10px;
display: none;
}
.nav-right {
right: 10px;
}
.flex {
max-height: 300px;
width: 95%;
background: #fafafa;
margin: 0 auto;
overflow: hidden;
display: flex;
box-shadow: inset 0 0px 1px 0px rgba(0, 0, 0, 0.4), inset 0 0px 1px 0px rgba(0, 0, 0, 0.2);
}
.flex-item {
position: relative;
min-height: 200px;
min-width: 210px;
max-height: 230px;
max-width: 220px;
background: #ddd;
margin-right: 10px;
box-shadow: 1px 0 1px 1px rgba(0, 0, 0, 0.1), 1px 0 1px rgba(0, 0, 0, 0.1);
/* transition-duration: 800ms; */
transition-timing-function: ease-out;
}
.flex-item:last-child {
margin-right: 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>SLIDE FIX</title>
<link rel="stylesheet" href="https://stackoverflow.com/questions/51504957/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<section id="wrapper">
<div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"><</i></div>
<div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right">></i></div>
<div class="flex">
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-0</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-1</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-2</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-3</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-4</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-5</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-6</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-7</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-8</a></h1>
</div>
</div>
</section>
<section id="wrapper">
<div class="content-slider-nav-btn nav-left"><i class="fa fa-arrow-left"><</i></div>
<div class="content-slider-nav-btn nav-right"><i class="fa fa-arrow-right">></i></div>
<div class="flex">
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-0</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-1</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-2</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-3</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-4</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-5</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-6</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-7</a></h1>
</div>
<div class="flex-item">
<h1 class="content-slider-title"><a href="#">item-8</a></h1>
</div>
</div>
</section>
</body>
</html>
solved How to reset a global variable