HTMLで,スライダーの画像の上に、<-前へ　次へ->という画像を一枚進退させるボタンを載せたい。

前提・実現したいこと

javascriptで、HTML内にスライダーを設置しようとしています。
そして、スライダーの画像の上に、<-前へ　次へ->という画像を一枚進退させるボタンを載せたいのですが、うまくいきません。よろしくお願いします。


スライダーの画像の上に、<-前へ　次へ->がうまく乗らない。




```HTML
```HTML

 <div class="slide-wrapper">

        <div class="change-btn-wrapper">
          <div class="change-btn prev-btn">← 前へ</div>
          <div class="change-btn next-btn">次へ →</div>
        </div>
        <ul class="slides">
          <li class="slide active"><a href="https://www.chatwork.com/#!rid104759326"><img src="images/0720e5e36bd5365ad8e4332b4b45e7db_m.jpg"></a></li>
          <li class="slide"><a href="https://newspicks.com/"><img src="images/08e6ea9cac38b30056ad51d6bb1fe0ad_m.jpg"></a></li>
          <li class="slide"><img src="images/1ff1778a5f23c9a691cef3561ab71b01_m.jpg"></li>
          <li class="slide"><img src="images/74efcb3c356bbe1e1b4fc2b7b5c1d1fe_m.jpg"></li>
        </ul>
        <div class="index-btn-wrapper">
          <div class="index-btn">1</div>
          <div class="index-btn">2</div>
          <div class="index-btn">3</div>
          <div class="index-btn">4</div>  
        </div>
          </div>

CSS
1
2.slide-wrapper {
3  text-align: center;
4  width: 960px;
5  margin: 0 auto;
6  color: #5e6f84;
7  padding: 60px 0;
8}
9
10.slide-title {
11  font-size: 40px;
12  margin-bottom: 30px;
13}
14
15.change-btn-wrapper {
16  width: 500px;
17  margin: 20px auto;
18  font-size: 18px;
19}
20
21.change-btn {
22z-index:2;
23}
24
25.change-btn-wrapper:after {
26  content: "";
27  clear: both;
28  display: block;
29}
30
31.prev-btn {
32  cursor: pointer;
33  float: left;
34}
35
36.next-btn {
37  cursor: pointer;
38  float: right;
39}
40
41.slides {
42  padding: 0;
43}
44
45.slide {
46  display: none;
47}
48
49.active {
50  display: block;
51}
52
53.slide img {
54  width: 100%;
55  height: 500px;
56  z-index:-100;
57}
58
59.index-btn-wrapper {
60  font-size: 16px;
61  margin-top: 20px;
62}
63
64.index-btn {
65  display: inline-block;
66  color: #4e90af;
67  background-color: #e0f5ff;
68  width: 40px;
69  padding: 6px 0;
70  margin: 0 5px;
71  border-radius: 3px;
72  cursor: pointer;
73}
74
75.index-btn:hover {
76  color: #fff;
77  background-color: #5cabd0;
78}
79
80```Javascript
81```javascript
82
83$(function() {
84  
85  function toggleChangeBtn() {
86    var slideIndex = $('.slide').index($('.active'));
87    $('.change-btn').show();
88    if (slideIndex == 0) {
89      $('.prev-btn').hide();
90    } else if (slideIndex == 3) {
91      $('.next-btn').hide();
92    }
93  }
94  
95  $('.index-btn').click(function() {
96    $('.active').removeClass('active');
97    var clickedIndex = $('.index-btn').index($(this));
98    $('.slide').eq(clickedIndex).addClass('active');
99    toggleChangeBtn();
100  });
101  
102  $('.change-btn').click(function() {
103    var $displaySlide = $('.active');
104    $displaySlide.removeClass('active');
105    if ($(this).hasClass('next-btn')) {
106      $displaySlide.next().addClass('active');
107    } else {
108      $displaySlide.prev().addClass('active');
109    }
110    toggleChangeBtn();
111  });
112});

試したこと

z-indexとmarginを使用して、画像の全面に<-前へ　次へ->　を移動させようとした。

補足情報（FW/ツールのバージョンなど）

HTML5 CSS3

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

回答1件

ベストアンサー

画像の上部に重ねるのでよろしいでしょうか？
その場合、position:relativeで位置を決めてみてはどうでしょうか？

html
1  <div class="slide-wrapper">
2
3    <div class="slide-area">
4      <ul class="slides">
5        <li><img></li>
6        <li><img></li>
7        <li><img></li>
8      </ul>
9      <div class="change-btn-wrapper">
10        <div class="change-btn prev-btn">← 前へ</div>
11        <div class="change-btn next-btn">次へ →</div>
12      </div><!-- change-btn-wrapper -->
13    </div> <!-- slide-area -->
14
15    <div class="index-btn-wrapper">
16      <div></div>
17    </div> <!-- index-btn-wrapper -->
18
19  </div> <!-- slide-wrapper -->

css
1  .slide-area {
2    position: relative;
3  }
4
5  .change-btn-wrapper {
6    width: 500px;
7    font-size: 18px;
8    position: absolute;
9    top: 20px;
10    left: 25%; /* 調節してください */
11  }