JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<link rel="stylesheet" href="http://russelljack.com/SAIC/css/main.css">
<link rel="stylesheet" href="http://russelljack.com/SAIC/css/normalize.css">
<script src="http://russelljack.com/SAIC/js/vendor/modernizr-2.6.2.min.js"></script>
		<div class="container">
	<section id="slider">
		<div class="BGs">
			<div class="bg0 slideBG"></div>
			<div class="bg1 slideBG"></div>
			<div class="bg2 slideBG"></div>
		</div>
		<div class="container">
			<div class="slideCtrl">
				<a href="#" data-trigger="0">1</a>
				<a href="#" data-trigger="1">2</a>
				<a href="#" data-trigger="2">3</a>
			</div>
			<article id="slide0" class="slide">
				<h2>The next generation<br />of SAIC is here.</h2>
				<aside>
					<img src="http://russelljack.com/SAIC/images/slider-aside1.jpg" alt="">
					<h4>We have restructured to better meet your needs.</h4>
					<p>
						SAIC has been tailored to be more focused and competitive for greater efficiency, collaboration, and results—all while lowering costs.  <a href="#">Learn more&raquo;</a>
					</p>
				</aside>
			</article>
			<article id="slide1" class="slide">
				<h2>Smart solutions for a complex world.</h2>
				<aside>
					<img src="http://russelljack.com/SAIC/images/slider-aside2.jpg" alt="">
					<h4>Your mission is our mission.</h4>
					<p>
						With over 44 years of trusted experience, SAIC provides empowerment, efficiency, security, and large-scale collaboration across vast mission and enterprise lifecycles. <a href="#">Learn more&raquo;</a>
					</p>
				</aside>
			</article>
			<article id="slide2" class="slide">
				<h2>Every soldier should be armed with a high-caliber supply chain.</h2>
				<aside>
					<img src="http://russelljack.com/SAIC/images/slider-aside3.jpg" alt="">
					<h4>Success on the front line starts in the back office.</h4>
					<p>
						Our trusted expertise allows us to optimize IT infrastructure, supply-chain demands, and responsiveness for any enterprise on any front line.  <a href="#">Learn...

JavaScript

$.fn.makeItSlide = function(args) {

	var t = this;
	t.curr = 0;
	t.speed = args.speed || 1000;
	t.ctrls = t.find('.slideCtrl a') || [];
	t.bg = t.find('.slideBG') || [];
	t.slides = t.find('.slide') || [];
    t.groupedSelection = t.ctrls.add(t.bg).add(t.slides);
	t.ap = args.autoplay || false;
	t.autoScroll = '';

	$(t.ctrls).on('click', function(e) {
        var trigger = $(e.target).data("trigger");
        t.curr = $.isNumeric(trigger) ? trigger : 0;
		t.updateSlide();
		t.autoScroll = window.clearInterval(t.autoScroll);
		t.startAutoPlay();
	});

	t.updateSlide = function() {
		t.groupedSelection.removeClass('active');
        t.ctrls.eq(t.curr)
            .add(t.bg.eq(t.curr))
                .add(t.slides.eq(t.curr))
                    .addClass('active');	
    }

	t.autoPlay = function() {
		t.curr >= t.ctrls.length-1 ? t.curr = 0 : t.curr++;
		t.updateSlide();
	}

	t.startAutoPlay = function() {
		t.autoScroll = self.setInterval( function() {
			t.autoPlay()
		}, t.speed);
	}

	t.init = function() {
		t.updateSlide();
		if ( t.ap ) {
			t.startAutoPlay();
		}
	}
	t.init();
}




$('#slider').makeItSlide({
	speed: 1000,
	autoplay: true
});

$('#services').makeItSlide({
	speed: 3000,
	autoplay: true
});