動きのあるホームページブログ!!

  • TOP
  • ブログ
  • RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法
ice_screenshot_20160831-012703

動くホームページブログ!!

RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動リサイズ及びLTR/RTLテキストをサポートしています。JQueryの応答コンテンツスライダー/カルーセルプラグインとなります。

作業手順

HEAD内にスタイルシート、javascriptファイルを書きます。

<link rel="stylesheet" href="glider.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="glider.js"></script>

基本的なHTML構造

<div class="slide">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    ...
  </ul>
</div>

スライダーの自動再生機能を有効に

<div class="slide" data-glider-autoplay>
  ...
</div>

スライダーのテキスト方向を設定します。

<div class="slide" dir="rtl" data-glider-autoplay>
  ...
</div>

スライダに内蔵ナビゲーション&ページネーションコントロールを追加します。

<div class="slide" 
     data-glider-autoplay
     data-glider-controls="glider-top" 
     data-glider-links="glider-bottom">
  ...

プラグインおよびDONEを初期化します。

$('.slide').glider(); 

デフォルトのプラグインの設定を行います。

$('.slide').glider({

  // slider list
  list: 'ul',

  // slider item
  item: 'li',

  // animation type
  animation: 'ease'
  
});  

実装されたデモはこちらから確認できます。

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!

    JQueryの登場で最近よく見受けられる背景動画を用いたWEBサイト。…

  2. s-MBPR_9V9A8323_TP_V
  3. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  4. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

    レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です…

  5. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

  6. 20160630_1

    動くホームページブログ!!

    WordPress上で本をめくるような電子カタログプラグインのご紹介!!

    WordPress(ワードプレス)上でつくる「本をめくるような電子カタ…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. 20160921blog_img

    動くホームページブログ!!

    レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!
  2. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン③
  3. _shared_img_thumb_PAK85_kakomaretairoenpitu1278_TP_V

    WEBデザイン

    ホームページの見やすさの視認性と読みやすさの可読性!!
  4. 8e59eb4aa29ce1b551b409bed0416068_s

    WEBデザイン

    同じ色でも違って見える原因!
  5. 20160105_blog24_031

    制作ツールブログ!!

    ワードプレスをローカル環境で構築!!2