JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<div class="slideFull">
		<ul>
			<li>
				<img src="http://blog.stranijezici.com/wp-content/uploads/2012/03/Fotolia_4713529_M.jpg" alt="">
				<div class="texto">hola 1</div>
			</li>
			<li>
				<img src="http://2.bp.blogspot.com/-e_wpMD8jqT0/Uv4SbamL_NI/AAAAAAAAEs0/V3pBDERDwMs/s1600/personas+1.jpg" alt="">
				<div class="texto">hola 2</div>
			</li>
			<li>
				<img src="http://g.cdn.ecn.cl/espiritualidad/files/2015/02/personas-felices.jpg" alt="">
				<div class="texto">hola 3</div>
			</li>
		</ul>
	</div>

CSS

.slideFull > ul{
	list-style:none;
}
.slideFull > ul li{
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
  background-size: cover;
}
.slideFull > ul li img{
	display: none;
}
.slideFull > ul li .texto{
	width: 200px;
	background: red;
	color: #fff;
	padding: 10px;
}
.slide-nav{
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 5;

}
.slide-nav > div{
	width: 30px;
	height: 30px;
	float: left;
	margin: 0 5px;
	background: blue;
}

JavaScript

//Este es el plugin  //
 
 
 $(function(){
	jQuery.fn.slideFull = function(settings){

		/*CONFIGURATIONS DEFAULT */
		var settingsDefault = jQuery.extend({
			speed : 5000,
			auto  : true,
			nav   : true
		}, settings);

		this.each(function(){

			var el =  $(this),
			    items =  el.find('li'),
			    i  =  1,
          refreshIntervalId;

      for(var cont = 0; cont < items.length; cont++){
        var img = $(items[cont]).find('img').attr('src');
        $(items[cont]).css("background-image","url('"+img+"')");
      }

      $(items[0]).addClass('current').fadeIn();

      if(settingsDefault.auto == true){
      	speed();
      }

      if(settingsDefault.nav == true){
      	nextPrev();
      }


      /* FUNCTIONS */
      function speed(){
      	refreshIntervalId = setInterval(auto, settingsDefault.speed);
      }


      function auto(){
        $(items).removeClass('current').hide();
        $(items[i]).addClass('current').fadeIn();
        console.log(i)
        
        i = (i + 1) % items.length;   
      }

      function nextPrev(){
      	el.append('<div class="slide-nav"><div class="slide-prev">Prev</div><div class="slide-next">Next</div></div>');
        var next = el.find('.slide-next'),
			      prev = el.find('.slide-prev');

      	$(next).click(function(){
      		// clearInterval(refreshIntervalId);
          auto();
      	});

      	$(prev).click(function(){
          $(items).removeClass('current').hide();
          $(items[i]).addClass('current').fadeIn();
          i = (i == 0 ) ? items.length - 1 : i - 1; 
      	});
      }

		});
	}
});

// asi lo ejecutas
$('.slideFull').slideFull({
  speed : 10000,
  auto  : true,
  nav   : true
})