Javascript 编辑复制的内容滑块以使其工作

我复制了一个内容滑块，我正在努力让它工作。有人能帮我把它弄好吗？谢谢

我需要的是，当你点击按钮next，next2，next3时，它将显示如下所示的指定文本

HTML:

---

下面是一种使用最少JavaScript制作内容滑块的方法。

s的数量应与

s的数量相同

$（函数（）{
$（'.slider nav a'）。在（'click'，function（）上{
显示内容（$（this.index（））；
});
显示内容（0）；
函数显示内容（索引）{
//使内容可见
$（'.slider.content.visible'）.removeClass（'visible'）；
$（'.slider.content:n类型（'+（索引+1）+'））.addClass（'visible'）；
//将选项卡设置为“选定”
$（'.slider nav a.selected'）.removeClass（'selected'）；
$（'.slider nav a:n类型（'+（index+1）+'））.addClass（'selected'）；
}
});
*{
边际：0px；
填充：0px；
框大小：边框框；
}
html，正文{
背景#596283；
字体：14px Optima，Segoe，'Segoe UI'，Candara，Calibri，Arial，无衬线；
边界：无；
宽度：100%；
身高：100%；
}
身体{
显示器：flex；
对齐项目：居中；
}
.滑块{
利润率：0px 20px；
位置：相对位置；
背景：#有效4；
盒影：0px 0px 40px rgba（0,0,0,0.2）；
宽度：100%；
}
.滑块导航{
显示器：flex；
柔性包装：包装；
对齐项目：拉伸；
背景#AD9897；
颜色：#6C5D5D；
文本阴影：1px1px1pRGBA（255,255,255,0.2）；
宽度：150px；
}
.滑块导航a{
填充：20px 0px；
文本对齐：居中；
宽度：100%；
光标：指针；
}
.滑块导航a：悬停，
.滑块导航a已选定{
背景：6C5D5D；
颜色：#AD9897；
文本阴影：1px1px1pRGBA（0,0,0,0.2）；
}
.slider.content{
填充：20px 0px；
位置：绝对位置；
顶部：0px；
左：150px；
颜色：#6C5D5D；
宽度：0px；
身高：100%；
溢出：隐藏；
不透明度：0；
过渡：不透明度0.1s线性0s；
}
.slider.content.visible{
填充：20px；
宽度：计算（100%-150px）；
溢出：滚动；
不透明度：1；
}
.slider.content p{
垫底：8px；
}
.slider.content p：类型的最后一个{
垫底：0px；
}

内容#1
内容#2
内容#3
内容#1

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个巨大的胜利，不需要我们的爱。Mauris laoreet tincidunt erat，nec mattis tellus luctus ac.Vivamus和pulvinar felis，一对鼠对决。埃尼安·奥纳雷（Aenean ornare），伊普森·维勒·阿利奎特·马蒂斯（ipsum vel aliquet mattis），前尼伯·朗卡斯·埃拉特（ante Nib rhoncus erat），拍卖人《自由之路》（tortor libero quis diam）。这是一个非常重要的问题。整型eget commodo nisi。奎斯克·塞德·法雷特拉·萨皮恩。潜力悬钩子。小百合，发酵剂a ex ac，发酵剂软糖。菲舍勒斯·奎斯·拉齐尼亚·努克。塞德·里苏斯·内克，自由城的威尼斯人，拍卖人萨吉蒂·内克。sem中的Suspendisse hendrerit magna mattis eleifend。亨德雷特酒店

这句话的意思是：“我不知道你的爱是什么。”。塞德·比勒蒂姆·维韦拉车辆。无矢状毛，无毛，无毛。请不要把生命的意义奉献给他人。非猫科软体动物。克拉斯·塞莱里克·福西布斯拍卖行。我们的拍卖人是圣洁的芸香。卢克图斯·里索斯的悬钩子。Nam调味品，最著名的是posuere commodo，自由精英maximus turpis，quis auctor mi risus a mauris。多奈克·鲁特鲁姆、维韦拉·洛博蒂斯、尼西和自由变种、奥古斯都的前庭弧。整径，内生内生，伏隔。塞德·布朗迪特·莫里斯。这是我的宿命。塞德·拉奥里特、迪亚姆·艾库利斯·廷西德蒙、前三体猫的turpis、胡斯托的欧盟智慧品种。不要坐在冰上。库拉比图尔·尼克，美国加州大学，美国加州大学

