Trio Slider

Simple jQuery slider with autoplay, next and previous buttons.

by Daniel Pegues

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<div class="osiseriesslider" aria-hidden="true">
		
		<div class="osiseriesslider-inner">
			
			<div class="osiseriesslider-txt">
				<div class="osiseriesslider-txt-inner">
					<h2>Lorem</h2>
					
					<h3>Ipsum Dolor</h3>
					
					<p>Lorem ipsum dolor sit amet consecteteuir doli bo si me ilium dolsum bo nerobi laba lipsi unum libre.</p>
				</div>
			</div>
			
		</div>
		
		<div class="osiseriesslider-list">
			
			<div class="osiseriesslide-item">
				<div class="osiseriesslide-item-inner">
					
					<div class="osiseriesslide-item-left"></div>
					
					<div class="osiseriesslide-item-right"></div>
					
					<div class="osiseriesslide-item-main">
						<div class="osiseriesslide-item-main-img"></div>
					</div>
					
				</div>
			</div>
			
		</div>
		
		<div class="osiseriesslider-nav">
			<button type="button" class="osiseriesslider-arrow osiseriesslider-prev prev left" title="View Previous Image">
				<span class="sr-only screen-reader-text">View Previous Image Slide</span>
			</button>
			<button type="button" class="osiseriesslider-arrow osiseriesslider-next next right" title="View Next Image">
				<span class="sr-only screen-reader-text">View Next Image Slide</span>
			</button>
		</div>
		
	</div>

SCSS

html,body {
	width: 100%; height: 100%;
}
body {
	margin: 0;
	padding: 0;
}
*,*::before,*::after {
	margin: 0;
	padding: 0;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Slider Wrapper */
.osiseriesslider {
	position: relative;
	height: 650px;
	overflow: hidden;
	
	/* Import Montserrat */
	@import url('https://fonts.googleapis.com/css?family=Montserrat:500,800');
	
	/* Compliance */
	.sr-only,
	.screen-reader-text {
		position: absolute !important;
		top: -9999em !important;
		left: -9999em !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		}
	
	/* Inner Wrapper */
	.osiseriesslider-inner {
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 2;
		margin: 0 0 0 -585px;
		width: 100%;
		max-width: 1170px;
		height: 100%;
		}
	
	/* Text */
	.osiseriesslider-txt {
		position: relative;
		display: table;
		width: 100%;
		max-width: 460px;
		height: 100%;
		font-family: 'Montserrat', Arial, Helvetica, sans-serif;
		
		.osiseriesslider-txt-inner {
			display: table-cell;
			vertical-align: middle;
			}
		
		h2 {
			margin: 0;
			padding: 0;
			/* color: $color-white; */
			color: #fff;
			font-size: 80px;
			font-weight: bold;
			font-weight: 800;
			letter-spacing: 4px;
			line-height: 80px;
			text-transform: uppercase;
			}
		h3 {
			margin: 0;
			padding: 0 0 10px;
			/* color: $color-white; */
			color: #fff;
			font-size: 38px;
			font-weight: normal;
			font-weight: 500;
			letter-spacing: 4.2px;
			line-height: 38px;
			text-transform: uppercase;
			}
		p {
			margin: 0;
			padding: 15px 0 0;
			/* color: $color-white; */
			color: #fff;
			font-size: 16px;
			font-weight: normal;
			font-weight: 500;
			line-height: 20px;
			}
	}
	
	/* Slide List */
	.osiseriesslider-list {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		
		/* Slide */
		.osiseriesslide-item {
			height: 100%;
			
			.osiseriesslide-item-inner...

JavaScript

var sliderData = {
		"osiseriesslides":[
			{
				"backimage":"https://preview.ibb.co/mYvx6T/img_001.jpg",
				"mainimage":"https://preview.ibb.co/cmeqRT/img_002.jpg"
			},
			{
				"backimage":"https://preview.ibb.co/cmeqRT/img_002.jpg",
				"mainimage":"https://preview.ibb.co/hfUeLo/img_003.jpg"
			},
			{
				"backimage":"https://preview.ibb.co/hfUeLo/img_003.jpg",
				"mainimage":"https://preview.ibb.co/d5CzLo/img_004.jpg"
			},
			{
				"backimage":"https://preview.ibb.co/d5CzLo/img_004.jpg",
				"mainimage":"https://preview.ibb.co/bAEqRT/img_005.jpg"
			},
			{
				"backimage":"https://preview.ibb.co/bAEqRT/img_005.jpg",
				"mainimage":"https://preview.ibb.co/nz91Y8/img_006.jpg"
			},
			{
				"backimage":"https://preview.ibb.co/nz91Y8/img_006.jpg",
				"mainimage":"https://preview.ibb.co/mYvx6T/img_001.jpg"
			}
		]
	};
	
	jQuery(document).ready(function($){
		osiSliderInit();
	});
	
	function osiSliderInit(){
		osiSliderLoader();
	}
	
	function osiSliderLoader(){
		var index = 0;
		var count = sliderData.osiseriesslides.length;
		var dataImg = sliderData.osiseriesslides;
		
		console.log('Number of Slides: ' + count);
		console.log('Main Image: ' + dataImg[0].mainimage);
		console.log('Back Image: ' + dataImg[0].backimage);
		
		// Init: Add Class 'added'
		$('.osiseriesslide-item-main-img,.osiseriesslide-item-left,.osiseriesslide-item-right').addClass('added');
		
		// Init: Load Main Image
		$('.osiseriesslide-item-main-img').css({ backgroundImage: 'url(' + dataImg[0].mainimage + ')' });
		
		// Init: Load Back Images
		$('.osiseriesslide-item-left,.osiseriesslide-item-right').css({ backgroundImage: 'url(' + dataImg[0].backimage + ')' });
		
		// Autoplay Setup
		var autoSlide = undefined,
			slideTimer = function(){
			autoSlide = setInterval(function(){
				if(index != count - 1){
					
					// Forward
					if(index != count - 1){
						index = index + 1;
						
						console.log(index);
						
						// Remove Class 'added' to Old...