タグ

slickに関するyk_acのブックマーク (6)

  • スライダープラグイン「Slick」便利なオプション&動きサンプル集 - Qiita

    Slickの便利なオプションと動きサンプルを分かりやすくまとめています。 オプションやサンプルは今後もどんどん追加していきます。 1. よく使うオプション 数多く用意されているSlickのオプションの中でも、知っておくと便利な定番オプション。 1-1. 表示に関するオプション 項目 デフォルト 仕様

    スライダープラグイン「Slick」便利なオプション&動きサンプル集 - Qiita
  • 【slick】ロード時に一瞬縦並びになるのをCSSで解決する

    ページのメインビジュアルとしてもおなじみのスライダー(カルーセル)。 jQueryのプラグインも数多くありますが、グランフェアズでよく使っているレスポンシブ対応のスライダープラグイン、「slick」についての備忘録をお届けします。 slickの公式サイトはこちら。 当記事では基の設置方法は割愛しています。公式サイトの「get it now」からダウンロードして、「demos」を参考に好きなスライダーを作ってみましょう。 slick – the last carousel you’ll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! ロード時に一瞬縦並びに

    【slick】ロード時に一瞬縦並びになるのをCSSで解決する
  • レスポンシブ対応!万能カルーセルスライダーjQueryプラグイン「slick.js」を研究してみる | yanagi's memo

    なぜ「slick.js」がいいのか レスポンシブ対応 IE11でも問題なく動く カスタマイズ性が高い 王道プラグインだけあって、JavaScriptも活用した質の高い解説ブログが山ほど見つかる←重要! slick.jsの準備 A: slick.jsをダウンロードする 公式サイトからダウンロードします。 色んなパターンのスライドが実装できまっせ〜なサンプルを上に流して流して、設置方法の説明も流して、settingの解説も流して流して、だいぶ下の方にダウンロードボタンがあります。 急ぎのときは、グロナビの「get it now」をクリックするとダウンロードボタンのところまで一気にスクロール移動できます。 解凍後、slick.min.js、slick.css、slick-theme.css、ajax-loader.gif、fontsフォルダをそれぞれ格納(UP)します。 fontsフォルダはsl

    レスポンシブ対応!万能カルーセルスライダーjQueryプラグイン「slick.js」を研究してみる | yanagi's memo
  • 【jQuery】スライダープラグイン「slick」の使い方を詳しく解説

    前回、「超簡単!CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts(フォルダ) slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee

    【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
  • 【slick.js】画像上の矢印をカスタマイズ(変更)し両サイド画像透過 | Puzzle(パズル)

    レスポンシブに強く様々なレイアウトが揃っているslick sliderは多くの方がご存知だと思います。この度、slick sliderのカルーセル・スライダーで矢印を素材に変更し両サイドの少し見えている部分を透過するという案件が出ましたので、備忘録をかねて掲載致します。 まずは、デモをご確認く頂き、必要があればslick.jsを配布元からファイルをダウンロードしてください。ファイルの設置などGimmick logさんのページで詳しく紹介されていますので、ご参考ください。 両サイドの画像を透過するCSS 両サイドの画像を透過する事でアクティブ画像に目が行くようになります。 .slick-slider .slick-track, .slick-slider .slick-list{ background: #fff; } .slick-initialized .slick-slide{ opa

    【slick.js】画像上の矢印をカスタマイズ(変更)し両サイド画像透過 | Puzzle(パズル)
  • slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】 | 東京のホームページ制作 / WEB制作会社 BRISK

    「スライダーを実装したい!」「でも何を使えばいいの?」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし!(かもしれません。) 目次 slick(スリック)とはslickの使い方~導入編~slickの使い方~実践編~slickの使い方~カスタマイズ編~slickの使い方~レベルアップ編~slickの使い方~もっとレベルアップ編~slickの使い方~まとめ~slick(スリック)とはslickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。 また、商用の利用もOK(※ちょっぴ

    slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】 | 東京のホームページ制作 / WEB制作会社 BRISK
  • 1