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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1133閲覧

Swiperのスライダーについて

hashimoto-japan

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/05/25 06:20

編集2018/05/25 06:58

https://select-web.jp/

上記ページの下のほうにSwiperを用いてスライダーのコンテンツがあるのですが、
CMSに挿入すると崩れてしまいます。
「Case study」のところはCMSのところに挿入していないので崩れていませんが、
「Blog」のところは崩れてしまい、フッターより下で表示されていて挙動もおかしくなってしまいます。

■前提・実現したいこと
Case studyのところみたいなスライダーにしたい
https://gyazo.com/9e0d7457f3a697741a51aacae895e6e9
上記キャプチャのようなかんじです。

■発生している問題
BlogのところをCMSに挿入するとフッターをこえて1番下に表示されて崩れる。
CMSはOwletというCMSです。
下記がソースです。

html

1<section class="blog"><div class="blog__inner"><div class="top-casestudy-mid-box"> 2 <h3 class="top-ttl-01">Blog</h3> 3 <a href="#" class="casestudy-more-link">More</a> 4</div> 5 6<div class="swiper-custom-parent"> 7 <div> 8 <div class="swiper-container2 swiper-container-horizontal"> 9<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 10<div class="swiper-slide swiper-4column__block swiper-slide-next" data-swiper-slide-index="0" style="width: 290px; margin-right: 40px;"> 11 <div class="swiper-4column__image"><img src="/_img/ja/article/13/main_image/290_200_1_ffffff/"></div> 12 <div class="swiper-4column__body"> 13 <p class="swiper-4column__date">2018.05.23</p> 14 <p class="swiper-4column__headline"><a href="/blog/knowledge/20180523-13/">知識ノウハウ知識ノウハウ</a></p> 15 </div> 16 </div> 17</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 18<div class="swiper-slide swiper-4column__block" data-swiper-slide-index="1" style="width: 290px; margin-right: 40px;"> 19 <div class="swiper-4column__image"><img src="/_img/ja/article/12/main_image/290_200_1_ffffff/"></div> 20 <div class="swiper-4column__body"> 21 <p class="swiper-4column__date">2018.05.23</p> 22 <p class="swiper-4column__headline"><a href="/blog/operating/20180523-12/">あああああああああああ</a></p> 23 </div> 24 </div> 25</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 26<div class="swiper-slide swiper-4column__block" data-swiper-slide-index="2" style="width: 290px; margin-right: 40px;"> 27 <div class="swiper-4column__image"><img src="/_img/ja/article/11/main_image/290_200_1_ffffff/"></div> 28 <div class="swiper-4column__body"> 29 <p class="swiper-4column__date">2018.05.23</p> 30 <p class="swiper-4column__headline"><a href="/blog/others/20180523-11/">その他テスト</a></p> 31 </div> 32 </div> 33</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 34<div class="swiper-slide swiper-4column__block swiper-slide-duplicate-prev" data-swiper-slide-index="3" style="width: 290px; margin-right: 40px;"> 35 <div class="swiper-4column__image"><img src="/_img/ja/article/10/main_image/290_200_1_ffffff/"></div> 36 <div class="swiper-4column__body"> 37 <p class="swiper-4column__date">2018.05.23</p> 38 <p class="swiper-4column__headline"><a href="/blog/knowledge/20180523-10/">あああああああ</a></p> 39 </div> 40 </div> 41</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"> 42<div class="swiper-slide swiper-4column__block swiper-slide-active" data-swiper-slide-index="4" style="width: 290px; margin-right: 40px;"> 43 <div class="swiper-4column__image"><img src="/_img/ja/article/3/main_image/290_200_1_ffffff/"></div> 44 <div class="swiper-4column__body"> 45 <p class="swiper-4column__date">2018.05.10</p> 46 <p class="swiper-4column__headline"><a href="/blog/marketing/20180510-3/">【マーケティング】ブログタイトルが入ります。</a></p> 47 </div> 48 </div> 49</div><div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-1320px, 0px, 0px);"><div class="swiper-slide swiper-4column__block swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 290px; margin-right: 40px;"> 50 <div class="swiper-4column__image"><img src="/_img/ja/article/11/main_image/290_200_1_ffffff/"></div> 51 <div class="swiper-4column__body"> 52 <p class="swiper-4column__date">2018.05.23</p> 53 <p class="swiper-4column__headline"><a href="/blog/others/20180523-11/">その他テスト</a></p> 54 </div> 55 </div><div class="swiper-slide swiper-4column__block swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 290px; margin-right: 40px;"> 56 <div class="swiper-4column__image"><img src="/_img/ja/article/10/main_image/290_200_1_ffffff/"></div> 57 <div class="swiper-4column__body"> 58 <p class="swiper-4column__date">2018.05.23</p> 59 <p class="swiper-4column__headline"><a href="/blog/knowledge/20180523-10/">あああああああ</a></p> 60 </div> 61 </div> 62</div> 63<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> 64</div> 65<!-- If we need navigation buttons --> 66<div class="swiper-button-prev2" tabindex="0" role="button" aria-label="Previous slide"></div> 67<div class="swiper-button-next2" tabindex="0" role="button" aria-label="Next slide"></div> 68</div></div> 69</section>

css

