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

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

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

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

2回答

259閲覧

【slikスライダー】レスポンシブ時に画像が実サイズで表示される。

sank

総合スコア11

HTML5

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

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2019/02/21 10:23

編集2019/02/21 12:31

slikスライダーでレスポンシブ時の挙動を直したい。

こんにちは。
pc時は幅いっぱいで980pxの画像をスライドさせています(私のパソコンでは3枚が表示される)。

SP時は1枚を表示したいのですが、ほんの少し下にスクロールするまで、画像が大きい状態で表示されます。場合にもよりますが1秒から10秒はその状態が継続することも。

sp時にスムーズな挙動にすることは難しいでしょか?

ご回答お待ちしております。

追記

大変失礼いたしました。
コードを提示させていただきます。

HTML

1 <div class="visual-index"> 2 <div class="visual-slider"> 3 <div class="visual-area"> 4 <div class="visual-item"> 5 <ul class="visual-slider-list js-index-slider"> 6 98 7 <li><a href="DUMMY"><img src="img/title_DUMMY01.jpg" alt="DUMMY"></a></li> 8 <li><a href="DUMMY"><img src="img/title_DUMMY02.jpg" alt="DUMMY"></a></li> 9 <li><a href="DUMMY"><img src="img/title_DUMMY03.jpg" alt="DUMMY"></a></li> 10 <li><a href="DUMMY"><img src="img/title_DUMMY04.jpg" alt="DUMMY"></a></li> 11 </ul> 12 </div> 13 </div> 14 </div> 15 </div>

css

1.visual-index .slick-slide { 2 max-width: 980px!important; 3} 4@media screen and (max-width: 960px) { 5.visual-index .slick-slide img { 6 width: 100%!important; 7} 8}

js

1$(function load() { 2 $('.js-index-slider').slick({ 3 autoplay: true, 4 speed: 1000, 5 arrows: true, 6 prevArrow: '<span class="slick-prev"></span>', 7 nextArrow: '<span class="slick-next"></span>', 8 centerMode: true, 9 slidesToShow: 1, 10 centerPadding: '0px', 11 variableWidth: true, 12 responsive: [{ 13 breakpoint: 960, 14 settings: { 15 variableWidth: false, 16 slidesToShow: 1, 17 18 } 19 }] 20 }); 21});

いくつかJSをコメントアウトところ、

variableWidth: true

この記述をコメントアウトするとSP時にうまく表示されるようでした。
しかしこの記述がないとPC時にうまくいきません。

記述で間違っていることころ、あるいは解決策をご教授いただけますと幸いです。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/02/21 10:54 編集

コードを提示してください
sank

2019/02/21 12:06

大変失礼いたしました。コードを提示させていただきましたので、ご確認いただけますでしょうか。
退会済みユーザー

退会済みユーザー

2019/02/21 12:10

つまり、SP時は1枚,PC時には3枚同時に表示するということでしょうか?
sank

2019/02/21 12:15

ご回答ありがとうございます。 そういう風に表示できればと思います。 SP時は1枚で、PC時は3枚(真ん中に1つあって、左右がウィンドウ幅によっては見えている状態)が理想になります。
退会済みユーザー

退会済みユーザー

2019/02/21 12:15

あと提示コードのCSS 最後の'}'忘れています。
退会済みユーザー

退会済みユーザー

2019/02/21 12:16

あとCSSの';'も
sank

2019/02/21 12:18

色々と不備があり、申し訳ありません……。
退会済みユーザー

退会済みユーザー

2019/02/21 12:28

あとさっきの間違いの修正をお願いします。
sank

2019/02/21 12:32 編集

わざわざありがとうございました。 であれば画像が重いとか、コード以外の可能性があるというコトですね。 コードも修正させていただきます。 色々とお手数おかけいたしました。 親切にありがとございました。 また何かわからないことがございましたら、どうぞよろしくお願いいたします。 とりあえず画像を軽くして挑戦してみます。
sank

2019/02/21 13:22

画像をダミーにしても、実機確認時に画像が実サイズで表示されるようでした。 スライダーを2個使用しているので、そのせいかもしれません。 スライダーの記述だけでなく、他のコードもいろいろと見てみようと思います。
退会済みユーザー

退会済みユーザー

2019/02/21 14:05

スライダー2つにしてみました
退会済みユーザー

退会済みユーザー

2019/02/21 14:10

