Hello, Guest . ProRips.Do.Am - is a website where you can find uCoz templates , scripts for uCoz and uCoz graphics . Some templates and scripts are taken from other sites and are checked by uu and some templates are rips of other sites. We are also looking for staff. So if you're interested, do not hesitate to make a request on our forum.
2017-09-21, 6:05 AM
newtime20 (Users)
  • Reputation: 0
  • Posts: 0
cecotron (Users)
  • Reputation: 0
  • Posts: 0
ochi_ochko (Users)
  • Reputation: 0
  • Posts: 0
2017-09-21 at 9:50 AMThe slider on pure CSS3

Put the following code where we want to see the slider:

Code
<div class="slides">  
  <ul> <!-- Слайды -->  
  <li><img src="images/pic1.jpg" alt="image01" />  
  <div>Example #1</div>  
  </li>  
  <li><img src="images/pic2.jpg" alt="image02" />  
  <div>Example #2</div>  
  </li>  
  <li><img src="images/pic3.jpg" alt="image03" />  
  <div>Example #3</div>  
  </li>  
  <li><img src="images/pic4.jpg" alt="image04" />  
  <div>Example #4</div>  
  </li>  
  </ul>  
  </div>



Put the following code in your css:

Code
/* Слайдер */  
  .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;  
  }
Author: Guest Category: Slider Views: 370
Attention! To view demo "The slider on pure CSS3" please Login or Register!
Downloads: Comments: 0
Tag-Board
Statistics
Total online: 1
Guests: 1
Users: 0
Total users: 94
Users Online
Our Visitors Today ()
88x31
Free BackLink