スライダーの挙動について

スライダーの矢印なのですが、一枚目が表示されている時は左矢印を隠したいと思っているのですが、両方表示されてしまいます　一度、二枚目に切り替えて一枚目に戻すと左矢印が隠れます
$(".slide-button").show();の位置を変えてみたりセレクタを変えてみたりしましたが上手くいきません

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7      <section class="works">
8      <h2 class="about-h2">WORKS</h2>
9      
10    <div class="works-wrapper">
11      <div class="slide slide-wrapper active">
12        <img src="img/kurista_img.png" class="slide-item" >
13        <p class="slide-item">クリ☆スタ コーディング課題の模写</p>
14        <div class="slide-link-wrapper slide-item" >
15            <a href="https://crestadesign.org/cording-first/">元サイト様</a>
16        </div>
17      </div>
18
19        <div class="slide slide-wrapper">
20          <img src="img/isara_img.png" class="slide-item">
21          <p class="slide-item">iSaraの模写</p>
22          <div class="slide-link-wrapper slide-item">
23            <a href="https://isara.life/">元サイト様</a>
24          </div>
25        </div>
26      </div>
27
28      <div class="slide-button-wrapper">
29       <div class="slide-button slide-right">
30         <i class="fas fa-caret-right"></i>
31       </div>
32       <div class="slide-button slide-left">
33         <i class="fas fa-caret-left"></i>
34       </div>
35      </div>
36
37    </section>
38

CSS
1.works {
2  text-align: center;
3  width: 80%;
4  color: #fff;
5  margin: 0 auto;
6  margin-bottom: 70px;
7  background-color: rgba(255, 255, 255, 0.7);
8  position: relative;
9}
10.works h2 {
11  font-size: 3rem;
12  line-height: 2.5;
13  background-color: rgba(0, 0, 0, 0.7);
14  letter-spacing: 1px;
15}
16.works .slide-wrapper img {
17  width: 60%;
18  max-width: 100%;
19  height: auto;
20}
21.works .slide {
22  display: none;
23}
24.works .slide-wrapper p {
25  font-size: 2rem;
26  color: black;
27  letter-spacing: 1px;
28  font-weight: bold;
29}
30.works .slide-wrapper a {
31  font-size: 1.5rem;
32  transition: 0.15s;
33  letter-spacing: 1px;
34}
35.works .slide-wrapper a:hover {
36  background-color: white;
37}
38.works .slide-link-wrapper {
39  display: inline-block;
40}
41.works .active {
42  display: block;
43}
44.works .works-wrapper {
45  padding-top: 50px;
46}
47.works .slide-button-wrapper i {
48  font-size: 5.3rem;
49  color: #172C45;
50}
51.works .slide-right {
52  position: absolute;
53  top: 60%;
54  right: 10%;
55  cursor: pointer;
56}
57.works .slide-left {
58  position: absolute;
59  top: 60%;
60  left: 10%;
61  cursor: pointer;
62}
63.works .slide-item {
64  margin-bottom: 30px;
65}

jQuery
1$(function(){
2$(".slide-button").click(function(){
3  $(".active").removeClass("active");
4
5if($(this).hasClass("slide-right")){
6$(".slide-wrapper").next().addClass("active");
7}
8else{$(".slide-wrapper").prev().addClass("active");}
9})
10
11var slideIndex=$(".slide").index($(".active"));
12
13$(".slide-button").show();
14
15if(slideIndex===0){$(".slide-left").hide();}
16else if(slideIndex===1){$(".slide-right").hide();}
17});

slideIndex===0が成り立っているのでslide-leftは非表示になると思うのですが、、、、

行動規範の内容に同意します

回答1件

ベストアンサー

まず、関数の先頭で左側の矢印を隠してあげる。※これはCSSでもおｋ
クリックイベントの終わりのカッコの位置がおかしかったので、
途中ではなくて、イベントに含めたい位置まで移動しました。
これで動くようになったかなと。※手元での検証は済

jQuery
1$(function(){
2  $(".slide-left").hide();
3  $(".slide-button").click(function(){
4    $(".active").removeClass("active");
5
6    if($(this).hasClass("slide-right")){
7      $(".slide-wrapper").next().addClass("active");
8      }
9      else{$(".slide-wrapper").prev().addClass("active");}
10　//})
11
12  var slideIndex=$(".slide").index($(".active"));
13
14  $(".slide-button").show();
15
16  if(slideIndex===0){$(".slide-left").hide();}
17  else if(slideIndex===1){$(".slide-right").hide();}
18  })//ここへ
19});