サンプル(実際にbxSliderを埋め込んだサイト) 上記サイトで画像がスルスル動いたりするようなやつを、画像スライダーなんて言ったりしますが、今回紹介する「bxSlider」は初心者でも簡単に設置することが出来るプラグインです。 これをヘッダーの下や投稿記事の上にでも設置すると、情報サイトとしての雰囲気がぐっと出ると思います。 ここで紹介するbxSliderの設置方法は、JavascriptとかjQueryが全く分からない人でもすぐ使える説明になってます。がっつり使えるようになりたい方は、オススメ出来るやり方ではないと思いますので、下記サイトさんをご参考にすることをオススメします。 superChemical: レスポンシブルデザインにも対応した高性能なスライダー【bxslider】の設置 ※追記（7/4） Google Driveをオススメする記事を書いたので、このbxSliderでも

半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その

今日紹介する［Swiper］は、レスポンシブ対応サイトなどで真価を発揮するJavaScriptベースの「コンテンツ・スライダー」です。 初見の感想は「反応速度が早く軽量でサクサク動く」という印象。 レスポンシブにも対応済み。マウスのドラッグ操作やタッチコントロールのスワイプにも反応して操作性が良く、文句ナシのクオリティでした。 機能が豊富で、ざっと紹介すると以下のとおり。 レスポンシブ対応 フルスクリーン化OK ページネーション設置 縦方向のスライド カルーセル・モード 各スライドの位置を固定しない「フリーモード」対応 複数行のスライドに対応 縦方向・横方向の「入れ子」に対応 マウスのドラッグ操作に対応 スクロールバー表示 ナビゲーションボタン表示 無限ループ対応 フェードイン・フェードアウトによるスライドの切り替え 3D キューブ・エフェクト 3D カバーフロー・エフェクト キーボード・