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

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

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

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

HTML

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

CSS

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

Q&A

1回答

2289閲覧

スライダーの実装について(画像の見切れやレイアウトの調整について)

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

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

CSS

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

0グッド

2クリップ

投稿2019/03/20 09:26

前提・実現したいこと

スライダーのデザイン実装

現在、スライダーの実装を行っております。
その際、写真のようなスライダーのデザインがありました。
(斜線部分は画像)
このレイアウトでスライダーを実装しようとして現在はSwiper.jsを使用しているのですが、うまくいきません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

1<!-- Slider main container --> 2<div class="swiper-container fadein"> 3 <!-- Additional required wrapper --> 4 <ul class="swiper-wrapper"> 5  <!-- Slides --> 6 <li class="swiper-slide"> 7  <a href="#" target="_blank"> 8  <img src="<?=get_template_directory_uri()?>/img/index/#"> 9 </a> 10 </li> 11  <li class="swiper-slide"> 12 <a href="#" target="_blank"> 13 <img src="<?=get_template_directory_uri()?>/img/index/#"> 14 </a> 15 </li> 16  <li class="swiper-slide"> 17 <a href="#" target="_blank"> 18 <img src="<?=get_template_directory_uri()?>/img/index/#"> 19 </a> 20 </li> 21  <li class="swiper-slide"> 22 <a href="#" target="_blank"> 23 <img src="<?=get_template_directory_uri()?>/img/index/#"> 24 </a> 25 </li> 26 </ul> 27 <div class="swiper-button-prev"></div> 28 <div class="swiper-button-next"></div> 29</div> 30 31 32///////////////////////////// 33//スライダー(JS) 34 let mySwiper = new Swiper ('.swiper-container', { 35 loop: true, 36 slidesPerView: 2.5, 37 spaceBetween: 10, 38 centeredSlides : false, 39 // width: 2150, 40 // height:5000, 41 navigation: { 42 nextEl: '.swiper-button-next', 43 prevEl: '.swiper-button-prev' 44 }, 45 pagination: { 46 el: '.swiper-pagination', 47 type: 'bullets', 48 ////////////////////////////////// 49 //type: 'bullets' 50 //type: 'fraction' 51 //type: 'progressbar' 52 ////////////////////////////////// 53 }, 54 breakpoints: { 55 992: { 56 slidesPerView: 1.2, 57 spaceBetween: 10, 58 centeredSlides : true, 59 } 60 } 61 }); 62///////////////////////////// 63

試したこと

slidesPerView: 2.5の値を変更したり、WidthやHeightを変更してみましたが、うまくいきません。
どなたかご教授いただけませんか?

もし、その他のプラグイン等で実装可能ならSwiperにはこだわっていません。

よろしくお願い致します。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/03/20 10:22

うまくいきません、ではなく、第三者にも伝わるように具体的な現象を説明してください。
退会済みユーザー

退会済みユーザー

2019/03/20 11:19

例を出します。 slidesPerView: 4 ,centeredSlides : true, の設定をしたところ中心が空白になるのですが、4枚のスライドが画面に均等に配置されるため、見切れが実装できません。 ,centeredSlides : false, に設定し、 slidesPerView: 4を変更する対応を行った場合、中心が空白という事象が解消できません。 デザイン通りのレイアウトの実装が質問の趣旨です。
guest

回答1

0

参考サイト
slidesPerView
数字もしくはauto。
1画面で見えるスライドの数を設定できる。loopを設定したい場合は、一緒にloopedSlidesの設定をする必要がある。slidesPerView:autoとslidesPerColumnは一緒に設定してはいけない。
デフォルトでは1。
Loop入れてるので上のオプションが足りないのではないでしょうか。

投稿2019/03/20 13:48

shuzi

総合スコア197

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問