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

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

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

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQueryプラグイン

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

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

CSS

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

Q&A

1回答

1470閲覧

slickを使用してのスライダー実装で、activeのスライドだけ表示したい。

TaiseiMitomi

総合スコア13

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQueryプラグイン

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

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

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

CSS

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

0グッド

0クリップ

投稿2019/07/05 09:58

編集2022/01/12 10:55

slickを使用してスライダーを実装しています。
https://tr.you84815.space/slick/settings/lazyLoad.html

目指してるものはこの方のprogressiveに近いです。

現状は以下のような感じです。
イメージ説明

activeの猫の画像だけ表示したいため以下のcssを入れたのですが挙動が少し気持ち悪いため諦めました。

scss

1.slick-track{ 2 visibility: hidden; 3} 4.slick-current{ 5 visibility: visible; 6}

何か良い方法はあるでしょうか?よろしくお願い致します。

jQuery

1 $('.slider01').slick({ 2 slidesToShow: 1, 3 prevArrow: '<button class="slick-prev"></button>', 4 nextArrow: '<button class="slick-next"></button>', 5 dots: true, 6 dotsClass: 'dot-class', 7 lazyLoad: 'progressive', 8 9 customPaging: function(slick,index) { 10 // スライダーのインデックス番号に対応した画像のsrcを取得 11 var targetImage = slick.$slides.eq(index).find('img').attr('src'); 12 // slick-dots > li の中に上記で取得した画像を設定 13 return '<img src=" ' + targetImage + ' "/>'; 14 }, 15 });

scss

1 ul { 2 .slick-list { 3 background-color: #182a3d; 4 height: 300px; 5 margin-bottom: 8px; 6 } 7 // .slick-track{ 8 // visibility: hidden; 9 // } 10 // .slick-current{ 11 // visibility: visible; 12 // } 13 .dot-class{ 14 text-align: left; 15 padding: 0 0 0 8px; 16 li{ 17 width: 70px; 18 height: 70px !important; 19 position: relative; 20 background-color: #dbdbdb; 21 display: inline-block; 22 margin-right: 8px; 23 -webkit-filter: brightness(0.4); 24 -moz-filter: brightness(0.4); 25 -o-filter: brightness(0.4); 26 -ms-filter: brightness(0.4); 27 filter: brightness(0.4); 28 img{ 29 position: absolute; 30 max-height: 100% !important; 31 max-width: 100% !important; 32 top: 0; 33 bottom: 0; 34 left: 0; 35 right: 0; 36 margin: auto; 37 } 38 } 39 .slick-active{ 40 -webkit-filter: brightness(1.0); 41 -moz-filter: brightness(1.0); 42 -o-filter: brightness(1.0); 43 -ms-filter: brightness(1.0); 44 filter: brightness(1.0); 45 } 46 } 47 .slick-prev 48 { 49 left: 14.5%; 50 top: 44%; 51 } 52 .slick-next 53 { 54 left: 41%; 55 top: 44%; 56 } 57 &.slider01 li { 58 // /*メインスライダー*/ 59 display: inline-block; 60 height: 300px; 61 position: relative; 62 img { 63 max-height: 300px; 64 max-width: 390px; 65 position: absolute; 66 top: 0; 67 right: 0; 68 bottom: 0; 69 left: 0; 70 margin: auto; 71 } 72 }

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

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

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

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

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

guest

回答1

0

opacityとtransitionを使ってみてはいかがでしょう。

【transition - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/transition

投稿2019/07/07 10:16

kei344

総合スコア69364

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

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

TaiseiMitomi

2019/07/10 05:30 編集

ご回答ありがとうございます。 実際のところキャンディーとゾウの部分のところには別の要素、処理、ボタンなどがあるため、opacityだとその部分が機能しなくなってしまう問題が生じてしまいます。説明不足で申し訳ありません。 自分で調べたところslickのデフォルトのものだと思われるaria-hiddenが全く機能していないことに気づいたのですが未だに解決策が見つからずといった状況です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問