Creating an image slider using only CSS3 (Example)

Example :

HTML Code :

<!DOCTYPE html>
<html lang="en-GB"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <title>Example / Creating an image slider using only CSS3 /
HTML & CSS / Textile / Programming languages / Articles / Home -
BASICuse - the home of the best guides and tutorials for every day</title>
          <meta charset="UTF-8">
      <meta name="Robots" content="none">
      <link rel="stylesheet" type="text/css" href="Css Image Slider/Css Image Slider.css">

          <style type="text/css">
#image-slider {
margin: 100px auto;
width: 500px;
}
#slide-frame {
height: 375px;
overflow: hidden;
}
#slides {
height: 375px;
overflow: hidden;
position: relative;
}
#slides img {
position: absolute;
top: 0;
left: -500px;
}
#navigation {
margin: 5px 0 0 0;
text-align: center;
z-index: 10px;
}
#navigation a {
text-decoration: none;
background: #003C72;
padding: 2px 6px;
color: #FFFFFF;
display: inline-block;
}
#navigation a:hover {
background: #0182C4;
}
#slides img {
z-index: 1;
opacity: 0;
/* animation */
transition: all linear 400ms;
-o-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-webkit-transition: all linear 400ms;
}
#slides img:target {
left: 0;
z-index: 5;
opacity: 1;
}
</style>
</head>
<body>
      <div id="page">

<div id="image-slider">
<div id="slide-frame">
<img src="Css Image Slider/nature1.jpg" alt="">
<div id="slides">
<img id="slide1" src="Css Image Slider/nature1.jpg" alt="">
<img id="slide2" src="Css Image Slider/nature2.jpg" alt="">
<img id="slide3" src="Css Image Slider/nature3.jpg" alt="">
<img id="slide4" src="Css Image Slider/nature4.jpg" alt="">
<img id="slide5" src="Css Image Slider/nature5.jpg" alt="">
</div>
</div>
<div id="navigation">
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
<a href="#slide4">4</a>
<a href="#slide5">5</a>
</div>
</div>        </div>

</body></html>

CSS Code :