内容#2

Donec quis tortor vehicula，elit nec拍卖行，consequat urna。库拉比图尔·亨德雷特·伊普苏姆·埃拉特（Curabitur hendrerit ipsum erat）、弗林蒂亚·维利特·拉齐尼（fringilla Vehicle velit lacinia eget）。萨皮安的权杖，以及维塔的权杖。库拉比图尔和乌尔特里斯尼布。孕前和孕期子宫内膜异位。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。他坐在我的座位上，在我的座位上放鞭子

Morbi semper，sem non scelerisque pulvinar，felis sapien accumsan quam，viverra lorem eros et massa。塞德·廷西蒙特·努克。佩伦茨克·森佩尔（semper）对拉奥里特（laoreet）的批评。ullamcorper孕妇的ullamcorper ultricies。在欧盟侵权人的级别上，这是一个很好的解决方案。蒲公英核仁。奎斯克·利古拉·夸姆，阿利夸姆·法雷特拉·埃尼姆·诺恩，塞莱里克·乌兰科佩尔·梅特斯。整型乌兰姆科珀厄洛斯欧洲大矢状体。这是一个很好的例子。不可否认，温和的坐着不可否认，暂时的坐着不可否认。Morbi nec eleifend elit

内容#3

无生命无猫咪。Donec efficitur arcu id turpis拍卖行blandit。它的效率很高。菲塞勒斯·维勒·胡斯托·莱克图斯。Mauris sed lacus ex.In vulputate，tortor ac interdum dapibus，lorem tortor interdum diam，vitae felis nisi id neque。整粒径，紫红色，紫红色

Donec quis ipsum magna。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。埃涅阿斯葡萄是一种发酵剂。在拍卖人泰勒斯（auctor tellus）中，杜伊斯·塞德（Duis sed）是一个秃鹫泰勒斯。不，不，不。在sollicitudin和ullamcorper-enim-mattis公司工作期间。这是一种很好的方法。Mauris mi ex，iaculis坐在amet dui non，faucibus pellentesque eros。Fusce et congue urna，ac ultricies ipsum。这是猫咪的习惯，也是猫咪的口头禅。Aenean eget velit vulputate，Placelat ligula et，maximus mauris。根据conubia nostra和inceptos，分类适用于taciti Socisqu和litora扭矩
<section class="demo">
   <button class="next">Next</button>
   <button class="prev">Next2</button>
   <button class="prev2">Next3</button>
   <div class="container">
      <div style="display: inline-block;" >
         Sample Text
         On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.

         I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.

         - Lavon, Seattle WA
      </div>
      <div>
         Sample Text2
         On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.

         I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.

         - Lavon, Seattle WA
      </div>
      <div>

         Sample Text3
         On a recent trip to Moab, Utah, I noticed someone wearing an Elevate foot brace, he had one on both legs. I asked him about the braces and he told me how happy he was with them. He gave me the contact information where he had purchased them from.

         I ordered one when I returned to Seattle. I have been using the standard in the shoe straps to the calf type of brace. I didnt wear it often because it wasn't easy to put on and it was uncomfortable. It was also hard to drive with the brace on. I use the brace on my right leg, with the brace being stiff it makes it difficult to push the accelerator. With the Elevate I just release the tension on the brace and can push the accelerator with no issues. The Elevate brace is comfortable and easy to put on, I love it.

         - Lavon, Seattle WA
      </div>
   </div>
</section>

.container {
    max-width: 400px;
    background-color: black;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.container div {
    background-color: white;
    width: 100%;
    display: inline-block;
    display: none;
}

.container img {
    width: 100%;
    height: auto;
}

button {
     position: absolute;
}

.next {
     left: 5px;
     width:150px;
     height:100px;
}

.prev {
     left: 5px;
     top:125px;
     width:150px;
     height:100px;
}

.prev2 {
     left: 5px;
     top:235px;
     width:150px;
     height:100px;
}