swiper-button が現れない

#問題点
swiper-button（画像をおくるボタン）が消えました。。.blog .swiper-button-prev ,nextです。
・z-index:10;より重なってみえないわけではない。
・高さ、幅がある。
どうしてでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" type="text/css" href="css/style.css">
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
6    <link rel="stylesheet" href="css/lightbox.css">
7  	<script src="js/lightbox.min.js"></script>
8    <!--lightbox-->
9    <script type="text/javascript" src="js/slider.js"></script>
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
11    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
12    <!--swiper-->
13    <meta charset="utf-8">
14    <title></title>
15  </head>
16  <body>
17    <div class="intro-wrapper">
18      <div class="intro-inner">
19        <h2>Sample theme #2</h2>
20        <p>THis is a sample WordPress theme for beginners.Check it out!</p>
21      </div>
22    </div>
23
24    <div class="photos">
25      <h3 class="text-center">Photo</h3>
26      <div class="pictures row clearfix">
27        <a class="col-4" href="images/aomori.jpg" data-lightbox="青森"><img src="images/aomori.jpg" alt="Loading_page"></a>
28        <a class="col-4" href="#"><img src="images/fukushima.jpg" alt="Loading_page"></a>
29        <a class="col-4" href="#"><img src="images/okinawa.jpg" alt="Loading_page"></a>
30        <a class="col-4" href="#"><img src="images/saga-_Okusu__in_Takeo-s.jpg" alt="Loading_page"></a>
31        <a class="col-4" href="#"><img src="images/shizuoka-Sand_Dunes_at_Nakatajima-s.jpg" alt="Loading_page"></a>
32        <a class="col-4" href="#"><img src="images/yamagata-Ginzan_Onsen-s.jpg" alt="Loading_page"></a>
33      </div>
34    </div>
35
36    <div class="blog">
37      <h3 class="text-center">blog</h3>
38      <div class="swiper-container">
39        <div class="swiper-wrapper">
40          <div class="swiper-slide">
41            <a href="#"><img src="images/dlanor-s-703975-unsplash-1-125x125.jpg" alt=""></a>
42            <p>sample1</p>
43          </div>
44          <div class="swiper-slide">
45            <a href="#"><img src="images/dlanor-s-703975-unsplash-1-125x125.jpg" alt=""></a>
46            <p>sample2</p>
47          </div>
48          <div class="swiper-pagination"></div>
49          <div class="swiper-button-prev"></div>
50          <div class="swiper-button-next"></div>
51        </div>
52      </div>
53    </div>
54
55  </body>
56</html>
57

CSS
1* , *::before , *::after {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7}
8
9/* --------------------------------
10 * イントロセクションCSS（Lesson1）
11 * -------------------------------- */
12
13.intro-wrapper {
14  height: 300px;
15  max-width: 1300px;
16  margin: 0 auto;
17  background-color: #fff;
18  position: relative;
19  top: 0px;
20  padding: 80px 0px 0px 25px;
21}
22
23.intro-inner {
24  width: 80%;
25}
26
27.intro-inner h2 {
28  font-size: 2.0rem;
29  display: block;
30}
31
32/* --------------------------------
33 * ギャラリーセクションCSS(Lesson2)
34 * -------------------------------- */
35img {
36  vertical-align: top;
37  transform: none;
38}
39
40a {
41  margin: 0;
42  text-decoration: none;
43  transition: opacity 0.3s ease-out;
44}
45
46.photos h3 {
47}
48
49.row {
50  max-width: 1245px;
51  margin: 0 auto;
52}
53
54.clearfix::after {
55  content: "";
56  display: block;
57  clear: both;
58}
59
60.pictures a {
61  display: inline-block;
62}
63
64.pictures img {
65  width: 100%;
66  height: 300px;
67  transition: all 0.3s ease-out;
68}
69
70.col-4 {
71  width: 33.3%;
72  float: left;
73}
74
75.text-center {
76  text-align: center;
77}
78
79.pictures a:hover img {
80  opacity: 0.5;
81}
82
83/*reponsive*/
84
85@media (min-width: 480px) and (max-width: 767px) {
86  .col-4 {
87    width: 50%;
88  }
89}
90
91 @media (max-width: 480px) {
92   .col-4 {
93     width: 100%;
94   }
95 }
96
97 .swiper-container {
98   max-width: 1245px;
99   text-align: center;
100   margin-left: auto;
101   margin-right: auto;
102 }
103
104 .swiper-wrapper {
105   width: 50%!important;
106   box-sizing: content-box;
107 }
108
109.swiper-slide {
110  position: relative;
111
112}
113
114.swiper-slide img {
115  width: 100%;
116  height: auto;
117}
118
119.swiper-slide p {
120  color: white;
121  position: absolute;
122  top: 50%;
123  left: 50%;
124  transform: translate(-50%);
125  -webkit-transform: translate(-50%);
126  margin: 0;
127  padding: 0;
128}
129

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

回答1件

ベストアンサー

swiper-button-prev、swiper-button-next は swiper-wrapper の外に出し、swiper-container の子になるようにしてください。

HTML
1      <div class="swiper-container">
2        <div class="swiper-wrapper">
3          <div class="swiper-slide">
4            <a href="#"><img src="images/dlanor-s-703975-unsplash-1-125x125.jpg" alt=""></a>
5            <p>sample1</p>
6          </div>
7          <div class="swiper-slide">
8            <a href="#"><img src="images/dlanor-s-703975-unsplash-1-125x125.jpg" alt=""></a>
9            <p>sample2</p>
10          </div>
11        </div><!-- ここ -->
12          <div class="swiper-pagination"></div>
13          <div class="swiper-button-prev"></div>
14          <div class="swiper-button-next"></div>
15        <!--/div-->
16      </div>