WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。サムネイルの位置を切り替える年末からの体調不良からいっこうに立ち直れないyasaiです。先日の大寒波からみなさんは立ち直ったでしょうか?さて僕としては2016年1回目のブログとなります。気合い入れていきます!!なんていうと、あとが続かなくなるので、今回はサラッと軽めに参ります。bxSliderとslickです。先日やらせていただいた案件で、メインのスライドエリアの横にサムネイル表示されるパターンのものがあったので、今回はその時のお話です。スマホの時はサムネイルを下へ移動します。今回はslickを使いました。slickの素敵な所は、画面幅にによってオプションを切り替えられるところですね。それと今回の案件でslickを使うことにしたのは、サムネイルの表示が別のHTMLとして書くことができて、CSSでの制御がしやすかったからです。slick.jsとCSSを読み込みます。jQueryのプラグインですので、お約束jQueryと一緒に。href="slick.css">※追記slick-theme.cssは読み込んでいません。slick-theme.cssを読み込むと縮めたときに「戻る」ボタンの表示がうまくいかないようです。一応回避方法を考えてみましたのでコメントをご覧ください。スライダー部分のHTMLはこんな感じに。class="slick-prev"></div></div></div></div>スライダーのメイン部分を.slide-for、サムネイル部分を.slider-nav、矢印を.slick-nav-arrowsでマークアップしています。ひとつポイントなのが、.slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしているところでしょうか。動作のためのJavascriptをこんな感じです。false}}]});});メイン.slider-forとサムネイル.slider-navの両方ともスライダーとして動作させます。‘.slider-nav’」として、.slider-navがサムネイルボタンとして機能するようにします。サムネイルの方は、今回は4枚並ぶ形にしました。」なんていうサブタイトルがついてるくらい、使いやすいカルーセルスライダーですなんですよね。slickのよいところ、オプション「responsive」でブレイクポイントを設定し、表示を切り替えます。今回は768pxをブレイクポイントとし、縦型のスライダーにするかどうかを切り替えています。その他詳しいオプションなどは、本家サイトをご覧ください。見た目の方のCSSはこんなです。transparent;}}ちょっと長いですけど、基本的にはたいしたことしてないですね。メディアクエリで768px以上の場合はメイン部分を左に寄せて、サムネイル部分は天地のセンターをとりたかったので、絶対配置で右寄せにしているだけです。この時に幅を%で指定してあるから縮んでいくよ、というからくり。(imgをmax-width:100%にしています).slider-navと.slick-nav-arrowsを.slider-nav-wrapでひとくくりにしたのは.slick-nav-arrowsをうまいこと配置したかったから、ということです。(.slider-navの位置に合わせて天地or左右のセンターをとりたかった)スマホのときは特にfloatも絶対配置もしていないので、メインの下にサムネイルがやってくるという仕掛けになってます。DEMOのブラウザ幅を広げたり縮めたりするを動作を確認いただけると思います。今回はコードばかりでいつも以上にとっつきにくいですね。追記(2016/04/25)サンプルその2も作ってみました。PMはじめまして、この記事で書かれていることが実現したい内容にピッタリでしたので使用させて頂きました。試しにコードをコピペしてみたところ矢印が両方とも左に寄ってしまいました。prevボタンはright:0で右端にくるはずなのに、左端よりも外に出てしまってブラウザを縮めると表示されません。考えつく限り触ってみましたがまったく解消されません。原因が何かお分かりでしたら教えて頂けませんでしょうか。締切が明日なのでかなり急いでいます。お手数をおかけしますが、何卒よろしくお願いいたします。PMさきほどコメントさせて頂いた者です。別のやり方で問題解決できました、お騒がせしてしまい申し訳ありません。まりえ様ご覧いただきありがとうございます。お急ぎのところ返信が遅くなり申し訳ありません。-25px;}の記述がありますので、それと競合するようです。translateX(-50%);}}このような感じでいかがでしょうか?(微調整が必要かもしれません。)slick-theme.cssがslickのデザインのデフォルトテーマでしたので、私がDEMO作るときには読み込まず作っていました。一文入れるべきでしたね、すいません。お手数をおかけしてしまいました。コメントをキャンセルメールアドレスが公開されることはありません。