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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQueryプラグイン

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

JavaScript

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

jQuery

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

Q&A

解決済

2回答

2420閲覧

bxslider: onslideLoad・onslideAfterを使って前後の画像を半透明にしたい

Honoka007

総合スコア13

jQueryプラグイン

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

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2018/10/29 06:40

編集2018/10/29 07:35

bxsliderを使ってスライドショーをカスタマイズしています。
現在、スライジョーの動きを再現することには成功していますが、
前後の画像を半透明にすることに苦戦しています。

[JS] $(function(){ var $slider = $('.bxslider'); var $activeClass = 'active-slide'; $slider.bxSlider({ onSlideLoad: function(){ $slider.children('li').eq(1).addClass($activeClass); }, onSlideAfter: function($slideElement, oldIndex, newIndex){ $slider.children('li').removeClass($activeClass).eq(newIndex + 1).addClass($activeClass); } }); }); [CSS] .bx-wrapper { position: relative; margin-bottom: 60px; padding: 0; -ms-touch-action: pan-y; touch-action: pan-y; margin: 0 auto; } .bx-wrapper img { display: block; max-width: 100%; } .bxslider { margin: 0; padding: 0; -webkit-perspective: 1000; } ul.bxslider { list-style: none; } .bx-viewport { -webkit-transform: translateZ(0); overflow: visible!important; } ul.bxslider li{ opacity: 0.5;/*<li>を透明度50%にしておく*/ } .active-slide{ opacity: 1; /*<li>に付与するクラス・プロパティ、不透明にする*/ } [HTML] <ul class="bxslider"> <li><img src="./washoku.jpg"></li> <li><img src="./washoku2.jpg"></li> <li><img src="./washoku3.png"></li> </ul>

コールバック関数を利用し、スライドがロードした前後にクラス付与→opacityプロパティで
画像を半透明にしたいと思っていますが、なかなか出来ません。<li>にactive-slideプロパティを上手く付与出来ていないようなので、ご助言いただければ幸いです。

参考にさせて頂いているサイトはこちらになります↓
https://www.nxworld.net/tips/jquery-plugin-bxslider-examples.html#anchor02
外部URLリンクが規則違反でしたら、削除します。

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

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

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

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

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

guest

回答2

0

メソッド名が「onslideLoad」「onslideAfter」ではなく、「onSliderLoad」「onSlideAfter」で、newIndexもNが大文字だったり小文字だったりしています。
決められている名前はコピペしたほうがいいかもしれません。
https://bxslider.com/options/

投稿2018/10/29 07:14

x_x

総合スコア13749

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

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

Honoka007

2018/10/29 07:33

ありがとうございます。コードを修正しました。
x_x

2018/10/29 07:49

と、このようにコピペしないから間違うのですよ?
guest

0

自己解決

解決しました。

[JS] $(function(){ var $slider = $('.bxslider'); var activeClass = 'active-slide'; $slider.bxSlider({ auto: true, slideWidth: 640, slideMargin: 20, speed: 1000, onSliderLoad: function(){ $slider.children('li').eq(1).addClass(activeClass); }, onSlideAfter: function($slideElement, oldIndex, newIndex){ $slider.children('li').removeClass(activeClass).eq(newIndex + 1).addClass(activeClass); } }); }); [CSS] ul.bxslider { list-style: none; } .active-slide{ opacity: 1 !important; transition: all 0.5s; } ul.bxslider li{ opacity: 0.5; }

投稿2018/10/29 07:55

編集2019/06/04 08:11
Honoka007

総合スコア13

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

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

x_x

2018/10/29 08:10

指摘した「onSliderLoad」も直ってないし、これで解決でいいんですかね?
Honoka007

2018/10/29 08:19

問題コード・解決コードともに、すでに修正を終えています。 しっかりご確認ください。
x_x

2018/10/29 08:22

いやはや、自分は間違っていないという自信があるのですね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問