Millenium

Преимущество данного слайдра в том что он использует только CSS3. Дополнительно можно использовать описание для каждого изображения. Для организации информации будет использоваться неупорядоченный список. Слайды будут переключаться автоматически с помощью анимаций CSS3. 

Установка: 

Ставим следующий код там, где хотим видеть слайдер: 

<div class="slides">  

   <ul> <!-- Слайды -->  

   <li><img src="images/pic1.jpg" alt="image01" />  

   <div>Описание #1</div>  

   </li>  

   <li><img src="images/pic2.jpg" alt="image02" />  

   <div>Описание #2</div>  

   </li>  

   <li><img src="images/pic3.jpg" alt="image03" />  

   <div>Описание #3</div>  

   </li>  

   <li><img src="images/pic4.jpg" alt="image04" />  

   <div>Описание #4</div>  

   </li>  

   </ul>  

  </div>

/* Слайдер */  

  .slides {  

   height:300px;  

   margin:50px auto;  

   overflow:hidden;  

   position:relative;  

   width:900px;  

  }  

  .slides ul {  

   list-style:none;  

   position:relative;  

  }  

  /* Кадры анимации #anim_slides */  

  @-webkit-keyframes anim_slides {  

   0% {  

   opacity:0;  

   }  

   6% {  

   opacity:1;  

   }  

   24% {  

   opacity:1;  

   }  

   30% {  

   opacity:0;  

   }  

   100% {  

   opacity:0;  

   }  

  }  

  @-moz-keyframes anim_slides {  

   0% {  

   opacity:0;  

   }  

   6% {  

   opacity:1;  

   }  

   24% {  

   opacity:1;  

   }  

   30% {  

   opacity:0;  

   }  

   100% {  

   opacity:0;  

   }  

  }  

  .slides ul li {  

   opacity:0;  

   position:absolute;  

   top:0;  

   /* анимация css3 */  

   -webkit-animation-name: anim_slides;  

   -webkit-animation-duration: 24.0s;  

   -webkit-animation-timing-function: linear;  

   -webkit-animation-iteration-count: infinite;  

   -webkit-animation-direction: normal;  

   -webkit-animation-delay: 0;  

   -webkit-animation-play-state: running;  

   -webkit-animation-fill-mode: forwards;  

   -moz-animation-name: anim_slides;  

   -moz-animation-duration: 24.0s;  

   -moz-animation-timing-function: linear;  

   -moz-animation-iteration-count: infinite;  

   -moz-animation-direction: normal;  

   -moz-animation-delay: 0;  

   -moz-animation-play-state: running;  

   -moz-animation-fill-mode: forwards;  

  }  

  /* Задержки css3 */  

  .slides ul li:nth-child(2), .slides ul li:nth-child(2) div {  

   -webkit-animation-delay: 6.0s;  

   -moz-animation-delay: 6.0s;  

  }  

  .slides ul li:nth-child(3), .slides ul li:nth-child(3) div {  

   -webkit-animation-delay: 12.0s;  

   -moz-animation-delay: 12.0s;  

  }  

  .slides ul li:nth-child(4), .slides ul li:nth-child(4) div {  

   -webkit-animation-delay: 18.0s;  

   -moz-animation-delay: 18.0s;  

  }  

  .slides ul li img {  

   display:block;  

  }  

  /* Кадры анимации #anim_titles */  

  @-webkit-keyframes anim_titles {  

   0% {  

   left:100%;  

   opacity:0;  

   }  

   5% {  

   left:10%;  

   opacity:1;  

   }  

   20% {  

   left:10%;  

   opacity:1;  

   }  

   25% {  

   left:100%;  

   opacity:0;  

   }  

   100% {  

   left:100%;  

   opacity:0;  

   }  

  }  

  @-moz-keyframes anim_titles {  

   0% {  

   left:100%;  

   opacity:0;  

   }  

   5% {  

   left:10%;  

   opacity:1;  

   }  

   20% {  

   left:10%;  

   opacity:1;  

   }  

   25% {  

   left:100%;  

   opacity:0;  

   }  

   100% {  

   left:100%;  

   opacity:0;  

   }  

  }  

  .slides ul li div {  

   background-color:#000000;  

   border-radius:10px 10px 10px 10px;  

   box-shadow:0 0 5px #FFFFFF inset;  

   color:#FFFFFF;  

   font-size:26px;  

   left:10%;  

   margin:0 auto;  

   padding:20px;  

   position:absolute;  

   top:50%;  

   width:200px;  

   /* Анимация css3 */  

   -webkit-animation-name: anim_titles;  

   -webkit-animation-duration: 24.0s;  

   -webkit-animation-timing-function: linear;  

   -webkit-animation-iteration-count: infinite;  

   -webkit-animation-direction: normal;  

   -webkit-animation-delay: 0;  

   -webkit-animation-play-state: running;  

   -webkit-animation-fill-mode: forwards;  

   -moz-animation-name: anim_titles;  

   -moz-animation-duration: 24.0s;  

   -moz-animation-timing-function: linear;  

   -moz-animation-iteration-count: infinite;  

   -moz-animation-direction: normal;  

   -moz-animation-delay: 0;  

   -moz-animation-play-state: running;  

   -moz-animation-fill-mode: forwards;  

  }

Дальше качаем папку images и заливаем к себе в ФМ. Чтобы заменить картинки на свои и не тратить время на html, берем название текущих картинок и подписываем свои потом кидаем в папку images и старые заменятся на новые.