Kod: /**Genel Yerleşim**/ .slides { padding: 0; width: 700px; height: 400px; display: block; margin: 0 auto; position: relative; } /**Seçilebilme Özelliği**/ .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /**Slayt Girişleri**/ .slides input { display: none; } /**Slayt Alanı**/ .slide-container { display: block; } /**Slayt Bölümü**/ .slide { top: 0; opacity: 0; width: 700px; height: 400px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out; } /**Slayt İçi Görseller**/ .slide img { width: 100%; height: 100%; } /**İleri Geri Yönlendirme**/ .nav label { width: 200px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119); } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 1; } .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } /**Slayt Altı Noktalar**/ .nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); } input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6, input#img-7:checked ~ .nav-dots label#img-dot-7, input#img-8:checked ~ .nav-dots label#img-dot-8, input#img-9:checked ~ .nav-dots label#img-dot-9, input#img-10:checked ~ .nav-dots label#img-dot-10, input#img-11:checked ~ .nav-dots label#img-dot-11, input#img-12:checked ~ .nav-dots label#img-dot-12, input#img-13:checked ~ .nav-dots label#img-dot-13, input#img-14:checked ~ .nav-dots label#img-dot-14, input#img-15:checked ~ .nav-dots label#img-dot-15 { background: rgba(0, 0, 0, 0.8); }
Kod: <ul class="slides"> <input type="radio" name="radio-btn" id="img-1" checked /> <li class="slide-container"> <div class="slide"> <a href="#" _fcksavedurl="#"><img src="https://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" /></a> </div> <div class="nav"> <label for="img-6" class="prev">‹</label> <label for="img-2" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-2" /> <li class="slide-container"> <div class="slide"> <a href="#" _fcksavedurl="#"><img src="https://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" /></a> </div> <div class="nav"> <label for="img-1" class="prev">‹</label> <label for="img-3" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-3" /> <li class="slide-container"> <div class="slide"> <a href="#" _fcksavedurl="#"><img src="https://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" /></a> </div> <div class="nav"> <label for="img-2" class="prev">‹</label> <label for="img-4" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-4" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" /> </div> <div class="nav"> <label for="img-3" class="prev">‹</label> <label for="img-5" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-5" /> <li class="slide-container"> <div class="slide"> <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" _fcksavedurl="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" /> </div> <div class="nav"> <label for="img-4" class="prev">‹</label> <label for="img-6" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-6" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-5" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-7" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-6" class="prev">‹</label> <label for="img-8" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-8" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" /> </div> <div class="nav"> <label for="img-7" class="prev">‹</label> <label for="img-9" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-9" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" /> </div> <div class="nav"> <label for="img-8" class="prev">‹</label> <label for="img-10" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-10" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" /> </div> <div class="nav"> <label for="img-9" class="prev">‹</label> <label for="img-11" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-11" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" /> </div> <div class="nav"> <label for="img-10" class="prev">‹</label> <label for="img-12" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-12" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-11" class="prev">‹</label> <label for="img-13" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-13" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-12" class="prev">‹</label> <label for="img-14" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-14" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-13" class="prev">‹</label> <label for="img-15" class="next">›</label> </div> </li> <input type="radio" name="radio-btn" id="img-15" /> <li class="slide-container"> <div class="slide"> <img src="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" _fcksavedurl="https://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" /> </div> <div class="nav"> <label for="img-14" class="prev">‹</label> <label for="img-1" class="next">›</label> </div> </li> <li class="nav-dots"> <label for="img-1" class="nav-dot" id="img-dot-1"></label> <label for="img-2" class="nav-dot" id="img-dot-2"></label> <label for="img-3" class="nav-dot" id="img-dot-3"></label> <label for="img-4" class="nav-dot" id="img-dot-4"></label> <label for="img-5" class="nav-dot" id="img-dot-5"></label> <label for="img-6" class="nav-dot" id="img-dot-6"></label> <label for="img-7" class="nav-dot" id="img-dot-7"></label> <label for="img-8" class="nav-dot" id="img-dot-8"></label> <label for="img-9" class="nav-dot" id="img-dot-9"></label> <label for="img-10" class="nav-dot" id="img-dot-10"></label> <label for="img-11" class="nav-dot" id="img-dot-11"></label> <label for="img-12" class="nav-dot" id="img-dot-12"></label> <label for="img-13" class="nav-dot" id="img-dot-13"></label> <label for="img-14" class="nav-dot" id="img-dot-14"></label> <label for="img-15" class="nav-dot" id="img-dot-15"></label> </li> </ul><br style="clear:both" />
