JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<ul class="hero cf">
				<li class="hero-image one active content1">
					
				</li>

				<li class="hero-image two content2">
					
				</li>

				<li class="hero-image three content3">
					
				</li>
			</ul>


			<section class="filmstrip">
				<div class="button arrow previous">
					<span>&lt;</span>
				</div>
				<div class="button ">
					<span data-tab="content1"><img src="http://placehold.it/200x75" alt=""></span>
				</div>
				<div class="button ">
					<span data-tab="content2"><img src="http://placehold.it/200x75" alt=""></span>
				</div>
				<div class="button ">
					<span data-tab="content3"><img src="http://placehold.it/200x75" alt=""></span>
				</div>
				<div class="button arrow next">
					<span>&gt;</span>
				</div>
			</section>
	  

			<div class="guts-wrapper">
				<section class="guts content1 active">
					SLIDE #1 CONTENT GOES HERE
				</section>
				<section class="guts content2">
					SLIDE #2 CONTENT GOES HERE
				</section>
				<section class="guts content3">
					SLIDE #3 CONTENT GOES HERE
				</section>
			</div>
</div>

CSS

.container {
  width: 800px;
  position: relative;
}
.hero {
  width: 800px;
  height: 275px;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.hero-image {
  width: 100%;
  height: 100%;
  background: rebeccapurple;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 2;
}

.hero-image.content1 {
  background: orange;
  height: 275px;
}
.hero-image.content2 {
  background: rebeccapurple;
  height: 275px;
}
.hero-image.content3 {
  background: lightgreen;
  height: 275px;
}
.guts.content1 {
  background: red;
  height: 275px;
}
.guts.content2 {
  background: blue;
  height: 275px;
}
.guts.content3 {
  background: green;
  height: 275px;
}

.hero-image.active {
  opacity: 1;
  z-index: 3;
}

.filmstrip {
  padding: 0;
  height: 10rem;
  background: black;
  position: relative;
  width: 100%;
}
.filmstrip .button {
  *zoom: 1;
  float: left;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: inherit;
  width: 22.5%;
  margin-left: 0%;
  margin-right: 0%;
  height: 10rem;
  position: relative;
  overflow: hidden;
  color: white;
}
.filmstrip .button:before,
.filmstrip .button:after {
  content: '';
  display: table;
}
.filmstrip .button:after {
  clear: both;
}
.filmstrip .button.arrow {
  *zoom: 1;
  float: left;
  clear: none;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  width: 16.25%;
  margin-left: 0%;
  margin-right: 0%;
  font-size: 5rem;
  line-height: 10rem;
}
.filmstrip .button.arrow:before,
.filmstrip .button.arrow:after {
  content: '';
  display: table;
}
.filmstrip .button.arrow:after {
  clear: both;
}
.filmstrip .button.arrow span {
  position: relative;
  top: initial;
  left: initial;
  width: 100%;
  height: 100%;
  color: #fff;
  line-height: 10rem;
  display: block;
}
.filmstrip .button.arrow span i {
  display: block;
  cursor: pointer;
 ...

JavaScript

$('.filmstrip div span').on('click', function(){
		var guts_id = $(this).attr('data-tab');
		$('.filmstrip div span').removeClass('current').addClass('gs');
		$(this).toggleClass('current gs');
		$('.guts, .hero-image').removeClass('active');
		$('.'+guts_id).addClass('active');
	});

	var fSlide = $('li:first', 'ul');
	var	lSlide = $('li:last', 'ul');
	var activeSlide = $('.active');
	var nextSlide = activeSlide.next('li').length ? activeSlide.next('li') : fSlide;
	var prevSlide = activeSlide.prev('li').length ? activeSlide.prev('li') : lSlide;

	$('.next').on('click', function(){
		activeSlide.removeClass('active');
		nextSlide.addClass('active');
	});

	$('.previous').on('click', function(){
		activeSlide.removeClass('active');
		prevSlide.addClass('active');
	});