javascript - How to change transition style in a slider from fade to slide -

i've created slideshow put in beggining of website but, new in stuff, i've created connecting snippets i've found in websites, , image transition style fade , want change slide, , don't know how it. can me, please? here slider code:

    <div class="slider" id="main-slider">   <!-- outermost container element -->   <div class="slider-wrapper">     <!-- innermost wrapper element -->     <img src="http://lorempixel.com/1024/400/animals" alt="first" class="slide" style="width:100%" />     <!-- slides -->     <img src="http://lorempixel.com/1024/400/business" alt="second" class="slide" style="width:100%" />     <img src="http://lorempixel.com/1024/400/city" alt="third" class="slide" style="width:100%" />     <a class="prev" onclick="plusslides(-1)">&#10094;</a>     <a class="next" onclick="plusslides(1)">&#10095;</a>   </div> </div>  <script type="text/javascript">   (function() {      function slideshow(element) {       this.el = document.queryselector(element);       this.init();     }      slideshow.prototype = {       init: function() {         this.wrapper = this.el.queryselector(".slider-wrapper");         this.slides = this.el.queryselectorall(".slide");         this.previous = this.el.queryselector(".slider-previous");         this.next = this.el.queryselector(".slider-next");         this.index = 0;         this.total = this.slides.length;         this.timer = null;         this.nextbutton = this.el.queryselector(".next");         this.prevbutton = this.el.queryselector(".prev");          this.action();         this.stopstart();         this.nextslide();         this.prevslide();       },       _slideto: function(slide) {         var currentslide = this.slides[slide];         currentslide.style.opacity = 1;          (var = 0; < this.slides.length; i++) {           var slide = this.slides[i];           if (slide !== currentslide) {             slide.style.opacity = 0;           }         }       },       action: function() {         var self = this;         self.timer = setinterval(function() {           self.index++;           if (self.index == self.slides.length) {             self.index = 0;           }           self._slideto(self.index);          }, 10000);       },       stopstart: function() {         var self = this;         self.el.addeventlistener("mouseover", function() {           clearinterval(self.timer);           self.timer = null;          }, false);         self.el.addeventlistener("mouseout", function() {           self.action();          }, false);       },       nextslide: function() {         var self = this;         self.nextbutton.addeventlistener("click", function() {           clearinterval(self.timer);           self.timer = null;           self.index++;           if (self.index == self.slides.length) {             self.index = 0;           }           self._slideto(self.index);          });       },       prevslide: function() {         var self = this;         self.prevbutton.addeventlistener("click", function() {           clearinterval(self.timer);           self.timer = null;           self.index--;           if (self.index == -1) {             self.index = self.slides.length - 1;           }            self._slideto(self.index);          });       }       };      document.addeventlistener("domcontentloaded", function() {        var slider = new slideshow("#main-slider");      });     })(); </script> <style type="text/css"> html, body {   margin: 0;   padding: 0; }  .slider {   width: 100%; }  .slider-wrapper {   width: 100%;   height: 500px;   position: relative; }  .slide {   float: left;   position: absolute;   width: 100%;   height: 100%;   opacity: 0;   transition: opacity 3s linear; }  .slider-wrapper>.slide:first-child {   opacity: 1; }   /* next & previous buttons */  .prev, .next {   cursor: pointer;   position: absolute;   top: 50%;   width: auto;   margin-top: -22px;   padding: 16px;   color: black;   font-weight: bold;   font-size: 18px;   transition: 0.6s ease;   border-radius: 0 3px 3px 0; }   /* position "next button" right */  .next {   right: 0;   border-radius: 3px 0 0 3px; }  @media screen , (max-width: 480px) {   img {     max-height: 300px   }   .prev,   .next {     top=30%   } } </style> 

thanks,

tom