script(src='https://code.jquery.com/jquery-3.2.0.min.js')
div(class='container')
	div(class='row')
	
		//The arrows for sliding through
		div(class='arrows', id='left-arrow')
				img(src='https://image.flaticon.com/icons/svg/25/25184.svg')
		div(class='arrows right-arrow')
				img(src='https://image.flaticon.com/icons/svg/25/25446.svg')
				
		//The logos div contains the sections that are being slided through
		//The div is 100.000 px in length
		div(class='logos')
			
			//Section 1
			//Each section has a width of 100vw
			div(class='sections section1')
				img(src='http://previews.123rf.com/images/kaer123/kaer1231509/kaer123150900362/44889138-Animal-design-template-elements-for-your-application-or-company-or-sport-team-branding-Stock-Vector.jpg')
				img(src='http://www.underconsideration.com/brandnew/archives/dell_2016_logo.png')
				img(src='https://image.freepik.com/free-vector/abstract-logo-with-colorful-leaves_1025-695.jpg')
				img(src='http://www.siggraph.org/sites/default/files/org.flat.logo.400_0.jpg')
			
			//Section 2
			div(class='sections section2')
				img(src='https://1.bp.blogspot.com/-A96zKbROnww/UR4MhZAQcYI/AAAAAAAABBs/JaAlp78y6zU/s1600/Jaguar-Logo+(2).jpg')
				img(src='https://s-media-cache-ak0.pinimg.com/564x/a9/b2/9b/a9b29bacdc5a50b1ce94dd4f6c0da4bd.jpg')
				img(src='https://4.bp.blogspot.com/-ZtaW1Bi6Ppc/Tixxn7oYveI/AAAAAAAAA8I/isDUognhEJQ/s1600/Daytona_International_Speedway_logo_2010.jpg')
				img(src='https://image.freepik.com/free-icon/logistics-delivery-truck-in-movement_318-61800.jpg')
			
			//Section 3
			div(class='sections section3')
				img(src='https://s-media-cache-ak0.pinimg.com/originals/92/32/c4/9232c4f4d75ecfa8ce499978792c4dfb.jpg')
				img(src='https://thumbs.dreamstime.com/x/tourism-logo-4687104.jpg')
				img(src='http://www.thebusinesslogo.com/logo-design/travel-tourism/travel-tourism-logos-17.gif')
				img(src='http://creativeroots.org/wp-content/uploads/2011/07/Zambia-tourism-logo.jpg')
		
		//The form that cointains the radio buttons also used for navigation , along with the arrows
		form(class='buttons')
			input(type='radio', name='slides', class='slide-buttons', id='slide1')
			label(for='slide1')
				span
			input(type='radio', name='slides', class='slide-buttons', id='slide2')
			label(for='slide2')
				span
			input(type='radio', name='slides', class='slide-buttons', id='slide3')
			label(for='slide3')
				span
View Compiled
.row
	position: relative
	background-color: pink
	height: 190px
	overflow: hidden

.row .logos
	width: 100000px
	padding-top: 10px
.row .logos .sections
	display: inline-block
	text-align: center
	width: 100vw
.row .logos .sections img
	padding: 0
	display: inline-block
	width: 150px
	vertical-align: middle
	border-radius: 5px
	&:not(last-child)
		margin-right: 3%
	&:hover
		cursor: pointer
		box-shadow: 0px 0px 5px 0px black
		transition: box-shadow 0.5s

.row .arrows
	z-index: 10
	position: absolute
	width: 50px
	height: 100%
	background-color: rgba(58, 51, 53, 0.5)
	box-shadow: 0px 0px 10px 0px black
	&:hover
		cursor: pointer
		transform: translateX(5px)
		transition: transform 0.5s
.row .arrows img
	width: 100%
	height: 50px
	position: aboslute
	margin-top: 70px

.row .right-arrow
	right: -5px
	padding-right: 20px
	&:hover
		transform: translateX(-5px)
		transition: transform 0.5s
#left-arrow
	left: -5px
	padding-left: 20px


.row .buttons
	position: absolute
	display: block
	height: 20px
	width: 120px
	top: 165px
	left: calc(50% - 55px)
	text-align: center
.row .buttons input[type='radio']
	display: none
	& + label span
		display: inline-block
		height: 19px
		width: 19px
		margin: -2px 10px 0 0
		background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -38px top no-repeat
		vertical-align: middle
		position: relative
	&:checked + label span
		background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png') -57px top no-repeat
View Compiled
var slideTracker = 1,
		radioButtons = document.getElementsByClassName('side-buttons');

function slideThrough(element){
	console.log(element);
	if(element.id == 'left-arrow')
		{
			if(slideTracker <= 1)
				{
					slideTracker = 4;
				}
			slideTracker -= 1;
		}else{
			slideTracker += 1;
		}
	switch(slideTracker){
		case 1:
			$('.logos').css('transform', 'translateX(0vw)').css('transition', 'transform 1s');
			$("#slide1").prop("checked", true);
			break;
		case 2:
			$('.logos').css('transform', 'translateX(-100vw)').css('transition', 'transform 1s');
			$("#slide2").prop("checked", true);
			break;
		case 3:
			$('.logos').css('transform', 'translateX(-200vw)').css('transition', 'transform 1s');
			$("#slide3").prop("checked", true);
			break;
		case 4:
			$('.logos').css('transform', 'translateX(0vw)').css('transition', 'transform 1s');
			slideTracker = 1;
			$("#slide1").prop("checked", true);
			break;
	}
}

setInterval(function(){ slideThrough({})}, 5000);

//Loop through the slides using arrows
$('.arrows').click(function(){
	slideThrough(this);
});		

//Loop through the slides using buttons
$('.slide-buttons').click(function(){
	switch(this.id){
			case "slide1":
				$('.logos').css('transform', 'translateX(0vw)').css('transition', 'transform 1s');
				slideTracker = 1;
				break;
		case "slide2":
				$('.logos').css('transform', 'translateX(-100vw)').css('transition', 'transform 1s');
				slideTracker = 2;
				break;
		case "slide3":
				$('.logos').css('transform', 'translateX(-200vw)').css('transition', 'transform 1s');
				slideTracker = 3;
				break;
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.