CodePen

HTML

            
              <h1> Another basic slider </h1>
<div  tabindex="0" id="slider">
  <figure tabindex="0">
    <img src="http://lorempixel.com/400/300/nature/2" alt="nature"/>
    <figcaption>
      Island sunset
    </figcaption>
  </figure>
    <figure tabindex="0">
    <img src="http://lorempixel.com/400/300/nature/4" alt="nature"/>
    <figcaption>
      autumn
    </figcaption>
  </figure>
    <figure tabindex="0">
    <img src="http://lorempixel.com/400/300/nature/5" alt="nature"/>
    <figcaption>
      Palm tree
    </figcaption>
  </figure>
    <figure tabindex="0">
    <img src="http://lorempixel.com/400/300/nature/6" alt="nature"/>
    <figcaption>
      Flower
    </figcaption>
  </figure>
    <figure tabindex="0">
    <img src="http://lorempixel.com/400/300/nature/7" alt="nature"/>
    <figcaption>
      Orchid
    </figcaption>
  </figure>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
html {

  text-align:center

}
#slider {
  width:460px;
  height:300px;
  padding:1em 0;
  border:solid;
  margin:auto;
  white-space:nowrap;
  overflow:hidden;
  position:relative;
  background:repeating-linear-gradient(45deg,transparent 0 , gray 1em, purple 2em , turquoise 3em, lime 4em, transparent 5em),
    repeating-linear-gradient(-45deg,transparent 0 , gray 1em, purple 2em , turquoise 3em, lime 4em, transparent 5em)
}
#slider:before {
  content:'>';
  font-size:8em;
  line-height:300px;
  width:100%;
  position:absolute;
  left:0;
  color:#123;
  text-align:center;
  text-shadow:  
    0.25em 0,
    0      0 20px ,
    0.25em 0 20px  ;
  text-indent:-0.25em;
  z-index:0;
  cursor:pointer;
}
figure {
  display:inline-block;
  height:300px;
  overflow:hidden;
  margin:0  20px;
  position:absolute;
  z-index:1;
  left:500px;
  transition:0s;
  box-shadow: 0 0 5px 30px;
  background:white;
}
figure:first-of-type {
  z-index:1;
 
}

figure:after {
  content:'>';
}
figure:after {
  width:24px;
  padding:0 1px;
  border:solid;
  border-radius:100%;
  line-height:26px;
  text-align:center;
  background:white;  
  cursor:pointer;
}
figure img,figure:after {
  vertical-align:middle;  
  display:inline-block;
  font-size:40px;

}
figcaption {
  position:absolute;
  padding:0 5px;
  left:0px;
  right:36px;
  max-height:0;
  bottom:0;
  z-index:1;
  background:rgba(200,0,0,0.5);
  color:silver;
    transition:1s;
  box-shadow:0 0 5px white
}
img:hover + figcaption {
  max-height:100%;
  transition:1s;
  padding:5px 5px;
  z-index:3;

}
#slider:focus figure:first-of-type,
figure:focus + figure,
figure:focus:first-of-type + figure{
  left:-5px;
  z-index:1;
  transition:1s;
}
figure:focus  {
  left:-500px;
transition:1.5s
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................