How can i add Next and Previous button for this slider instead of data-link="n" (remove pagination and add only Next and Prev. button)

user_14755809 0
Viewed 100

Plz anybody brilliant mind person can solve my this problem, Here in this slider i have numbers pagination 1, 2, 3, 4 but i want to remove that and only use Next and Prevvious button for changing slides, and in last slide again start from first slide, This function i want to create in my JS, but i dont know how to do that, after many tries i came here in Exper community, so that i can get help.

plz

How can i add Next and Previous button for this slider instead of data-link="n" (remove pagination and add only Next and Prev. button)

Thanks in Advance, Love you.

.gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2em 0;
}

.gallery-slides {
  position: relative;
  max-width: 1280px;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}

.gallery-slide {
  position: absolute;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-align: center;
          align-items: center;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  -webkit-box-ordinal-group: 3;
          order: 2;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
  -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
          transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  /* ease-in-out */
}
.gallery-slide.is-active {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  -webkit-box-ordinal-group: 2;
          order: 1;
}
.gallery-slide.is-active ~ * {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
                            /* E ~ F an F element preceded by an E element
is-active ~ nextSlide element */
}

.gallery-selectors {
  width: 5%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 2.5%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  flex-wrap: wrap;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: end;
          align-items: flex-end;
}

.gallery-selector {
  border: 1px solid #343434;
  border-radius: 50%;
  padding: 1.2em 1.5em;
  margin-bottom: 0.5em;
  text-decoration: none;
  color: #343434;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}
.gallery-selector:hover {
  background-color: #343434;
  color: #e2e2e2;
}
.gallery-selector.is-active {
  background-color: #343434;
  color: #e2e2e2;
}

.slide-img {
  -webkit-box-flex: 0;
          flex: 0 0 50%;
}
.slide-img img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.slide-content {
  -webkit-box-flex: 0;
          flex: 0 1 50%;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-left: 2em;
  padding-right: 10%;
}
.slide-content h2 {
  color: #fff;
  font-size: 2.2em;
  line-height: 1;
  margin-top: 0;
}
.slide-content p {
  color: #343434;
  font-size: 1.2em;
  line-height: 1.5em;
}

/* Background mapColor */
.background-teal {
  background-color: #54b3a6;
}

.background-red {
  background-color: #e72b1e;
}

@media only screen and (max-width: 960px) {
  .gallery-slide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
  }

  .slide-img {
    padding-left: 2em;
    padding-right: 15%;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
  }

  .slide-content {
    padding-right: 15%;
    -webkit-box-flex: 0;
            flex: 0 0 auto;
  }
}
@media only screen and (max-width: 640px) {
  .gallery-selectors {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    right: 0;
    bottom: 0;
  }

  .gallery-selector {
    padding: 0.5em 0.8em;
    margin-right: 0.5em;
  }
}
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Flexbox Content Slider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

</head>
<body>
<!-- partial:index.partial.html -->
<section class="gallery background-teal">

 <button onclick="plusSlides(-1)">Pre.❮</button>
<button  id="nextclick" onclick="plusSlides(1)">Next ❯</button>

    <div class="gallery-slides">
        <div class="gallery-slide" data-link="1">   
        <!--slide 1-->
            <div class="slide-img"><img src="https://placeimg.com/650/450/tech">    
            </div>
            <div class="slide-content">
                <h2>Slide 1 Title Here</h2>
                <p>Paragrapgh 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui nisi, vehicula non tortor ut, vehicula iaculis libero. Morbi sagittis, quam nec lobortis accumsan, arcu ante consectetur lorem, sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. 
                </p>
            </div>
        </div>
        <!--slide 2-->
        <div class="gallery-slide" data-link="2">
            <div class="slide-img"><img src="https://placeimg.com/650/450/nature"></div>
            <div class="slide-content">
                <h2>Slide 2 Title Here</h2>
                <p>Paragrapgh 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui nisi, vehicula non tortor ut, vehicula iaculis libero. Morbi sagittis, quam nec lobortis accumsan, arcu ante consectetur lorem, sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. 
                </p>
            </div>
        </div>
        <!--slide 3-->
        <div class="gallery-slide" data-link="3">
            <div class="slide-img"><img src="https://placeimg.com/650/450/people"></div>
            <div class="slide-content">
                <h2>Slide 3 Title Here</h2>
                <p>Paragrapgh 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui nisi, vehicula non tortor ut, vehicula iaculis libero. Morbi sagittis, quam nec lobortis accumsan, arcu ante consectetur lorem, sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. 
                </p>
            </div>
        </div>
        <!--slide 4-->
        <div class="gallery-slide" data-link="4">
            <div class="slide-img"><img src="https://placeimg.com/650/450/animals"></div>
            <div class="slide-content">
                <h2>Slide 4 Title Here</h2>
                <p>Paragrapgh 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui nisi, vehicula non tortor ut, vehicula iaculis libero. Morbi sagittis, quam nec lobortis accumsan, arcu ante consectetur lorem, sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. 
                </p>
            </div>
        </div>
    </div>
    <div class="gallery-selectors"> 
        <a href="#" class="gallery-selector" data-link="1">1</a>
        <a href="#" class="gallery-selector" data-link="2">2</a>
        <a href="#" class="gallery-selector" data-link="3">3</a>
        <a href="#" class="gallery-selector" data-link="4">4</a> 
    </div>