5000x5000の画像でサイズは1つ74.1KBです。
sank

2019/02/21 14:15

ありがとうございました。 CSSで解決しました! エリアのサイズを980pxで決めて、マージンで左右をauto。 slick-listに「overflow:visible!important」で左右を表示させました。 スマホは非表示にしました。 ご親切にご対応いただきまして、本当にありがとうございました。
退会済みユーザー

退会済みユーザー

2019/02/21 20:33

では自己解決をお願いします
guest

回答2

0

HTML

1 <div class="visual-index"> 2 <div class="visual-slider"> 3 <div class="visual-area"> 4 <div class="visual-item"> 5 <ul class="visual-slider-list js-index-slider"> 6 98 7 <li><a href="DUMMY"><img src="https://placehold.jp/3d4070/ffffff/980x510.png" alt="DUMMY"></a></li> 8 <li><a href="DUMMY"><img src="https://placehold.jp/afb0c7/ffffff/980x510.png" alt="DUMMY"></a></li> 9 <li><a href="DUMMY"><img src="https://placehold.jp/a32740/ffffff/980x510.png" alt="DUMMY"></a></li> 10 <li><a href="DUMMY"><img src="https://placehold.jp/a3a327/ffffff/980x510.png" alt="DUMMY"></a></li> 11 </ul> 12 </div> 13 </div> 14 </div> 15 </div>

CSS

1.visual-index .visual-area { 2 position: relative; 3 max-width: 980px; 4 margin: 0 auto; 5 /*margin-top: 30px;*/ 6} 7.visual-index .slick-list { 8 /*width: 980px;*/ 9 overflow:visible!important; 10} 11@media screen and (max-width: 960px) { 12.visual-index .slick-list { 13 overflow: hidden!important; 14} 15}

js

1$(function () { 2 $('.js-tieup-slider').slick({ 3 autoplay: true, 4 speed: 2500, 5 arrows: true, 6 prevArrow: '<span class="slick-prev"></span>', 7 nextArrow: '<span class="slick-next"></span>', 8 centerMode: true, 9 fade: true, 10 slidesToShow: 1, 11 centerPadding: '0px', 12 responsive: [{ 13 breakpoint: 960, 14 settings: { 15 slidesToShow: 1, 16 17 } 18 }] 19 }); 20});

CSSでセンター寄せにして、隠れた部分を強制的に表示させました。

投稿2019/02/22 04:31

sank

総合スコア11

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

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

0

自己解決

HTML

1 <div class="visual-index"> 2 <div class="visual-slider"> 3 <div class="visual-area"> 4 <div class="visual-item"> 5 <ul class="visual-slider-list js-index-slider"> 6 98 7 <li><a href="DUMMY"><img src="https://placehold.jp/3d4070/ffffff/980x510.png" alt="DUMMY"></a></li> 8 <li><a href="DUMMY"><img src="https://placehold.jp/afb0c7/ffffff/980x510.png" alt="DUMMY"></a></li> 9 <li><a href="DUMMY"><img src="https://placehold.jp/a32740/ffffff/980x510.png" alt="DUMMY"></a></li> 10 <li><a href="DUMMY"><img src="https://placehold.jp/a3a327/ffffff/980x510.png" alt="DUMMY"></a></li> 11 </ul> 12 </div> 13 </div> 14 </div> 15 </div>

CSS

1.visual-index .visual-area { 2 position: relative; 3 max-width: 980px; 4 margin: 0 auto; 5 /*margin-top: 30px;*/ 6} 7.visual-index .slick-list { 8 /*width: 980px;*/ 9 overflow:visible!important; 10} 11@media screen and (max-width: 960px) { 12.visual-index .slick-list { 13 overflow: hidden!important; 14} 15}

js

1$(function () { 2 $('.js-tieup-slider').slick({ 3 autoplay: true, 4 speed: 2500, 5 arrows: true, 6 prevArrow: '<span class="slick-prev"></span>', 7 nextArrow: '<span class="slick-next"></span>', 8 centerMode: true, 9 fade: true, 10 slidesToShow: 1, 11 centerPadding: '0px', 12 responsive: [{ 13 breakpoint: 960, 14 settings: { 15 slidesToShow: 1, 16 17 } 18 }] 19 }); 20});

CSSでセンター寄せにして、隠れた部分を強制的に表示させました。

投稿2019/02/22 04:17

sank

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問