Jqueryのアレンジの仕方

質問

http://zxcvbnmnbvcxz.com/demonstration/slide_in_slide.html
こちらのサイトを利用してJqueryを使ってみましたが、

http://www.dalia.co.jp/index.html
1)
このように、両サイドに半透明で画像を表示されるにはどうしたらいいのでしょうか？
2)
左右の矢印は大きなブルーの矢印になっていますが、矢印の画像を変更（アレンジ）するにはどうしたらいいのでしょうか？

１）と２）のどちらでもいいので、ご存知の方よろしくお願い致します。

回答No.2

cashmereRX

こんにちは。

基本的に質問されている項目は使用されているjqueryプラグインなどのパラメータによる対応ではなく、CSSによる対応が必要になります。

参考にされているサイトのやり方を確認したみたところ以下のようなやり方で実装されていました。

1)
divタグを二つ用意しそれぞれにmask_lとmask_rという二つのclassを対応させ、そのclassに半透明の画像などを指定することで、一部を半透明画像にしています。

2)
矢印に関しては、プラグインで使用されているデフォルトのCSSを書き換えており、bx-nextとbx-prevを変更したい画像などに変更しているようです。

どちらに対しても言えることは、画像に関しては、パラメーターで変更できるものではありませんので、ご自身で作成する必要があるかと思います。

Chromeのディベロッパーツール等でサイトのCSSやHTMLを確認できますので、そちらでどのように書かれているのかを確認し真似をしてみながらご自身のやりたいデザインを実現されると良いかと思います。

参考になれば幸いです。

お礼

お礼が遅くなりました。
参考にさせて頂きました。

回答No.1

noname#227863

jQueryプラグインのbxSliderを使用していますね。
bxSlider自体は簡単に導入できるので公式のサンプルを見るとして、
レスポンシブにするためのCSS知識は最低限必要です。

１）２）共にCSS知識が必要ですが、
ページに読み込んでいるCSSファイルがそのものなので、
それをいじって確認した方が良いと思いますよ。

bxSlider
http://bxslider.com/
bxSliderパラメータ
http://www.trust.or.jp/Public/Blog.aspx?ArticleNo=23

お礼

お礼が遅くなりました。
参考にさせて頂きました。

補足

sdgh8s5thbさん

ご返事ありがとうございます。

http://www.trust.or.jp/Public/Blog.aspx?ArticleNo=23
こちらを拝見させて頂きましたが、１）２）とも具体的にどうすればいいのか分かりません。
１）はどのパラメータを使えばいいのか？です。
また、矢印のカスタマイズもありましたが、どうやって画像を入れ変えればいいのか分かりません。

お分かりだったらお教え下さいませ。
よろしくお願い致します。