【发布时间】：2020-12-15 07:13:02
【问题描述】：
请任何聪明的人都可以解决我的这个问题，在这个 slider 我有数字分页 1, 2, 3, 4 但我想删除它，只使用 Next 和 Previous 按钮进行 更改幻灯片，在最后一张幻灯片中再次从第一张幻灯片开始，我想在我的JS 中创建此功能，但我不知道该怎么做，经过多次尝试后我来到了这里在Exper社区中，以便我可以得到帮助。
请
如何为此滑块添加下一个和上一个按钮而不是 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>我这里有两个按钮，但该功能不起作用请帮助我。
在此先感谢，爱你。
【问题讨论】：
-
真是一个很好的问题
-
你好 Ahmad Habib，我检查了这个 github 页面，但是 JS 之间有不同，所以我很困惑，所以请你帮我写一个答案
-
@AhmadHabib 有很好的解决这个问题的文章。
标签： javascript html jquery css