</section>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>





<script>
//Javascript Module Pattern
//app.js
var app = function () {
  var defaults = [];
  return {};


}();
$(function () {
  // new app.gallery();
  $('.gallery').each(function () {
    $(this).data(new app.gallery(this));
  });
});
//myModule
app.gallery = function ($, _, app) {
  var def = function (el, opts) {
    this.$els = {
      'el': $(el) };


    this.options = _.extend({ link: 'data-link' }, opts);
    this.controller = this.$els.el.find('[' + this.options.link + ']');
    // this.$gallery = this.$els.el.find('.gallery-slides');
    // this.$slide = this.$els.el.find('.gallery-slide');

    this.states = {
      'active': 'is-active' };


    init.call(this);
  };
  var init = function () {
    this.bind();
  };
  def.prototype = {
    bind: function () {
      console.log('gallery loaded');

      var self = this;

      this.setActive(1);
      this.controller.on('click', _.bind(this.slideNext, this));
    },

    slideNext: function (ev) {
      var i = $(ev.currentTarget).attr(this.options.link);
      this.setActive(i);
    },

    setActive: function (index) {
      var self = this;
      this.currentActive = index;

      this.controller.removeClass(this.states.active).
      filter(function () {
        return $(this).attr(self.options.link) == index;
      }).addClass(self.states.active);
    } };


  return def;
}(jQuery, _, app);
</script>

</body>
</html>

i have two button here but that function is not working plz help me.

Thanks in Advance, Love you.

css html jquery javascript
1 Answers

Here is your updated code

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Flexbox Content Slider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <style>
    .gallery {
      position: relative;
      width: 100%;
      overflow: hidden;
      padding: 2em 0;
    }

    .gallery-slides {
      position: relative;
      max-width: 1280px;
      width: 100%;
      height: 100vh;
      margin: 0 auto;
    }

    .gallery-slide {
      position: absolute;
      height: 100%;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      flex-direction: row;
      -webkit-box-align: center;
      align-items: center;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      opacity: 0;
      -webkit-box-ordinal-group: 3;
      order: 2;
      -webkit-transition-property: opacity, -webkit-transform;
      transition-property: opacity, -webkit-transform;
      transition-property: transform, opacity;
      transition-property: transform, opacity, -webkit-transform;
      -webkit-transition-duration: 1s;
      transition-duration: 1s;
      -webkit-transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
      transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
      /* ease-in-out */
    }

    .gallery-slide.is-active {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
      -webkit-box-ordinal-group: 2;
      order: 1;
    }

    .gallery-slide.is-active~* {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      /* E ~ F an F element preceded by an E element
is-active ~ nextSlide element */
    }

    .gallery-selectors {
      width: 5%;
      height: 100%;
      position: absolute;
      top: 0;
      right: 2.5%;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: end;
      align-items: flex-end;
    }

    .gallery-selector {
      border: 1px solid #343434;
      border-radius: 50%;
      padding: 1.2em 1.5em;
      margin-bottom: 0.5em;
      text-decoration: none;
      color: #343434;
      -webkit-transition-property: color;
      transition-property: color;
      -webkit-transition-duration: .3s;
      transition-duration: .3s;
    }

    .gallery-selector:hover {
      background-color: #343434;
      color: #e2e2e2;
    }

    .gallery-selector.is-active {
      background-color: #343434;
      color: #e2e2e2;
    }

    .slide-img {
      -webkit-box-flex: 0;
      flex: 0 0 50%;
    }

    .slide-img img {
      max-width: 100%;
      height: auto;
      border-radius: 5px;
    }

    .slide-content {
      -webkit-box-flex: 0;
      flex: 0 1 50%;
      padding-top: 2em;
      padding-bottom: 2em;
      padding-left: 2em;
      padding-right: 10%;
    }

    .slide-content h2 {
      color: #fff;
      font-size: 2.2em;
      line-height: 1;
      margin-top: 0;
    }

    .slide-content p {
      color: #343434;
      font-size: 1.2em;
      line-height: 1.5em;
    }

    /* Background mapColor */
    .background-teal {
      background-color: #54b3a6;
    }

    .background-red {
      background-color: #e72b1e;
    }

    @media only screen and (max-width: 960px) {
      .gallery-slide {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
      }

      .slide-img {
        padding-left: 2em;
        padding-right: 15%;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }

      .slide-content {
        padding-right: 15%;
        -webkit-box-flex: 0;
        flex: 0 0 auto;
      }
    }

    @media only screen and (max-width: 640px) {
      .gallery-selectors {
        width: 100%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        flex-direction: row;
        right: 0;
        bottom: 0;
      }

      .gallery-selector {
        padding: 0.5em 0.8em;
        margin-right: 0.5em;
      }
    }
  </style>
