JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<h1>Simple jQuery content Slideshow</h1>
  <br />
  <!--Drawer Effect-->
  <h2>Drawer silde down effect</h2>
  <div class="drawer slide_container">
    <div class="slide">
      <img src="http://lorempixum.com/600/300/technics" alt="Une image" />
    </div>
    <div class="slide">
      <h3>Just Checking Mate!</h3>
      <p> It works right Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies </p>
    </div>
    <div class="slide">
      <img src="http://lorempixum.com/600/300/abstract" alt="Une image" />
    </div>
    <div class="slide">
      <img src="http://lorempixum.com/600/300/sports" alt="Une image" />
    </div>
    
  </div>
  
  <!--Fading Effect-->
  <h2>Fading Effect</h2>
  <div class="fader slide_container">
    <div class="slide">
      <img src="http://lorempixum.com/600/300/technics" alt="Une image" />
    </div>
    <div class="slide">
      <h3>Just Checking Mate!</h3>
      <p> It works right Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies </p>
    </div>
    <div class="slide">
      <img src="http://lorempixum.com/600/300/abstract"...

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  h1, h2 {
    text-align:center;
    font-family:arial;
    color:#222;
    text-shadow:1px 0 2px rgba(0,0,0,0.3);
    margin:0;
    padding:0;
  }
   .slide_container{
    width:600px;
    height:300px;
    padding:10px;
    box-shadow:0 0 3px rgba(0,0,0,0.5);
    position:relative;
    margin:30px auto;
    font-family:arial;
    font-size:12px;
    overflow:hidden;
  }
  .slide_container .slide{
    width:600px;
    height:300px;
    text-align:justify;
    overflow:hidden;
  }
  .fader .slide{
    position:absolute; /*For piling slides, so that it causes no jumps */ 
  }

JavaScript

$(function(){
  
  //Drawer Effect
  $('.drawer > .slide:gt(0)').hide(); //hides all slides except the first
  setInterval(function(){
    $('.drawer > .slide:first') //selects the first slide
    .slideUp(500)
    .next()
    .slideDown(500)
    .end()
    .appendTo('.drawer'); //adds it back to the end of the line
  },4000);
  
  //Fader Effect
  $('.fader > .slide:gt(0)').hide();
  setInterval(function(){
    $('.fader> .slide:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('.fader');
  },4000);
  
  $('.slide img').hover(function(){
    $(this).fadeTo(300,0.7);
  },function(){
    $(this).fadeTo(300,1);
  });
});