Bs Pazar - Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (4)

Slaytlı Resim ( Image Slider ) Kod ve Önizlemesi (4)

Bedava-Sitem Forumunda dolaşırken tesadüfen İbrahim Gün arkadaşımızın paylaştığı bir

başlıkda 7 Adet Slider kodu bulduk. Bizde bu kodları bs-pazar takipçilerinin işine yarıyacağını

düşünerek paylaşmak istedik. İbrahim Gün'e katkılarından dolayı teşekkürler.

Menü1
Menü2
Menü3
Menü4
Menü5

Kodu Aşağıdaki Kutunun İçinden Alabilirsiniz

<br /> <br /> <br /> <br /> <style type="text/css" media="screen">  .container {      margin: 0 auto;      overflow: hidden;      width: 700px;  }  #content-slider {      height: 335px;      width: 100%;  }  #slider {      background: none repeat scroll 0 0 #000000;      border: 5px solid #FFFFFF;      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);      height: 320px;      margin: 10px auto;      overflow: visible;      position: relative;      width: 680px;  }  #mask {      height: 320px;      overflow: hidden;  }  #slider ul {     margin:0;     padding:0;     position:relative;  }  #slider li {     width:680px;     height:320px;     position:absolute;     top:-325px;     list-style:none;  }   #slider li.firstanimation {     -moz-animation:cycle 25s linear infinite;        -webkit-animation:cycle 25s linear infinite;        }  #slider li.secondanimation {     -moz-animation:cycletwo 25s linear infinite;     -webkit-animation:cycletwo 25s linear infinite;        }  #slider li.thirdanimation {     -moz-animation:cyclethree 25s linear infinite;     -webkit-animation:cyclethree 25s linear infinite;        }  #slider li.fourthanimation {     -moz-animation:cyclefour 25s linear infinite;     -webkit-animation:cyclefour 25s linear infinite;        }  #slider li.fifthanimation {     -moz-animation:cyclefive 25s linear infinite;     -webkit-animation:cyclefive 25s linear infinite;        }   #slider .tooltip {     background:rgba(0,0,0,0.7);     width:300px;     height:60px;     position:relative;     bottom:75px;     left:-320px;     -moz-transition:all 0.3s ease-in-out;     -webkit-transition:all 0.3s ease-in-out;   }  #slider .tooltip h1 {     color:#fff;     font-size:24px;     font-weight:300;     line-height:60px;     padding:0 0 0 20px;  }  #slider li#first:hover .tooltip,  #slider li#second:hover .tooltip,  #slider li#third:hover .tooltip,  #slider li#fourth:hover .tooltip,  #slider li#fifth:hover .tooltip {     left:0px;  }   /* PROGRESS BAR */  .progress-bar {     position:relative;     top:-5px;     width:680px;     height:5px;     background:#000;     -moz-animation:fullexpand 25s ease-out infinite;     -webkit-animation:fullexpand 25s ease-out infinite;  }  /* ANIMATION */  @-moz-keyframes cycle {     0%  { top:0px; }     4%  { top:0px; }     16% { top:0px; opacity:1; z-index:0; }     20% { top:325px; opacity:0; z-index:0; }     21% { top:-325px; opacity:0; z-index:-1; }     92% { top:-325px; opacity:0; z-index:0; }     96% { top:-325px; opacity:0; }     100%{ top:0px; opacity:1; }       }  @-moz-keyframes cycletwo {     0%  { top:-325px; opacity:0; }     16% { top:-325px; opacity:0; }     20% { top:0px; opacity:1; }     24% { top:0px; opacity:1; }     36% { top:0px; opacity:1; z-index:0; }     40% { top:325px; opacity:0; z-index:0; }     41% { top:-325px; opacity:0; z-index:-1; }     100%{ top:-325px; opacity:0; z-index:-1; }  }  @-moz-keyframes cyclethree {     0%  { top:-325px; opacity:0; }     36% { top:-325px; opacity:0; }     40% { top:0px; opacity:1; }     44% { top:0px; opacity:1; }     56% { top:0px; opacity:1; }     60% { top:325px; opacity:0; z-index:0; }     61% { top:-325px; opacity:0; z-index:-1; }     100%{ top:-325px; opacity:0; z-index:-1; }  }  @-moz-keyframes cyclefour {     0%  { top:-325px; opacity:0; }     56% { top:-325px; opacity:0; }     60% { top:0px; opacity:1; }     64% { top:0px; opacity:1; }     76% { top:0px; opacity:1; z-index:0; }     80% { top:325px; opacity:0; z-index:0; }     81% { top:-325px; opacity:0; z-index:-1; }     100%{ top:-325px; opacity:0; z-index:-1; }  }  @-moz-keyframes cyclefive {     0%  { top:-325px; opacity:0; }     76% { top:-325px; opacity:0; }     80% { top:0px; opacity:1; }     84% { top:0px; opacity:1; }     96% { top:0px; opacity:1; z-index:0; }     100%{ top:325px; opacity:0; z-index:0; }  }   @-webkit-keyframes cycle {     0%  { top:0px; }     4%  { top:0px; }     16% { top:0px; opacity:1; z-index:0; }     20% { top:325px; opacity:0; z-index:0; }     21% { top:-325px; opacity:0; z-index:-1; }     50% { top:-325px; opacity:0; z-index:-1; }     92% { top:-325px; opacity:0; z-index:0; }     96% { top:-325px; opacity:0; }     100%{ top:0px; opacity:1; }       }  @-webkit-keyframes cycletwo {     0%  { top:-325px; opacity:0; }     16% { top:-325px; opacity:0; }     20% { top:0px; opacity:1; }     24% { top:0px; opacity:1; }     36% { top:0px; opacity:1; z-index:0; }     40% { top:325px; opacity:0; z-index:0; }     41% { top:-325px; opacity:0; z-index:-1; }      100%{ top:-325px; opacity:0; z-index:-1; }  }  @-webkit-keyframes cyclethree {     0%  { top:-325px; opacity:0; }     36% { top:-325px; opacity:0; }     40% { top:0px; opacity:1; }     44% { top:0px; opacity:1; }     56% { top:0px; opacity:1; z-index:0; }     60% { top:325px; opacity:0; z-index:0; }     61% { top:-325px; opacity:0; z-index:-1; }     100%{ top:-325px; opacity:0; z-index:-1; }  }  @-webkit-keyframes cyclefour {     0%  { top:-325px; opacity:0; }     56% { top:-325px; opacity:0; }     60% { top:0px; opacity:1; }     64% { top:0px; opacity:1; }     76% { top:0px; opacity:1; z-index:0; }     80% { top:325px; opacity:0; z-index:0; }     81% { top:-325px; opacity:0; z-index:-1; }     100%{ top:-325px; opacity:0; z-index:-1; }  }  @-webkit-keyframes cyclefive {     0%  { top:-325px; opacity:0; }     76% { top:-325px; opacity:0; }     80% { top:0px; opacity:1; }     84% { top:0px; opacity:1; }     96% { top:0px; opacity:1; z-index:0; }     100%{ top:325px; opacity:0; z-index:0; }  }   /* ANIMATION BAR */  @-moz-keyframes fullexpand {      0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }      4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }     16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }     17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }     18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }     }  @-webkit-keyframes fullexpand {      0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }      4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }     16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }     17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }     18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }     }  </style> <div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul>     <li id="first" class="firstanimation"><a href="http://dimpost.com" _fcksavedurl="http://dimpost.com">             <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" _fcksavedurl="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Menü1" />             </a>     <div class="tooltip">     <h1>Menü1</h1>     </div>     </li>     <li id="second" class="secondanimation"><a href="#" _fcksavedurl="#">             <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" _fcksavedurl="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Menü2" />             </a>     <div class="tooltip">     <h1>Menü2</h1>     </div>     </li>     <li id="third" class="thirdanimation"><a href="#" _fcksavedurl="#">             <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" _fcksavedurl="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Menü3" />             </a>     <div class="tooltip">     <h1>Menü3</h1>     </div>     </li>     <li id="fourth" class="fourthanimation"><a href="#" _fcksavedurl="#">             <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" _fcksavedurl="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Menü4" />             </a>     <div class="tooltip">     <h1>Menü4</h1>     </div>     </li>     <li id="fifth" class="fifthanimation"><a href="#" _fcksavedurl="#">             <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" _fcksavedurl="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Menü5" />             </a>     <div class="tooltip">     <h1>Menü5</h1>     </div>     </li> </ul> </div> <div class="progress-bar"> </div> </div> </div> </div>