物品清单上的多轮播

Question

我需要有关如何正确操作的帮助，以使这些幻灯片彼此独立工作。

链接上的演示，下面是链接。

演示在Codepen中 https://codepen.io/anon/pen/axvRXa

也许有人可以为这种解决方案提供另一种选择。我知道解决方案可能非常简单，但是我不太了解JS

jQuery(document).ready(function() {
		var 
		slider = document.getElementById('slider'),
		sliderItems = document.getElementById('items'),
		prev = document.getElementById('prev'),
		next = document.getElementById('next');
		
		slide(slider, sliderItems, prev, next);
		
		function slide(wrapper, items, prev, next) {
			var posX1 = 0,
			posX2 = 0,
			posInitial,
			posFinal,
			threshold = 100,
			slides = items.getElementsByClassName('slide'),
			slidesLength = slides.length,
			slideSize = items.getElementsByClassName('slide')[0].offsetWidth,
			firstSlide = slides[0],
			lastSlide = slides[slidesLength - 1],
			cloneFirst = firstSlide.cloneNode(true),
			cloneLast = lastSlide.cloneNode(true),
			index = 0,
			allowShift = true;
			
			// Clone first and last slide
			items.appendChild(cloneFirst);
			items.insertBefore(cloneLast, firstSlide);
			wrapper.classList.add('loaded');
			
			// Mouse and Touch events
			items.onmousedown = dragStart;
			
			// Touch events
			items.addEventListener('touchstart', dragStart);
			items.addEventListener('touchend', dragEnd);
			items.addEventListener('touchmove', dragAction);
			
			// Click events
			prev.addEventListener('click', function () { shiftSlide(-1) });
			next.addEventListener('click', function () { shiftSlide(1) });
			
			// Transition events
			items.addEventListener('transitionend', checkIndex);
			
			function dragStart (e) {
				e = e || window.event;
				e.preventDefault();
				posInitial = items.offsetLeft;
				
				if (e.type == 'touchstart') {
					posX1 = e.touches[0].clientX;
					} else {
					posX1 = e.clientX;
					document.onmouseup = dragEnd;
					document.onmousemove = dragAction;
				}
			}
			
			function dragAction (e) {
				e = e || window.event;
				
				if (e.type == 'touchmove') {
					posX2 = posX1 - e.touches[0].clientX;
					posX1 = e.touches[0].clientX;
					} else {
					posX2 = posX1 - e.clientX;
					posX1 = e.clientX;
				}
				items.style.left = (items.offsetLeft - posX2) + "px";
			}
			
			function dragEnd (e) {
				posFinal = items.offsetLeft;
				if (posFinal - posInitial < -threshold) {
					shiftSlide(1, 'drag');
					} else if (posFinal - posInitial > threshold) {
					shiftSlide(-1, 'drag');
					} else {
					items.style.left = (posInitial) + "px";
				}
				
				document.onmouseup = null;
				document.onmousemove = null;
			}
			
			function shiftSlide(dir, action) {
				items.classList.add('shifting');
				
				if (allowShift) {
					if (!action) { posInitial = items.offsetLeft; }
					
					if (dir == 1) {
						items.style.left = (posInitial - slideSize) + "px";
						index++;      
						} else if (dir == -1) {
						items.style.left = (posInitial + slideSize) + "px";
						index--;      
					}
				};
				
				allowShift = false;
			}
			
			function checkIndex (){
				items.classList.remove('shifting');
				
				if (index == -1) {
					items.style.left = -(slidesLength * slideSize) + "px";
					index = slidesLength - 1;
				}
				
				if (index == slidesLength) {
					items.style.left = -(1 * slideSize) + "px";
					index = 0;
				}
				
				allowShift = true;
			}
		}
		
	});

body {
    padding: 35px 0;
}
	.item-place {
       margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    height: 225px;
	}
	.slider {
    width: 300px;
    height: 200px;
    position: absolute;
	}
	.wrapper {
	overflow: hidden;
	position: relative;
	background: #222;
	z-index: 1;
	}
	#items {
	width: 10000px;
	position: relative;
	top: 0;
	left: -300px;
	}
	#items.shifting {
	transition: left .2s ease-out;
	}
	.slide {
	width: 300px;
	height: 200px;
	cursor: pointer;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: all 1s;
	position: relative;
	background: #FFCF47;
	}
	.control {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 40px;
	background: #fff;
	border-radius: 20px;
	margin-top: -20px;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
	z-index: 2;
	}
	.prev,
	.next {
	    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
	}
	.prev {
	left: -20px;
	}
	.next {
	right: -20px;
	}
	.prev:active,
	.next:active {
	transform: scale(0.8);
	}

<script
src="http://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div class="container">
<div class="row item-place">
	<div class="col-md-4">
		<div class="gal">
			<div id="slider" class="slider">
				<div class="wrapper">
					<div id="items" class="items">
						<span class="slide">Slide 1</span>
						<span class="slide">Slide 2</span>
						<span class="slide">Slide 3</span>
					</div>
				</div>
				<a id="prev" class="control prev">prev</a>
				<a id="next" class="control next">next</a>
			</div>
		</div>
	</div>
	<div class="col-md-8">
	<h3>
	Examples
	</h3>
	<p>
	The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the   to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
	</p>
	</div>
</div>
<div class="row item-place">
	<div class="col-md-4">
		<div class="gal">
			<div id="slider" class="slider">
				<div class="wrapper">
					<div id="items" class="items">
						<span class="slide">Slide 1</span>
						<span class="slide">Slide 2</span>
						<span class="slide">Slide 3</span>
					</div>
				</div>
				<a id="prev" class="control prev">prev</a>
				<a id="next" class="control next">next</a>
			</div>
		</div>
	</div>
		<div class="col-md-8">
	<h3>
	Examples
	</h3>
	<p>
	The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the   to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
	</p>
	</div>
</div>
<div class="row item-place">
	<div class="col-md-4">
		<div class="gal">
			<div id="slider" class="slider">
				<div class="wrapper">
					<div id="items" class="items">
						<span class="slide">Slide 1</span>
						<span class="slide">Slide 2</span>
						<span class="slide">Slide 3</span>
					</div>
				</div>
				<a id="prev" class="control prev">prev</a>
				<a id="next" class="control next">next</a>
			</div>
		</div>
	</div>
	<div class="col-md-8">
	<h3>
	Examples
	</h3>
	<p>
	The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds .modal-open to the   to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.
	</p>
	</div>
</div>
</div>