JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<section id="home_slideshow">
    <div class="inner">
        <div id="featuredslideshow">
            <div id="slideshow_nav_container">
                <div id="slideshow_nav_center">
                    <a href="#" class="slidenav prev">Previous</a>
                    <a href="#" class="slidenav next">Next</a>
                </div>
            </div>
            <div id="rail_viewport">
                <div class="rail">
                    <div id="slide-1" class="slide">
                        <div class="img img1"></div>
                        <!--<img src="images/sample_slide_01.jpg" alt="Sample Slide 1" />-->
                        <div class="pad">
                            <h2><span>Featured Project:</span>The Banks | Cincinnati, OH</h2>
                            <a href="#" class="cta">View Project</a>
                        </div>
                    </div>
                    <div id="slide-1" class="slide">
                        <div class="img img2"></div>
                        <!--<img src="images/sample_slide_01.jpg" alt="Sample Slide 1" />-->
                        <div class="pad">
                            <h2><span>Featured Project:</span>The Banks | Cincinnati, OH</h2>
                            <a href="#" class="cta">View Project</a>
                        </div>
                    </div>
                    <div id="slide-1" class="slide">
                        <div class="img img3"></div>
                        <!--<img src="images/sample_slide_01.jpg" alt="Sample Slide 1" />-->
                        <div class="pad">
                            <h2><span>Featured Project:</span>The Banks | Cincinnati, OH</h2>
                            <a href="#" class="cta">View Project</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

.img {
    width: 670px;
    /* height: 330px; */
    border: 1px solid yellow;
    box-sizing: border-box;
}

.img1{background-color:red;}
.img2{background-color:green;}
.img3{background-color:blue;}

#home_slideshow .inner {
    border-bottom: solid 1px #56585d;
}

#featuredslideshow {
    display: block;
    width: 1110px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

#rail_viewport {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.rail {
    position: absolute;
    left: 0;
    top: 0;
}

.slide {
    float: left;
}

#featuredslideshow {
    width: 100%;
    height: auto;
}

#featuredslideshow .img {
    max-width: 670px;
    width: 100%;
}

#slideshow_nav_container {
    position: absolute;
    top: 315px;
    width: 100%;
    padding: 5px 0px 0px 0px;
}

#slideshow_nav_center {
    display: table;
    margin: 0 auto;
}

#featuredslideshow .slidenav.prev {
    position: relative;
    margin: 0px 5px 0px 0px;
    float: left;
    left: 0px;
    top: 0px;
    /* background: url(../images/pag_nav.png) 0px 0px; */
    width: 139px;
    height: 30px;
    display: block;
}

#featuredslideshow .slidenav.next {
    position: relative;
    float: left;
    right: 0px;
    top: 0px;
    /* background: url(../images/pag_nav.png) -141px 0px; */
    width: 139px;
    height: 30px;
    display: block;
}

#featuredslideshow h2 {
    width: auto;
    float: none;
}

#featuredslideshow .cta {
    float: none;
    margin: 20px 0px 0px 0px;
    height: 40px;
    line-height: 40px;
}

#featuredslideshow {
    width: 100%;
    height: 330px;
}

#featuredslideshow .img {
    max-width: 670px;
    width: 100%;
}

#slideshow_nav_container {
    position: absolute;
    top: 315px;
    width: 100%;
    padding: 5px 0px 0px 0px;
}

#slideshow_nav_center {
    display: table;
    margin: 0 auto;
}

#featuredslideshow .slidenav.prev {
    position: relative;
    margin: 0px 5px 0px 0px;
    float: left;
    left: 0px;
    top: 0px;
    /*...

JavaScript

var site = {
	initSlideshow:function(){
		totalSlides = $('.slide').length;
		if(curzindex==20){
			slideWidth = $('#rail_viewport').width();
			imgHeight = (49 / 100) * slideWidth;
			slideHeight = $('.slide').height();
			$('#rail_viewport').height(slideHeight);
			$('.slide img').width(slideWidth);
			$('.slide img').height(imgHeight);
		}else{
			slideWidth = $('.slide').width();
			slideHeight = $('.slide').height();	
			$('#rail_viewport').width(slideWidth).height(slideHeight);
		}
		slideCounter = 0;
		slidePosition = 0;
		$('.slide').each(function(i){
			$(this).attr('id','slide-'+i);
			i++	
		});	
		$('.rail').width(slideWidth*totalSlides);	
		this.formatSlideshow();	
	},
	nextSlide:function(){
		if(slideCounter+1>=totalSlides){
			
		}else{
			$('#slide-'+slideCounter).stop(true,true).animate({opacity: '0'},1200, function(){
				$(this).css('opacity','1');
			});
			slideCounter++;
			slidePosition = slideWidth*slideCounter;
			$('.rail').stop(true,true).animate({left: -slidePosition},1000);	
		}
	},
	prevSlide:function(){
		if(slideCounter==0){
			
		}else{
			$('#slide-'+slideCounter).stop(true,true).animate({opacity: '0'},1200, function(){
				$(this).css('opacity','1');
			});
			slideCounter--;
			slidePosition = slideWidth*slideCounter;
			$('.rail').stop(true,true).animate({left: -slidePosition},1000);	
		}	
	},
	formatSlideshow:function(){
		var slideHeight = $('.slide img').height();		
		$('#slideshow_nav_container').css('top',slideHeight);
	},
	resizeSlideshow:function(){
		if(curzindex==20){
			$('#rail_viewport').css('height','').css('width','');
			slideWidth = $('#rail_viewport').width();
			imgHeight = (49 / 100) * slideWidth;
			slideHeight = $('.slide').height();
			$('#rail_viewport').height(slideHeight);
			$('.slide img').width(slideWidth);
			$('.slide img').height(imgHeight);
		}else{
			slideWidth = $('.slide').width();
			slideHeight =...