Q&A
CSSの添付をお願いします！
画像のスライドショーを実装したいのですが
<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;
}
jquery.bxslider.min.js を読み込んでいてますが、swiper-button などの Swiper を使っているようなコードが書かれていることが気になりました。
cssを追加しました
回答1件
0
こんにちは。
こういうことですか？
html
1 <div class="swiper-wrapper slider">
実は、class は一つの要素に複数つけることができるのです。
投稿2020/07/07 07:00
総合スコア36115
ありがとうございます。
実行してみましたがスライドしませんでした。。。
当方の環境では問題なく動作しました。
なので、ご提示いただいていない部分のコードに原因があるか、環境の問題かと思われます。
上手くいかないコードをご提示ください。
↓ご提示のコードを元に作ったサンプルです。
https://jsfiddle.net/Lhankor_Mhy/yrjknsa1/
globalplusさんの環境では上記のページでも、スライドしませんか？
そうであるならば、環境の問題だと思います。
ありがとうございます
上記ページではスライドが確認できましたが自分のではスライドしません。。
cssを追加したのでご確認下さいますか？
ご提示のCSSを試すと、以下のようになりました。
https://jsfiddle.net/Lhankor_Mhy/yrjknsa1/1/
当方では、スライダーが動作しているように見えます。
---
補足依頼欄にも書きましたが、Swiper や Bootstrap らしきクラス名が散見されることは、気にしなくてよいのですか？
＞補足依頼欄にも書きましたが、Swiper や Bootstrap らしきクラス名が散見されることは、気にしなくてよいのですか？
恐らくそれが原因かなと思います。
このファイル類は購入したものでありますのでどこが原因かわからないのでファイルをそのものをご確認して頂くことは出来ますか？
ギガファイルにてファイルをまとめました
https://20.gigafile.nu/0715-1a287f38d00d50bf2704bf2b130bd61d
拝見しましたが、これらのファイルはいずれもヘッダの中で読み込みされていませんので、影響を与えないと思います。
もし、実際のコードと異なるのであれば、実際のコードをご提示いただけますか？
いただいたコードを試してみましたが、やはりスライダーは動作しました。
（ローディング画面が消えなかったので削除しましたが、これは実際には消えるのですよね？）
あなたの回答
tips
プレビュー
