OwlCarousel

概要:

ResponsiveなCarouselリストの表示を提供します。Jquery OwlCarouselプラグインを使用しており、Product List、Brand List、Slide、Video Listの表示が可能です。

対象環境:

Web

使用方法:

IgniaのExtensibility Catalogを開き、左側メニューのWEBを選択します。
OwlCarouselコントロールを選択して、Wizardに従ってインストールを実施します。 (Controlのインストールについては、Extensibility Catalogのドキュメンテーションをご確認ください。)
インストール時にSample XPZのインポートを実施することを推奨します。(確認ダイアログが表示されます。) 
XPZをインポートすると、User Controlのルート階層(Ignia/Controls/Owl)にSample Web Panelとリストデータ格納用のSDTが作成されます。

データ構造:

Controlでは複数の種類のTemplateを提供しております。各Template毎に定義されているデータ構造の変数をアサインする必要があります。

Product Listのデータ構造は以下のようになっております。

 

Brand Listのデータ構造は以下のようになっております。

Slideのデータ構造は以下のようになっております。

Video Listのデータ構造は以下のようになっております。

Properties:

  • Header: Controlの上部に表示するTextです。
  • Center: エレメントをセンター表示します。
  • Class: Controlに設定するテーマクラスを指定します。カスタマイズについてはスタイルの設定を確認してください。
  • Animate Out: スクロールアウト時のアニメーションクラスを指定します。アニメーションは、次のライブラリーに指定したものが使用できます。Animate.css　※
  • Animate In: スクロールイン時のアニメーションクラスを指定します。アニメーションは、次のライブラリーに指定したものが使用できます。Animate.css　※
  • Items: 画面に表示するエレメントの数を指定します。
  • Loop: エレメントのデータをループさせるか選択します。
  • Mouse Drag: エレメントをドラッグして動かせるように指定するか選択します。
  • Pull Drag: マウスでドラッグした際に先頭データに向かっての移動ができるか選択します。
  • Rewind: エレメントデータの終端に達した時に先頭に戻るか選択します。
  • Slide By: ページングした際に移動するデータエレメントの数を指定します。
  • Start Position: エレメントデータの初期表示データを指定します。データのIDは1、ポジション位置は0から開始されます。
  • Touch Drag:  Mobile端末やタブレット端末におけるタッチ操作とリストデータの動きを同期させるかを選択します。
  • Nav: ページングボタンを表示するか選択します。(戻る/次へ)
  • Nav Text Next: ページングボタンに表示する次へ動作時のTextを指定します。　※Defaultではアイコン表示のため使用されません。
  • Nav Text Prev: ページングボタンに表示する戻る動作時のTextを指定します。　※Defaultではアイコン表示のため使用されません。
  • Nav Speed: ナビゲーションスピードを指定します。
  • Dots: ページング用のドットを表示するか選択します。
  • Dots Each: 1ドットを幾つのエレメントに割り当てるか指定します。
  • Dots Speed: ページングのスピードを指定します。
  • Autoplay: オートページングを有効にするか選択します。
  • Autoplay Timeout: オートページングのスピードを指定します。ミリ秒で指定します。
  • Autoplay Hover Pause: Pausar la reproducción al hacer hover con el mouse.マウスオーバーした際に、
  • Autoplay Speed:  オートページングのスピードを指定します。
  • Template: Carousel Templateタイプを選択します。
  • Data: Carouselリスト上に表示するSDT変数を指定します。TemplateのタイプにマッチしたSDTを指定するようにしてください。
  • Responsive: ControlをResponsive Design表示するか選択します。
  • Item Extra Small:768px以下の画面サイズの場合に表示するエレメン数を設定します。
  • Item Small: 768pxから992pxの画面サイズの場合に表示するエレメン数を設定します。
  • Item Medium: 992pxから1024pxの画面サイズの場合に表示するエレメン数を設定します。
  • Item Large: 1024px以上の画面サイズの場合に表示するエレメン数を設定します。

※アニメーションは、Template種類によっては適用されないのでご注意ください。

スタイルの設定:

スタイルの設定は、GeneXusのTemaオブジェクトを編集して実施します。OwlCarouselクラスを利用します。
OwlCarouselは、ControlのClass Propertiesに設定されております。

OwlCarouselクラスでは、以下のPropetiesの編集が可能です。 

  • Header Class:  Controlの"Header" に対してのクラスです。(TextBlockタイプのクラス)
  • Container Class: Contolのコンテナ全体に対してのクラスです。 (Sectionタイプのクラス)
  • Item Container Class: Carouselの中のエレメントアイテムに対してのクラスです。(Sectionタイプのクラス)
  • Dots
    • Dots Class: ドットページングの全体スタイルに対するクラスです。(Sectionタイプのクラス)
    • Dot Class: ドットページングのドットに対するクラスです。(Sectionタイプのクラス)
    • Dot Active Class: アクティブドットに対するクラスです。(Sectionタイプのクラス)
  • Nav
    • Nav Class: ボタンページングの全体スタイルに対するクラスです。(Sectionタイプのクラス)
    • Nav Prev Class: ボタンページングの戻るボタンに対するクラスです。(Sectionタイプのクラス)
    • Nav Next Class: ボタンページング次へボタンに対するクラスです。(Sectionタイプのクラス)
  • Template Product List
    • Product Name Class: Product Nameに対してのクラスです。(TextBlockタイプのクラス)
    • Price Class: Priceに対してのクラスです。(Sectionタイプのクラス)
    • Add Cart Button Class: Add Cartボタンに対してのクラスです。(Buttonタイプのクラス)
    • Zoom Button Class: Zoomボタンに対してのクラスです。(Buttonタイプのクラス)
    • View Button Class: Viewボタンに対してのクラスです。(Buttonタイプのクラス).
  • Template Video List
    • Video Wrapper: ビデオコンテナーに対するクラスです。(Sectionタイプのクラス)

実行例:

Template Product List

Template Brand List

Template Slide

Template Video List