► ๖ۣۜLINH ๖ۣۜOLIVER ◄

CSS slider – without JS – code 4: http://codeconvey.com/pure-css-image-slider/

This CSS Image Slider is look like any Jquery or JavaScript slider. It floats the images which contain into articlenext to each other and hide the overflow. It animate the class name inner of the div. It have 5 slider images and each image move with left-margin: -100%;. The first image of the slider should say viable so we will set theleft-margin: 0; See example of code below.

#slide1:checked ~ #cc-slides .inner { margin-left:0; }
#slide2:checked ~ #cc-slides .inner { margin-left:-100%; }
#slide3:checked ~ #cc-slides .inner { margin-left:-200%; }
#slide4:checked ~ #cc-slides .inner { margin-left:-300%; }
#slide5:checked ~ #cc-slides .inner { margin-left:-400%; }

The click function of left/right arrow, we have used input radio buttons. I have put the radio buttons at the top of the Image Slider and make them hide by using display: none; I also used selectors (~) which make the slider change. When radio buttons will be :checked, the sibling selectors (~) change the slider.

The CSS Image Slider start from ID cc-slider of the (article) and the the each image slide HTML code start from (article) inside the div class name “inner”. Let’s see an example HTML code of one slider image.

HTML OF CSS IMAGE SLIDER

<article>
  <div class="cctooltip">
    <h3>Amazing / Photoshop / Photography</h3>
    <h4>By <a href="#">codeconvey</a></h4>
  </div>
  <img src="images/slide-1.jpg"> 
</article>

In above HTML code you can see a div class name cctooltip, It is add for CSS Tooltip which will show up on the slider image. It is also animated with slider and when slider image move , it will ease-out. See simple code of ease-out below.

.cctooltip {
color: #FFFFFF;
font-style: italic;
line-height: 20px;
margin-top: 250px;
opacity: 0;
position: absolute;
text-align: left;
-webkit-transform: translateZ(0);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}