Logo Slider

by Michael Mandarino

HTML

<div class="infinite-slider-cntr">
	<div class="infinite-slider-wrp">
		<ul class="infinite-slider">
			<li>
				<a href="http://google.com">
					<img src="http://via.placeholder.com/600x300&text=Slide 1" alt="" />
				</a>
			</li>
			<li>
				<img src="http://via.placeholder.com/100x150&text=Slide 2" alt="" />
			</li>
			<li>
				<img src="http://via.placeholder.com/350x25&text=Slide 3" alt="" />
			</li>
			<li>
				<img src="http://via.placeholder.com/350x150&text=Slide 4" alt="" />
			</li>
			<li>
				<a href="http://google.com">
					<img src="http://via.placeholder.com/350x150&text=Slide 5" alt="" />
				</a>
			</li>
			
			
			<li>
				<a href="http://google.com">
					<img src="http://via.placeholder.com/600x300&text=Slide 1" alt="" />
				</a>
			</li>
			<li>
				<img src="http://via.placeholder.com/100x150&text=Slide 2" alt="" />
			</li>
			<li>
				<img src="http://via.placeholder.com/350x25&text=Slide 3" alt="" />
			</li>
			<li>
				<img src="http://via.placeholder.com/350x150&text=Slide 4" alt="" />
			</li>
			<li>
				<a href="http://google.com">
					<img src="http://via.placeholder.com/350x150&text=Slide 5" alt="" />
				</a>
			</li>
		</ul>
	</div>
	<div class="slider-controls">
		<div class="pause">
			pause
		</div>
		<div class="play">
			play
		</div>
	</div>
</div>

SCSS

.infinite-slider-wrp {
	margin: 10px auto;
	height: 300px;
	overflow: hidden;
	position: relative;
}

.infinite-slider {
	animation: bannermove 30s linear infinite;
	display: flex;
	align-items:center;
	justify-content:center;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	white-space: nowrap;

	&.__pause {
		animation-play-state: paused;
	}

	li {
		padding: 0 2rem;
		
		a {
			vertical-align: top;
		}
	}
}

@keyframes bannermove {
	0% {
		transform: translate(0, 0);
	}
	100% {
		transform: translate(-50%, 0);
	}
}

JavaScript

// duplicate the images
// create a div container for each slider
// inside the slide - create a img holder -- bg or img?? 


// math to figure out the animation time.
// math to figure out the minimum amount of slide duplicates (width of image over max width of 1600)


$('.pause').on('click', function(e){
	$('.logo-slider').addClass('__pause')
});
$('.play').on('click', function(e){
	$('.logo-slider').removeClass('__pause')
});