body{margin:0;background-color:#F5F5F5}div#page{padding:1px 20px;margin:0 auto;width:1190px;background-color:#FFF}div#article-back-bar{position:fixed;right:0;top:0;background-color:#F5F5F5;height:30px;z-index:9999;border:1px solid #003C72}div#article-back-bar a{display:block;float:left}div#article-back-bar img{border:none;display:block}div#article-back-bar .logo{border-right:1px solid #003C72}div#article-back-bar .text{height:30px;line-height:30px;font-size:20px;text-decoration:none;color:#003C72;text-transform:uppercase;font-weight:bold;padding:0 20px}td.debugheader{background-color:#eee;border-top:1px solid #448;border-bottom:1px solid #448;font-size:0.9em;font-family:Arial,Helvetica,sans-serif}pre.debugtransaction{background-color:#f8f6d8}p.comment{background-color:#ff0;font-weight:bold;padding:4px;margin:4px;border:2px dashed;display:block}td.ezsetup_header{background-color:#eee;border-top:1px solid #448;border-bottom:1px solid #448;font-size:120%;font-family:Arial,Helvetica,sans-serif}td.ezsetup_req{font-size:80%;font-family:Arial,Helvetica,sans-serif}.ezsetup_critical{background-color:#eee;border-top:1px solid #448;border-bottom:1px solid #448;font-size:120%;font-family:Arial,Helvetica,sans-serif;font-weight:bold;color:#F00}.ezsetup_uncritical{background-color:#eee;border-top:1px solid #448;border-bottom:1px solid #448;font-size:120%;font-family:Arial,Helvetica,sans-serif;color:#E2A31D}.ezsetup_pass{background-color:#eee;border-top:1px solid #448;border-bottom:1px solid #448;font-size:120%;font-family:Arial,Helvetica,sans-serif;color:#00B500}div.debug-toolbar label{font-weight:normal}#debug{text-align:left;border-top:1px dashed black;padding:0.3em;background-color:#fff}#debug table{border-collapse:collapse}#timingpoints,#timeaccumulators,#debug_resources,#debug_includes,#debug table.debug_resource_usage{border:1px dashed black}#debug table tr.group td{padding-top:0.7em;font-size:0.95em}#debug table tr.group td:first-child{padding-left:0.2em;font-size:1em}#debug table tr.data td{background-color:#fff;border-top:1px solid #448;border-bottom:1px solid #448;font-family:Arial,Helvetica,sans-serif;font-size:0.95em}#debug table tr.data:nth-child(odd) td { background-color:#eee}#debug table + h2,#debug table + h3{margin-top:1em}#debug table.debug_resource_usage th + th,#debug table.debug_resource_usage td + td,table#timeaccumulators th + th,table#timeaccumulators td + td,table#timingpoints th + th,table#timingpoints td + td,table#debug_resources td,table#debug_includes td{padding:0.25em 0.5em 0.25em 0.5em}#debug th{text-align:left}#debug span.debuginfo:after{border:2px solid #23a4f5;border-radius:10px;color:#23a4f5;height:10px;width:10px;line-height:10px;font-size:10px;content:"i";margin-left:5px;padding:0 5px 0 5px;opacity:0.6}#debug span.debuginfo:hover:after { opacity:1}#templateusage tr.data td:first-child,#templateusage tr.data td:nth-child(n+5) { text-align:center}#debug tr.notice td.debugheader span { color:green}#debug tr.warning td.debugheader span { color:orange}#debug tr.error   td.debugheader span { color:red}#debug tr.debug   td.debugheader span { color:brown}#debug tr.timing td.debugheader span { color:blue}#debug tr.strict td.debugheader span { color:purple}

Example Download ....!

HTML code

The image slider consists of several basic elements: "image-slider", "slide-frame", "slides", "navigation". Each element is a tag div with an attribute id of its own name.
The "image-slider" element is a base of the image slider and incorporates all elements.
The "slide-frame" element consists of default image and "slides" element. Default image and "slides" element are used to show the default image if none of the images is selected in the slider on the other hand they are used to show "slides" element when one of the images has been already selected.
The "slides" element contains images for the slider.
The "navigation" element contains links for navigation between slides (images) where each link is a tag a with an anchor name which points to corresponding image (target element).

<div id="image-slider">
  <div id="slide-frame">
    <img src="nature1.jpg" alt="" />
    <div id="slides">
      <img id="slide1" src="nature1.jpg" alt="" />
      <img id="slide2" src="nature2.jpg" alt="" />
      <img id="slide3" src="nature3.jpg" alt="" />
      <img id="slide4" src="nature4.jpg" alt="" />
      <img id="slide5" src="nature5.jpg" alt="" />
    </div>
  </div>
  <div id="navigation">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
    <a href="#slide4">4</a>
    <a href="#slide5">5</a>
  </div>
</div>

CSS code

The following styles are basic and minimal required CSS styles for the image slider without animation and navigation.

#image-slider {
  margin: 100px auto;
  width: 500px;
}

#slide-frame {
  height: 375px;
  overflow: hidden;
}

#slides {
  height: 375px;
  overflow: hidden;
  position: relative;
}

#slides img {
  position: absolute;
  top: 0;
  left: -500px;
}

#navigation {
  margin: 5px 0 0 0;
  text-align: center;
  z-index: 10px;
}

#navigation a {
  text-decoration: none;
  background: #003C72;
  padding: 2px 6px;
  color: #FFFFFF;
  display: inline-block;
}

#navigation a:hover {
  background: #0182C4;
}

In the code above, the width of the "image-slider" element is fixed and equals to the width of one of the images inside the "slides" element.
Also the value of CSS property position is set as relative to the element "slides" and absolute to all its images inside. This makes all the images to be in the same place and overlay each other.
As can be seen for all images inside the element "slides", CSS property left has a negative value which equals to the width of one of the images. It's used to set the initial position of the images, placing them out of the element "slides". It's used for animation when the next slide appears from the left side.
- See more at: http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3#sthash.44bYZrGT.dpuf

Usually image sliders are created in JavaScript, but with release of CSS3 this can be done in CSS3 without JavaScript. An image slider in the current article is quite simple to demonstrate that elaborate things can be achieved keeping the minimum code. - See more at: http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3#sthash.44bYZrGT.dpuffsd

HTML code