</head>

<body>
  <!-- partial:index.partial.html -->
  <section class="gallery background-teal">
    <button data-btn="prev" class="slider-pagination">Pre.❮</button>
    <button data-btn="next" class="slider-pagination">Next ❯</button>
    <div class="gallery-slides">
      <div class="gallery-slide is-active">
        <!--slide 1-->
        <div class="slide-img"><img src="https://placeimg.com/650/450/tech"></div>
        <div class="slide-content">
          <h2>Slide 1 Title Here</h2>
          <p>Paragrapgh 1: Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Cras dui nisi,
            vehicula non tortor ut,
            vehicula iaculis libero. Morbi sagittis,
            quam nec lobortis accumsan,
            arcu ante consectetur lorem,
            sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
          <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. </p>
        </div>
      </div>
      <!--slide 2-->
      <div class="gallery-slide">
        <div class="slide-img"><img src="https://placeimg.com/650/450/nature"></div>
        <div class="slide-content">
          <h2>Slide 2 Title Here</h2>
          <p>Paragrapgh 1: Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Cras dui nisi,
            vehicula non tortor ut,
            vehicula iaculis libero. Morbi sagittis,
            quam nec lobortis accumsan,
            arcu ante consectetur lorem,
            sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
          <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. </p>
        </div>
      </div>
      <!--slide 3-->
      <div class="gallery-slide">
        <div class="slide-img"><img src="https://placeimg.com/650/450/people"></div>
        <div class="slide-content">
          <h2>Slide 3 Title Here</h2>
          <p>Paragrapgh 1: Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Cras dui nisi,
            vehicula non tortor ut,
            vehicula iaculis libero. Morbi sagittis,
            quam nec lobortis accumsan,
            arcu ante consectetur lorem,
            sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
          <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. </p>
        </div>
      </div>
      <!--slide 4-->
      <div class="gallery-slide">
        <div class="slide-img"><img src="https://placeimg.com/650/450/animals"></div>
        <div class="slide-content">
          <h2>Slide 4 Title Here</h2>
          <p>Paragrapgh 1: Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Cras dui nisi,
            vehicula non tortor ut,
            vehicula iaculis libero. Morbi sagittis,
            quam nec lobortis accumsan,
            arcu ante consectetur lorem,
            sit amet tincidunt nisl enim ut lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
          <p>Paragrapgh 2: Nulla sed est eget nunc molestie ultricies. Aliquam erat volutpat. Morbi lobortis fringilla purus dignissim malesuada. Aenean id consectetur augue. </p>
        </div>
      </div>
    </div>
  </section>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
  <script>
    //Javascript Module Pattern
    //app.js
    var total_slides = $('.gallery-slides .gallery-slide').length;
    var remaining_slides = total_slides - 1;
    $(document).on('click', '.slider-pagination', function() {
      var btn = $(this).attr('id');
      var current_slide = $('.is-active');
      if ($(this).attr('data-btn') == 'next') {
        var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) + 1);
        if (next_slide.hasClass('gallery-slide')) {
          current_slide.removeClass('is-active');
          next_slide.addClass('is-active');
        } else {
          var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - remaining_slides);
          current_slide.removeClass('is-active');
          next_slide.addClass('is-active');
        }

      } else {
        var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - 1);
        if (next_slide.hasClass('gallery-slide')) {
          current_slide.removeClass('is-active');
          next_slide.addClass('is-active');
        } else {
          var next_slide = $(".gallery-slide").eq($(".gallery-slide").index($(current_slide)) - remaining_slides);
          current_slide.removeClass('is-active');
          next_slide.addClass('is-active');
        }
      }
    });

    var app = function() {
      var defaults = [];
      return {};
    }();

    $(function() {
      // new app.gallery();
      $('.gallery').each(function() {
        //$(this).data(new app.gallery(this));
      });
    });

    //myModule
    app.gallery = function($, _, app) {
      var def = function(el, opts) {
        this.$els = {
          'el': $(el)
        };

        this.options = _.extend({
          link: 'data-link'
        }, opts);
        console.log(this.options.link);
        this.controller = this.$els.el.find('.slider-div');
        // this.$gallery = this.$els.el.find('.gallery-slides');
        // this.$slide = this.$els.el.find('.gallery-slide');

        this.states = {
          'active': 'is-active'
        };
        init.call(this);
      };

      var init = function() {
        this.bind();
      };

      def.prototype = {
        bind: function() {
          console.log('gallery loaded');
          var self = this;
          this.setActive(1);
          this.controller.on('click', _.bind(this.slideNext, this));
        },

        slideNext: function(ev) {
          var i = $(ev.currentTarget).attr(this.options.link);
          this.setActive(i);
        },

        setActive: function(index) {
          var self = this;
          this.currentActive = index;

          this.controller.removeClass(this.states.active).filter(function() {
            return $(this).attr(self.options.link) == index;
          }).addClass(self.states.active);
        }
      };
      return def;
    }

    (jQuery, _, app);
  </script>
</body>

</html>
user_23158360
Related