Pure CSS Image Slider

volcanology

Yüzbaşı

448 Mesaj

Tüm Başarılarını Gör

Sitesine slider koymak isteyen arkadaşlar için hazırladığım javascript kod içermeyen sadece css ile hazırladığım image slider

HTML KODLARI

 
  <!doctype html> 
  <html> 
  <head> 
  <meta charset="utf-8"> 
  <title>CSS- ImageSlider by volcanology</title> 
  <link rel="stylesheet" type="text/css" href="style/custom.css"> 
  </head> 
   
  <body> 
  <div id="slider" class="slider"> 
      <label for="slide1"></label> 
      <input type="radio" id="slide1" name="slide" checked> 
      <label for="slide2"></label> 
      <input type="radio" id="slide2" name="slide"> 
      <label for="slide3"></label> 
      <input type="radio" id="slide3" name="slide"> 
      <label for="slide4"></label> 
      <input type="radio" id="slide4" name="slide"> 
      <label for="slide5"></label> 
      <input type="radio" id="slide5" name="slide"> 
      <label for="slide6"></label> 
      <input type="radio" id="slide6" name="slide"> 
      <label for="slide7"></label> 
      <input type="radio" id="slide7" name="slide"> 
      <label for="slide8"></label> 
      <input type="radio" id="slide8" name="slide"> 
      <label for="slide9"></label> 
      <input type="radio" id="slide9" name="slide"> 
      <label for="slide10"></label> 
      <input type="radio" id="slide10" name="slide"> 
       
      <div class="sliderContainer"> 
      	<div class="sliderImg"></div>          
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div>          
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div> 
          <div class="sliderImg"></div>     
      </div> 
  </div> 
  </body> 
  </html>

CSS KODLARI (style/custom.css)

 
  @charset "utf-8"; 
  /*  
  author: Volkan SAĞ 
  version: 1.0 
  e-mail: volkansag@mail.ru 
   
   */ 
  *{margin:0; padding:0; overflow:hidden;} 
  .slider{ 
  	width:640px; 
  	height:360px; 
  	overflow:hidden; 
  	position:absolute; 
  	background-color:#000000; 
  } 
   
  .sliderContainer{ 
  	width:6400px; 
  	height:360px; 
  	transition:transform .5s ease-out; 
  	transform:translateX(0px); 
  } 
   
  .sliderImg{ 
  	width:640px; 
  	height:360px; 
  	float:left; 
  	background-repeat:no-repeat; 
  	background-position:center; 
  	background-size:cover; 
  } 
   
  .sliderImg:nth-child(1){ 
  	background-image:url(../images/1.jpg); 
  } 
   
  .sliderImg:nth-child(2){ 
  	background-image:url(../images/2.jpg); 
  } 
   
  .sliderImg:nth-child(3){ 
  	background-image:url(../images/3.jpg); 
  } 
   
  .sliderImg:nth-child(4){ 
  	background-image:url(../images/4.jpg); 
  } 
   
  .sliderImg:nth-child(5){ 
  	background-image:url(../images/5.jpg); 
  } 
   
  .sliderImg:nth-child(6){ 
  	background-image:url(../images/6.jpg); 
  } 
   
  .sliderImg:nth-child(7){ 
  	background-image:url(../images/7.jpg); 
  } 
   
  .sliderImg:nth-child(8){ 
  	background-image:url(../images/8.jpg); 
  } 
   
  .sliderImg:nth-child(9){ 
  	background-image:url(../images/9.jpg); 
  } 
   
  .sliderImg:nth-child(10){ 
  	background-image:url(../images/10.jpg); 
  } 
   
   
   
  .slider input[type=radio]{ 
  	display:none; 
  } 
   
  .slider label:nth-child(1) + input[type=radio]:checked ~ div{ 
  	transform:translateX(0px); 
  } 
   
  .slider label:nth-child(3) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-640px); 
  } 
   
  .slider label:nth-child(5) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-1280px); 
  } 
   
  .slider label:nth-child(7) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-1920px); 
  } 
   
  .slider label:nth-child(9) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-2560px); 
  } 
   
  .slider label:nth-child(11) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-3200px); 
  } 
   
  .slider label:nth-child(13) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-3840px); 
  } 
   
  .slider label:nth-child(15) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-4480px); 
  } 
   
  .slider label:nth-child(17) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-5120px); 
  } 
   
  .slider label:nth-child(19) + input[type=radio]:checked ~ div{ 
  	transform:translateX(-5760px); 
  } 
   
   
  .slider label{ 
  	position:absolute; 
  	bottom:20px; 
  	width:20px; 
  	height:20px; 
  	background-color:#FFFFFF; 
  	z-index:41; 
  	cursor:pointer; 
  	border-radius:2px; 
  } 
   
  .slider label:hover{ 
  	background-color:#FFFFFF; 
  } 
   
  .slider label:nth-child(1){ 
  	left:197.5px; 
  } 
   
  .slider label:nth-child(3){ 
  	left:222.5px; 
  } 
   
  .slider label:nth-child(5){ 
  	left:247.5px; 
  } 
   
  .slider label:nth-child(7){ 
  	left:272.5px; 
  } 
   
  .slider label:nth-child(9){ 
  	left:297.5px; 
  } 
   
  .slider label:nth-child(11){ 
  	left:322.5px; 
  } 
   
  .slider label:nth-child(13){ 
  	left:347.5px; 
  } 
   
  .slider label:nth-child(15){ 
  	left:372.5px; 
  } 
   
  .slider label:nth-child(17){ 
  	left:397.5px; 
  } 
   
  .slider label:nth-child(19){ 
  	left:422.5px; 
  }

bu linkten indirebilirsiniz

https://yadi.sk/d/pjC8ohziinXgC

Benzer içerikler