javascript - 我如何为此 slider 添加下一个和上一个按钮而不是数据链接 ="n"(删除分页并仅添加下一个和上一个按钮)-6ren

javascript - 我如何为此 slider 添加下一个和上一个按钮而不是数据链接 ="n"(删除分页并仅添加下一个和上一个按钮)

转载作者：行者123 更新时间：2023-12-04 03:45:12

Plz 任何聪明的人都可以解决我的这个问题，在这个 slider 中我有数字分页 1, 2, 3, 4 但我想删除它并且仅使用下一张和上一张按钮来更改幻灯片，在最后一张幻灯片中再次从第一张幻灯片开始，我想在我的JS中创建此功能，但我不知道该怎么做，经过多次尝试，我来到 Exper 社区，以便获得帮助。

请问

我如何为这个 slider 添加下一个和上一个按钮而不是 data-link="n"(删除分页并仅添加下一个和上一个按钮)

提前致谢，爱你。

.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>

我这里有两个按钮，但那个功能不起作用，请帮助我。

提前致谢，爱你。

最佳答案

这是您更新后的代码

    <!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>

关于javascript - 我如何为此 slider 添加下一个和上一个按钮而不是数据链接 ="n"(删除分页并仅添加下一个和上一个按钮)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65301472/

文章推荐： android - 导航 Controller fragment 泄漏

文章推荐： linear-regression - 我们应该如何处理高度相关的特征？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 我如何为此 slider 添加下一个和上一个按钮而不是数据链接 ="n"(删除分页并仅添加下一个和上一个按钮)