【Swiper】スワイパーの縦幅の中に、画像が隠れてしまう。

Question

具体的なイメージに関しては、画像を見てもらいたいです。
Swiperというスライドショーのライブラリを使い、カルーセルを作っています。

                    <div class="menber__image">
                       <img src="./images/tanaka-icon.png" alt="田中社長">
                    </div>

を画像の「理想」のようにposition:absoluteでマイナス配置しようと思うのですが、どうやら.slider2
の高さを超えると、「現在」のように隠れてしまいます。

対処法
・position:relative と z-indexの調整をしましたが効果なし。

画像の「理想のようにするにはどうすれば良いでしょうか。
よろしくお願いします
。

Swiper.jsはこちら
https://swiperjs.com/

<section class="staff__all">
    <div class="staff__inner">
        <h2>スタッフ一覧</h2>
        <hr class="hr-brown">
        <h3>私たちがWeb活用のお悩みを解決します！</h3>

        <div class="swiper-container slider2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide__wrapper">
                        <div class="menber__image">
                           <img src="./images/tanaka-icon.png" alt="田中社長">
                        </div>

                        <div class="slide__content">
                            <p>キャッチコピー</p>
                            <p>役職名</p>
                            <p>指名</p>
                            
                            <p>ダミーテキスト</p>

                            <a href="#">もっと読む</a>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <img src="./images/IMG_6672.JPG" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/2463ac40a6cc109a24a1880d2c16f541.jpg" alt="">
                </div>
  
            </div>
    
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</section>
コード

.staff__all{
    width: 100%;
    margin: 80px auto 80px;
    text-align: center;
}
.staff__inner{
    width: 1000px;
    margin: 0 auto 0;
}
.slider2{
    height: 460px;
    margin: 0;
    padding: 0;
}
.swiper-slide{
    width: 100%;
    background-color: #EDEDED;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 50;
}
.slide__content{
    width: calc(100% - 50px);
    margin: auto;
}
.menber__image > img{
    width: 148px;
    position: absolute;
    top:-50px;
    z-index: 51;
}
.slide__content > p:nth-of-type(1){
    font-size:1.8rem;
    margin-bottom: 16px;
  }
.slide__content > p:nth-of-type(2){
    font-size:1.4rem;
    margin-bottom: 4px;
  }
.slide__content > p:nth-of-type(3){
  font-size:1.8rem;
  margin-bottom: 16px;
  font-weight: bold;
}
.slide__content > p:nth-of-type(4){
    text-align: left;
    font-size:1.3rem;
    margin-bottom: 32px;
}
.slide__content > a{
    width: 80%;
    padding: 4px 0px 4px;
    display: inline-block;
    background-color: #1a1a1a;
    color:#fff;
    border-radius: 100px;
}
.slide__content > a::after{
    content: "\f0a9";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 8px;
}
/* //スタッフ紹介 */
コード

Answer 1

縦の表示が切れる理由として、 .swiper-containerの部分のcssが

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

の記載になっており、 overflow: hidden;が適応されているためです。

なので、

• 画像がスライドと関係する場所でなければスライドの要素外に要素の配置を行う。(position: absolute;などで位置は合わせる)
• 画像がスライドする場合は .swiper-containerの部分のpadding-topを画像分記載する

をすれば解決すると思います。

Comments

[退会済みユーザー]

ありがとうございます！！無事解決しました！