How to create buttons and make it work in a slideshow?

Question

I started making my website in Weebly and I wanted to have a slideshow in the front page but I didn't like the drag and drop slideshow provided by Weebly, so I decided to build one in HTML and CSS. I have made this code and now it works as an automatic slideshow... How can I create buttons and make it work in the slideshow I created? Here is the code I've done:

<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%" />
    </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.action();
            this.stopStart();
        },
        _slideTo: function(slide) {
            var currentSlide = this.slides[slide];
            currentSlide.style.opacity = 1;

            for (var i = 0; i < 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);

            }, 3000);
        },
        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);
        }


    };

    document.addEventListener("DOMContentLoaded", function() {

        var slider = new Slideshow("#main-slider");

    });


})();
</script>

CSS:

html, body {
    margin: 0;
    padding: 0;
}
.slider {
    width: 100 % ;
    margin: 2e m auto;

}

.slider - wrapper {
    width: 100 % ;
    height: 400 px;
    position: relative;
}

.slide {
    float: left;
    position: absolute;
    width: 100 % ;
    height: 100 % ;
    opacity: 0;
    transition: opacity 3 s linear;
}

.slider - wrapper > .slide: first - child {
    opacity: 1;
}

Answer 1

Here's a fiddle: https://jsfiddle.net/nosyzv78/3/

      <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%" />
  </div>
  <button class="button slider-previous">Prev</button>
  <button class="button slider-next">Next</button>
</div>

You can add two buttons with classnames, as Korgrue specified, and additionally add click handlers to them that call Next and Previous functions within the slider prototype.

The main two functions in the fiddle to take a look at are these:

Prev: function() {
  var self = this;
  self.index--;
  if (self.index < 0) {
    self.index = self.slides.length - 1;
  }
  self._slideTo(self.index);

},
Next: function() {
      var self = this;
  self.index++;
  if (self.index == self.slides.length) {
    self.index = 0;
  }
  self._slideTo(self.index);
},

And the bindEvents function that binds the click handlers to the buttons:

bindEvents: function() {
var self = this;
  $(self.previous).click(function() {
    self.Prev();
  });
  $(self.next).click(function() {
    self.Next();
  });

}

I stripped the auto-changing functions because they got annoying to deal with.

Answer 2

Just create two buttons and give them the proper classname. You will of course have to position the buttons, but without your HTML it is not possible for us to provide direction on the actual button positioning. If you need help beyond that - please provide your HTML and all CSS that pertains to the Slider element.

 <div class="button slider-previous">Prev</div>
 <div class="button slider-next">Next</div>