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)">❮</a> <a class="next" onclick="plusslides(1)">❯</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
Comments
Post a Comment