Javascript 如何为该滑块添加“下一步”和“上一步”按钮而不是“数据链接”；"；（删除分页并仅添加下一个和上一个按钮）
请任何聪明的人都可以解决我的这个问题，在这个滑块中，我有数字分页Javascript 如何为该滑块添加“下一步”和“上一步”按钮而不是“数据链接”；"；（删除分页并仅添加下一个和上一个按钮）,javascript,html,jquery,css,Javascript,Html,Jquery,Css,请任何聪明的人都可以解决我的这个问题，在这个滑块中，我有数字分页1,2,3,4，但我想删除它，只使用下一个和上一个按钮来更改幻灯片，，，在最后一张幻灯片中再次从第一张幻灯片开始，我想在我的JS中创建这个函数，但我不知道怎么做，经过多次尝试，我来到Exper社区，以便获得帮助 plz 如何为该滑块添加下一个和上一个按钮，而不是data link=“n”（删除分页并仅添加下一个和上一个按钮） 提前谢谢，我爱你 .gallery{ 位置：相对位置； 宽度：100%； 溢出：隐藏； 填充：2em 0；
1,2,3,4JSdata link=“n”.gallery{
位置：相对位置；
宽度：100%；
溢出：隐藏；
填充：2em 0；
}
.画廊幻灯片{
位置：相对位置；
最大宽度：1280px；
宽度：100%；
高度：100vh；
保证金：0自动；
}
.画廊幻灯片{
位置：绝对位置；
身高：100%；
显示：-网络工具包盒；
显示器：flex；
-webkit盒方向：水平；
-webkit盒方向：正常；
弯曲方向：行；
-webkit框对齐：居中；
对齐项目：居中；
-webkit转换：translateX（-100%）；
转化：translateX（-100%）；
不透明度：0；
-webkit盒序数组：3；
顺序：2；
-webkit转换属性：不透明度，-webkit转换；
转换属性：不透明度，-webkit转换；
过渡属性：变换、不透明度；
转换属性：转换，不透明度，-webkit转换；
-webkit转换持续时间：1s；
过渡时间：1s；
-webkit过渡计时功能：立方贝塞尔（0.42,0,0.58,1）；
过渡计时功能：立方贝塞尔（0.42,0,0.58,1）；
/*放松*/
}
.gallery-slide.is-active{
-webkit转换：translateX（0）；
变换：translateX（0）；
不透明度：1；
-webkit盒序数组：2；
顺序：1；
}
.gallery-slide.is-active~*{
-webkit转换：translateX（100%）；
转化：translateX（100%）；
/*E~F前接E元素的F元素
是活动的~nextSlide元素*/
}
.图库选择器{
宽度：5%；
身高：100%；
位置：绝对位置；
排名：0；
右：2.5%；
显示：-网络工具包盒；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
柔性包装：包装；
-webkit盒包：中心；
证明内容：中心；
-webkit框对齐：结束；
对齐项目：柔性端；
}
.图库选择器{
边框：1px实心#3434；
边界半径：50%；
填充物：1.2em 1.5em；
边缘底部：0.5em；
文字装饰：无；
颜色：#3434；
-webkit转换属性：颜色；
过渡性质：颜色；
-webkit转换持续时间：.3s；
过渡时间：.3s；
}
.库选择器：悬停{
背景色：#3434；
颜色：#E2；
}
.gallery-selector.is-active{
背景色：#3434；
颜色：#E2；
}
.幻灯片图像{
-webkit-box-flex:0；
弹性：0.50%；
}
.幻灯片img img{
最大宽度：100%；
高度：自动；
边界半径：5px；
}
.幻灯片内容{
-webkit-box-flex:0；
弹性：01 50%；
垫面：2米；
垫底：2米；
左：2米；
右：10%；
}
.幻灯片内容h2{
颜色：#fff；
字体大小：2.2米；
线高：1；
边际上限：0；
}
.幻灯片内容{
颜色：#3434；
字体大小：1.2米；
线高：1.5em；
}
/*背景贴图颜色*/
.背景蓝绿色{
背景色：#54b3a6；
}
.背景红{
背景色：#e72b1e；
}
@仅介质屏幕和（最大宽度：960像素）{
.画廊幻灯片{
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
弯曲方向：立柱；
}
.幻灯片图像{
左：2米；
右：15%；
-webkit-box-flex:0；
flex:0自动；
}
.幻灯片内容{
右：15%；
-webkit-box-flex:0；
flex:0自动；
}
}
@仅介质屏幕和（最大宽度：640像素）{
.图库选择器{
宽度：100%；
-webkit盒方向：水平；
-webkit盒方向：正常；
弯曲方向：行；
右：0；
底部：0；
}
.图库选择器{
填充：0.5em 0.8em；
右边距：0.5em；
}
}
CodePen-Flexbox内容滑块
之前。❮
下一个❯
幻灯片1标题在这里
第1段：洛雷姆·伊普苏姆·多洛·希特·阿梅特，献身于发展精英。不侵权车辆，自由车辆。射手座的病号，是累赘的身体，是圣洁的灵魂，是我们的灵魂。在faucibus中，Interdum和malesuada在第一次同侧前就出名了
第2段：不存在其他分子。阿利奎姆·埃拉特·帕特。莫比·洛博蒂斯·弗林吉亚·珀鲁斯·马莱苏亚达。埃涅阿斯·奥古斯特。
幻灯片2标题在这里
第1段：洛雷姆·伊普苏姆·多洛·希特·阿梅特，献身于发展精英。不侵权车辆，自由车辆。射手座的病号，是累赘的身体，是圣洁的灵魂，是我们的灵魂。在faucibus中，Interdum和malesuada在第一次同侧前就出名了
第2段：不存在其他分子。阿利奎姆·埃拉特·帕特。莫比·洛博蒂斯·弗林吉亚·珀鲁斯·马莱苏亚达。埃涅阿斯·奥古斯特。
幻灯片3标题在这里
第1段：洛雷姆·伊普苏姆·多洛·希特·阿梅特，献身于发展精英。不侵权车辆，自由车辆。M
<!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>