2011-12-16 6 views
1

このプラグインを使用して画像のスライダーを作成しました。http://slidesjs.com/以前はモバイルウェブサイトでした。私のクライアントの要件を満たすために、プラグインでいくつかの変更を行い、プラグインで定義されたイベントに対していくつかの機能をトリガーしました。今度は、スライダの画像をタッチで移動させることで、スライダのスワイプ効果をスライダの画像にも必要とする。イメージスライダーでスワイプ効果を作成する方法は?

私はいくつかのスワイプコードを使用しましたが、スライダを作成する前に使用したプラグインと競合します。ある時点では、一度に1つの機能しか使用できません。

<div class="slides-wrapper"> 
     <div class="wrapper-spacer"></div> 
     <div class="slides-container"> 
      <div id="productImage1" class="slideshow-image"> 
       <img src="../images/ecommerce-work-1.png" alt="Product 1" /> 
      </div> 
      <div id="productImage2" class="slideshow-image"> 
       <img src="../images/ecommerce-work-2.png" alt="Product 2" /> 
      </div> 
      <div id="productImage3" class="slideshow-image"> 
       <img src="../images/ecommerce-work-3.png" alt="Product 3" /> 
      </div> 
     </div> 
    </div> 

これは、スライダ用のプラグインは、ページ付けし、次の前ボタンのための2つ以上の容器を使用している主画像スライダー容器のマークアップです。彼らはイメージの名前を表示するために私が使用している別のコンテナですが。私はいくつかのスライダプラグインを調べましたが、名前よりもクラス名に変数を使用しない、非常に荒いです。だから、すべてのエラーを生成しています。私はフロントエンドの開発者ではなく、もっとPHPに精通しているので、JavaScriptプラグインのコアを変更するのは難しい

私はこのプラグインhttp://superdit.com/2011/08/28/swipe-like-effect-based-on-jquery-ui-draggable/を使って画像スライダーにスワイプ効果を導入しました。

答えて

0

私はあなたがすでにスワイプ機能が含まFlexSliderを使用することをお勧めします。 HTMLコードは、クラス名を変更するだけでほぼ同じです。