Example hero slider with native code.

native-hero.css

#theslider {transition: all .5s ease 0s;}
#theslider .sliderwrap {position: relative;}
	#theslider .slider-arrow {position: relative; display: inline-block; color: #a7a8aa;}
	.no-js #theslider .slider-arrow {display: none;}
	
#theslides {position: relative; /* min-height: 400px; */ z-index: 500;}
	#theslides li {position: absolute; top: 0; left: 0; width: 100%; height: auto; margin-bottom: -8px; text-align: center; opacity: 0; z-index: 0; transition: all 1s ease 0s;}
		#theslides li.active {position: relative; opacity: 1; z-index: 9999;}

.no-js .slider-nav-con {display: none;}
.slider-nav-con {position: absolute; bottom: 5px; width: 100%; background: rgba(0,0,0,0.69); z-index: 2000;}
	.slider-nav-con:before {content: ''; position: absolute; top: -100px; width: 100px; height: 100px; background: url('images/slidernavcorner.png');}
	#slider-nav {position: relative; display: table; margin: 0 auto;}
		
		#slider-nav li {display: inline-block; margin-right: 10px; text-align: center; vertical-align: middle;}
			#slider-nav li:last-child,
			#slider-nav li.last-child {margin-right: 0;}
			#slider-nav li a {display: table-cell; vertical-align: middle; padding: 5px 0; position: relative; height: 100%; color: #fff;}
				#slider-nav li.slide-nav-item {font-size: 24px;}
				#slider-nav li a:hover {color: #aaa;}
				#slider-nav li.active a {color: #fff; font-weight: bold;}

native-hero.html

<div id="theslider" class="container">
	<div class="sliderwrap">
		<ul id="theslides">
			<li><a href="#"><img src="#" /></a></li>
			<li><a href="#"><img src="#" /></a></li>
			<li><a href="#"><img src="#" /></a></li>
			<li><a href="#"><img src="/images/slide1.jpg" /></a></li>
		</ul>
		
		<div class="slider-nav-con">
			<ul id="slider-nav" class="clearfix">
				<li><a class="slider-arrow slider-left" href="#"><i class="icon-left-open"></i></a></li>
				<li class="slide-nav-item"><a href="#">&#9675;</a></li>
				<li class="slide-nav-item"><a href="#">&#9675;</a></li>
				<li class="slide-nav-item"><a href="#">&#9675;</a></li>
				<li><a class="slider-arrow slider-right" href="#"><i class="icon-right-open"></i></a></li>
			</ul>
		</div><!--/slider-nav-con-->
	</div><!--/columns-->
</div><!--/container-->

native-hero.js

function newSlider() {
	strictPause = 0;
	autoSlider();
	jQuery('#theslides li').eq(0).addClass('active');
	jQuery('#slider-nav li.slide-nav-item').eq(0).addClass('active').find('a').text('u25CF');
	
	jQuery('#theslider').hover(function(){
		clearInterval(autoSlide);
		jQuery('#slider-nav').addClass('pause');
		//Fade in a pause icon in nav?
	}, function(){
		if ( strictPause == 0 ) {
			autoSlider();
			jQuery('#slider-nav').removeClass('pause');
		}
	});	
	
	function autoSlider() {
		autoSlide = setInterval(function(){
			theIndex = jQuery('#theslides li.active').index();
			if ( strictPause == 0 ) {
				activateSlider(theIndex, 'next');
			}
		}, 5000);
	}
	
	//Navigation
	jQuery('#slider-nav li.slide-nav-item a').on('click', function(){		
		strictPause = 1;
		jQuery('#slider-nav').removeClass('pause').addClass('stop');
		theIndex = jQuery(this).parent().index();
		activateSlider(theIndex-1, 'goto');
		return false;
	});
	
	//Arrows
	jQuery('.slider-arrow').on('click', function(){
		strictPause = 1;
		jQuery('#slider-nav').removeClass('pause').addClass('stop');
		theIndex = jQuery('#theslides li.active').index();
		if ( jQuery(this).hasClass('slider-right') ) {
			activateSlider(theIndex, 'next');
		} else {
			activateSlider(theIndex, 'prev');
		}
		return false;
	});
	
	function activateSlider(theIndex, buttoned) {
		slideCount = jQuery('#theslides li').length;
		firstHeight = jQuery('#theslides li.active').outerHeight();
		
		if ( buttoned == 'next' ) {
			newIndex = ( theIndex+1 >= slideCount ? 0 : theIndex+1 );
		} else if ( buttoned == 'prev' ) {
			newIndex = ( theIndex-1 <= -1 ? slideCount-1 : theIndex-1 );
		} else {
			newIndex = theIndex;
		}
		
		secondHeight = jQuery('#theslides li').eq(newIndex).outerHeight();
		
		if ( firstHeight >= secondHeight ) { //If the next slide is smaller or equal
			//jQuery('#theslides li').css('height', firstHeight);
		} else { //Else the next slide is larger
			//jQuery('#theslides li').css('height', secondHeight);
		}
		
		jQuery('#theslides li.active').removeClass('active');
		jQuery('#slider-nav li.slide-nav-item.active').removeClass('active').find('a').text('u25CB');
		
		jQuery('#theslides li').eq(newIndex).addClass('active');
		jQuery('#slider-nav li.slide-nav-item').eq(newIndex).addClass('active').find('a').text('u25CF');
		
		setTimeout(function(){
			jQuery('#theslides li').css('height', 'auto');
		}, 700);
	}
}