html,
    body {
      position: relative;
      height: 100%;
    }

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;

}
.swiper-wrapper{
  height:500px;
   border:1px solid gray;
}
.swiper-slider-box{
  
  color:red;
    height: 500px;
    text-align: center;
    line-height: 500px;
    text-align: center;
  font-size: 100px;
  font-weight:bold;
  text-stroke: 4px #FFF;
   -webkit-text-stroke: 4px #FFF;
  

}

.redback{
  background: #de4439;
} 

.grayback{
  background: #99958F;
}
.greenback{
  background: #20AAA5;
}
.brownback{
 background: #B19775;
}



.swiper-slide {
  background-position: center;
  background-size: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-button-prev,
.swiper-button-next {
  color:red;
  text-stroke:1px #FFF;
    -webkit-text-stroke: 1px #FFF;
  width:80px;
  border:2px solid white;
  background:black;


}
.swiper-button-prev:after,
.swiper-button-next:after{


}


.swiper-button-next{


}

 var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      effect: "fade",
   speed: 300,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
   autoplay: {
        delay: 3000,
      },
   
    });