Tam Ekran Slider Yapımı

Tam Ekran Slider Yapımı

HTML Kodu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<meta name="viewport" content="width=device-width, initial-scale=1">



<title>Slider</title>



<link href="slider.css" rel="stylesheet" type="text/css" />







</head>







<body>



<div class="slideshow-container">







<div class="mySlides fade">







  <img  src="img/1.png" />







</div>







<div class="mySlides fade">







  <img src="img/2.png"/>







</div>







<div class="mySlides fade">







  <img src="img/3.png"/>







</div>







<div class="mySlides fade">







  <img src="img/4.png" />







</div>



<div class="mySlides fade">







  <img src="img/5.png" />







</div>



<div class="mySlides fade">







  <img src="img/6.png"/>







</div>



<div class="mySlides fade">







  <img src="img/7.png" />







</div>



<div class="mySlides fade">







  <img src="img/8.png" />







</div>



<div class="mySlides fade">







  <img src="img/9.png"/>







</div>



<div class="mySlides fade">







  <img src="img/10.png"/>







</div>







<div class="mySlides fade">







  <img src="img/11.png"/>







</div>



<div class="mySlides fade">







  <img src="img/12.jpg" />







</div>



<div class="mySlides fade">







  <img src="img/13.png" />







</div>



<a class="prev" onclick="plusSlides(-1)">&#10094;</a>



<a class="next" onclick="plusSlides(1)">&#10095;</a>







</div>

Script Kodu


  <script>







var slideIndex = 1;



showSlides(slideIndex);







function plusSlides(n) {



  showSlides(slideIndex += n);



}







function currentSlide(n) {



  showSlides(slideIndex = n);



}







function showSlides(n) {



  var i;



  var slides = document.getElementsByClassName("mySlides");



  var dots = document.getElementsByClassName("dot");



  if (n > slides.length) {slideIndex = 1}   



  if (n < 1) {slideIndex = slides.length}



  for (i = 0; i < slides.length; i++) {



      slides[i].style.display = "none"; 



  }



  for (i = 0; i < dots.length; i++) {



      dots[i].className = dots[i].className.replace(" active", "");



  }



  slides[slideIndex-1].style.display = "block"; 



  dots[slideIndex-1].className += " active";



}



</script>



</body>



</html>

CSS Kodu


* {box-sizing:border-box}



body {font-family: Verdana,sans-serif;margin:0}



.mySlides {



   



    //width:100%;



}













.slideshow-container {













  margin: auto;



}













.prev, .next {



  cursor: pointer;



  position: absolute;



  top: 50%;



  width: auto;



  padding: 16px;



  margin-top: -22px;



  color: white;



  font-weight: bold;



  font-size: 18px;



  transition: 0.6s ease;



  border-radius: 0 3px 3px 0;



}













.next {



  right: 0;



  border-radius: 3px 0 0 3px;



}








.prev:hover, .next:hover {



  background-color: rgba(0,0,0,0.8);



}








.fade {



  -webkit-animation-name: fade;



  -webkit-animation-duration: 1.5s;



  animation-name: fade;



  animation-duration: 1.5s;



}








@-webkit-keyframes fade {



  from {opacity: .4}



  to {opacity: 1}



}








@keyframes fade {



  from {opacity: .4}



  to {opacity: 1}



}








@media only screen and (max-width: 300px) {



  .prev, .next,.text {font-size: 11px}



}



img{



  min-width: 100%;



  min-height: 100%;



  position: fixed;



  top: 0;



  left: 0;



   height: 100%!important;



   width:100%!important;



}




Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıtlar (Atom)