1.swiper-custom-parent{ 2 max-width:1480px; 3 width:100%; 4 margin-left:auto; 5 margin-right:auto; 6 position: relative; 7 /*margin-bottom:60px;*/ 8} 9.swiper-container { 10 overflow: hidden; 11 list-style: none; 12 padding: 0; 13 /* Fix of Webkit flickering */ 14 z-index: 1; 15 max-width:1280px; 16 width:100%; 17 margin: 0 auto; 18} 19.swiper-container2 { 20 overflow: hidden; 21 list-style: none; 22 padding: 0; 23 /* Fix of Webkit flickering */ 24 z-index: 1; 25 max-width:1280px; 26 width:100%; 27 margin: 0 auto; 28} 29.swiper-container-no-flexbox .swiper-slide { 30 float: left; 31} 32.swiper-container-vertical > .swiper-wrapper { 33 -webkit-box-orient: vertical; 34 -webkit-box-direction: normal; 35 -webkit-flex-direction: column; 36 -ms-flex-direction: column; 37 flex-direction: column; 38} 39.swiper-wrapper { 40 position: relative; 41 width:100%; 42 height: 100%; 43 z-index: 1; 44 display: -webkit-box; 45 display: -webkit-flex; 46 display: -ms-flexbox; 47 display: flex; 48 -webkit-transition-property: -webkit-transform; 49 transition-property: -webkit-transform; 50 -o-transition-property: transform; 51 transition-property: transform; 52 transition-property: transform, -webkit-transform; 53 -webkit-box-sizing: content-box; 54 box-sizing: content-box; 55 -webkit-box-pack: justify; 56 -ms-flex-pack: justify; 57 justify-content: space-between; 58} 59.p-document-list__item{ 60 border: 1px solid #dcdddd; 61 padding: 20px; 62 max-width:400px; 63 background-color: #fff; 64} 65@media screen and (min-width: 768px) { 66.swiper-4column__block{ 67 max-width:290px; 68} 69} 70.swiper-4column__image{ 71 text-align:center; 72} 73.swiper-4column__body{ 74 background-color:#fff; 75 padding:15px; 76} 77.swiper-4column__date{ 78 color:#969696; 79 font-size:13px; 80 line-height:1; 81 margin-bottom:15px; 82} 83.swiper-4column__headline{ 84 font-weight:bold; 85 font-size:16px; 86} 87.swiper-container__headline{ 88 font-weight:bold; 89 font-size:1.125rem; 90 margin-bottom:10px; 91} 92.swiper-container__category{ 93 margin-bottom:5px; 94 color:#41a9c6; 95} 96.swiper-container-android .swiper-slide, 97.swiper-wrapper { 98 -webkit-transform: translate3d(0px, 0, 0); 99 transform: translate3d(0px, 0, 0); 100} 101.swiper-container-multirow > .swiper-wrapper { 102 -webkit-flex-wrap: wrap; 103 -ms-flex-wrap: wrap; 104 flex-wrap: wrap; 105} 106.swiper-container-free-mode > .swiper-wrapper { 107 -webkit-transition-timing-function: ease-out; 108 -o-transition-timing-function: ease-out; 109 transition-timing-function: ease-out; 110 margin: 0 auto; 111} 112.swiper-slide { 113 -webkit-flex-shrink: 0; 114 -ms-flex-negative: 0; 115 flex-shrink: 0; 116 width:100%; 117 height: 100%; 118 position: relative; 119 -webkit-transition-property: -webkit-transform; 120 transition-property: -webkit-transform; 121 -o-transition-property: transform; 122 transition-property: transform; 123 transition-property: transform, -webkit-transform; 124}

■問題が発生した環境
firefox chrome最新

お忙しいとは存じますが、どなたか解決方法をご教授いただければ幸いです。

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

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

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

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

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

m.ts10806

2018/05/25 06:38

サイトURLの提示のみでは広告目的と捉えられます。該当箇所のコードとどのように崩れているかの説明(または画面キャプチャ)にされた方が良いかと思います。
m.ts10806

2018/05/25 06:39

「CMS」というのはどのCMSでしょうか。タグに追加してください。(テーマを使っているならそのテーマも質問本文に書いて下さい)レイアウト崩れであればOSは基本関係してきませんのでブラウザの種類とバージョンをご提示ください。
Lhankor_Mhy

2018/05/25 06:46

二つのスライダーのHTML構造が違いますが、これはどういう意図ですか?
hashimoto-japan

2018/05/25 06:48

スライダーは上のほうが3カラム、下のほうが4カラムという意図です。
Lhankor_Mhy

2018/05/25 06:51

いえ、.swiper-container2 で .swiper-container をラップしていると思うのですが、これの意図を教えてください。
hashimoto-japan

2018/05/25 06:53 編集

ご質問ありがとうございます。同じページでスライダーを2つ使う場合違うクラス名をつけないと反映されないと書いてあったので.swiper-containerと.swiper-container2と違うクラス名にして分けています。
m.ts10806

2018/05/25 06:54

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
Lhankor_Mhy

2018/05/25 06:56

いえ、実際には違うクラス名に分かれていません。.swiper-container2 で .swiper-container をラップしています。それが原因では?
Lhankor_Mhy

2018/05/25 07:01

あれ? すみません、今確認したら、そうなってないですね。私の勘違いだったみたいです。失礼しました。
Lhankor_Mhy

2018/05/25 07:03

.slider-wrapper が複数あるのが原因かもですね。.swiper-containerと同じ構造に直してみては?
Lhankor_Mhy

2018/05/25 07:13

いえ、.swiper-container > .slider-wrapper > .swiper-slide * n となっているところが、.swiper-container2 > .slider-wrapper * n > .swiper-slide となっているのです。わかりやすく言うと、slider-wrapper が多すぎます。
hashimoto-japan

2018/05/25 07:13

ありがとうございます!slider-wrapperが複数あるのが原因でした。解決しました。ありがとうございました~
guest

回答1

0

自己解決

slider-wrapperが複数あったのが原因でした!
ありがとうございました。

投稿2018/05/25 07:15

hashimoto-japan

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問