画像のスライドショーを実装したいのですが
<div class="slider"> を入れると画像が重なって表示されてしまいます どこに入れれば良いですか? アドバイスよろしくお願いします ```ここに言語を入力 <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.slider').bxSlider({ auto: true, pause: 3000, }); }); </script> </head> <body> <section class="swiper-container swiper-slider swiper-variant-1 bg-tuatara" data-loop="true" data-autoplay="false" data-simulate-touch="false" data-slide-effect="slide"> <div class="swiper-wrapper"> <div class="swiper-slide" data-slide-bg="images/TeaOlive.jpg"> <div class="swiper-slide-caption"> <div class="container"> <div class="row"> <div class="col-xl-6"> <h2 data-caption-animate="fadeInUpSmall"></h2> <p class="text-big slider-text" data-caption-animate="fadeInUpSmall" data-caption-delay="100"></p> </div> </div> </div> </div> </div> <div class="swiper-slide" data-slide-bg="images/PinkDogWood.jpg"> <div class="swiper-slide-caption"> <div class="container"> <div class="row"> <div class="col-xl-6"> <h2 data-caption-animate="fadeInUpSmall"></h2> <p class="text-big slider-text" data-caption-animate="fadeInUpSmall" data-caption-delay="100"></p>s </div> </div> </div> </div> </div> <div class="swiper-slide" data-slide-bg="images/IMG_2662.jpg"> <div class="swiper-slide-caption"> <div class="container"> <div class="row"> <div class="col-xl-6"> <h2 data-caption-animate="fadeInUpSmall">自然に囲まれた空間で穏やかな時間を提供します</h2> <p class="text-big slider-text" data-caption-animate="fadeInUpSmall" data-caption-delay="100"></p> </div> </div> </div> </div> </div> </div> <div class="swiper-scrollbar"></div> <div class="swiper-button swiper-button-prev"></div> <div class="swiper-button swiper-button-next"></div> </section> </body> ``` ```css .swiper-container { margin: 0 auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; height: auto; }.swiper-container .swiper-wrapper {
height: auto;
min-height: 34.01vw;
}
@media (min-width: 1600px) {
.swiper-container .swiper-wrapper {
height: auto;
min-height: 696px;
}
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-ms-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
z-index: 1;
display: -ms-flexbox;
display: flex;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
box-sizing: content-box;
-ms-flex-item-align: stretch;
align-self: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
min-height: inherit;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}