<div id="image-slider">
  <div id="slide-frame">
    <img src="nature1.jpg" alt="" />
    <div id="slides">
      <img id="slide1" src="nature1.jpg" alt="" />
      <img id="slide2" src="nature2.jpg" alt="" />
      <img id="slide3" src="nature3.jpg" alt="" />
      <img id="slide4" src="nature4.jpg" alt="" />
      <img id="slide5" src="nature5.jpg" alt="" />
    </div>
  </div>
  <div id="navigation">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
    <a href="#slide4">4</a>
    <a href="#slide5">5</a>
  </div>
</div>

CSS code

The following styles are basic and minimal required CSS styles for the image slider without animation and navigation.

#image-slider {
  margin: 100px auto;
  width: 500px;
}

#slide-frame {
  height: 375px;
  overflow: hidden;
}

#slides {
  height: 375px;
  overflow: hidden;
  position: relative;
}

#slides img {
  position: absolute;
  top: 0;
  left: -500px;
}

#navigation {
  margin: 5px 0 0 0;
  text-align: center;
  z-index: 10px;
}

#navigation a {
  text-decoration: none;
  background: #003C72;
  padding: 2px 6px;
  color: #FFFFFF;
  display: inline-block;
}

#navigation a:hover {
  background: #0182C4;
}

CSS code for animation and navigation

In the following example CSS property transition is used for animation. This is new property which was added in CSS3.
CSS property transition has the following syntax:
- See more at: http://basicuse.net/articles/pl/textile/html_css/creating_an_image_slider_using_only_css3#sthash.44bYZrGT.dpuf

HTML code

<div id="image-slider">
  <div id="slide-frame">
    <img src="nature1.jpg" alt="" />
    <div id="slides">
      <img id="slide1" src="nature1.jpg" alt="" />
      <img id="slide2" src="nature2.jpg" alt="" />
      <img id="slide3" src="nature3.jpg" alt="" />
      <img id="slide4" src="nature4.jpg" alt="" />
      <img id="slide5" src="nature5.jpg" alt="" />
    </div>
  </div>
  <div id="navigation">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
    <a href="#slide4">4</a>
    <a href="#slide5">5</a>
  </div>
</div>

CSS code

The following styles are basic and minimal required CSS styles for the image slider without animation and navigation.

#image-slider {
  margin: 100px auto;
  width: 500px;
}

#slide-frame {
  height: 375px;
  overflow: hidden;
}

#slides {
  height: 375px;
  overflow: hidden;
  position: relative;
}

#slides img {
  position: absolute;
  top: 0;
  left: -500px;
}

#navigation {
  margin: 5px 0 0 0;
  text-align: center;
  z-index: 10px;
}

#navigation a {
  text-decoration: none;
  background: #003C72;
  padding: 2px 6px;
  color: #FFFFFF;
  display: inline-block;
}

#navigation a:hover {
  background: #0182C4;
}

CSS code for animation and navigation

HTML code

<div id="image-slider">
  <div id="slide-frame">
    <img src="nature1.jpg" alt="" />
    <div id="slides">
      <img id="slide1" src="nature1.jpg" alt="" />
      <img id="slide2" src="nature2.jpg" alt="" />
      <img id="slide3" src="nature3.jpg" alt="" />
      <img id="slide4" src="nature4.jpg" alt="" />
      <img id="slide5" src="nature5.jpg" alt="" />
    </div>
  </div>
  <div id="navigation">
    <a href="#slide1">1</a>
    <a href="#slide2">2</a>
    <a href="#slide3">3</a>
    <a href="#slide4">4</a>
    <a href="#slide5">5</a>
  </div>
</div>

CSS code

The following styles are basic and minimal required CSS styles for the image slider without animation and navigation.

#image-slider {
  margin: 100px auto;
  width: 500px;
}

#slide-frame {
  height: 375px;
  overflow: hidden;
}

#slides {
  height: 375px;
  overflow: hidden;
  position: relative;
}

#slides img {
  position: absolute;
  top: 0;
  left: -500px;
}

#navigation {
  margin: 5px 0 0 0;
  text-align: center;
  z-index: 10px;
}

#navigation a {
  text-decoration: none;
  background: #003C72;
  padding: 2px 6px;
  color: #FFFFFF;
  display: inline-block;
}

#navigation a:hover {
  background: #0182C4;
}

Remote Tutor

Pages