質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

382閲覧

HTML 画像のスライドショーを実装したい

globalplus

総合スコア119

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/06 14:47

編集2020/07/07 10:20

画像のスライドショーを実装したいのですが

<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;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

okina

2020/07/06 15:23

CSSの添付をお願いします!
Lhankor_Mhy

2020/07/07 01:20

jquery.bxslider.min.js を読み込んでいてますが、swiper-button などの Swiper を使っているようなコードが書かれていることが気になりました。
globalplus

2020/07/07 10:21

cssを追加しました
guest

回答1

0

こんにちは。
こういうことですか?

html

1 <div class="swiper-wrapper slider">

実は、class は一つの要素に複数つけることができるのです。

htmlで複数のクラスを指定 - Qiita

投稿2020/07/07 07:00

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

globalplus

2020/07/07 07:58

ありがとうございます。 実行してみましたがスライドしませんでした。。。
Lhankor_Mhy

2020/07/07 08:04

当方の環境では問題なく動作しました。 なので、ご提示いただいていない部分のコードに原因があるか、環境の問題かと思われます。 上手くいかないコードをご提示ください。
Lhankor_Mhy

2020/07/07 08:13

↓ご提示のコードを元に作ったサンプルです。 https://jsfiddle.net/Lhankor_Mhy/yrjknsa1/ globalplusさんの環境では上記のページでも、スライドしませんか? そうであるならば、環境の問題だと思います。
globalplus

2020/07/07 10:22

ありがとうございます 上記ページではスライドが確認できましたが自分のではスライドしません。。 cssを追加したのでご確認下さいますか?
Lhankor_Mhy

2020/07/07 10:31

ご提示のCSSを試すと、以下のようになりました。 https://jsfiddle.net/Lhankor_Mhy/yrjknsa1/1/ 当方では、スライダーが動作しているように見えます。 --- 補足依頼欄にも書きましたが、Swiper や Bootstrap らしきクラス名が散見されることは、気にしなくてよいのですか?
globalplus

2020/07/07 15:03

>補足依頼欄にも書きましたが、Swiper や Bootstrap らしきクラス名が散見されることは、気にしなくてよいのですか? 恐らくそれが原因かなと思います。 このファイル類は購入したものでありますのでどこが原因かわからないのでファイルをそのものをご確認して頂くことは出来ますか? ギガファイルにてファイルをまとめました https://20.gigafile.nu/0715-1a287f38d00d50bf2704bf2b130bd61d
Lhankor_Mhy

2020/07/08 01:21

拝見しましたが、これらのファイルはいずれもヘッダの中で読み込みされていませんので、影響を与えないと思います。 もし、実際のコードと異なるのであれば、実際のコードをご提示いただけますか?
Lhankor_Mhy

2020/07/08 04:43

いただいたコードを試してみましたが、やはりスライダーは動作しました。 (ローディング画面が消えなかったので削除しましたが、これは実際には消えるのですよね?)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問