jCarouselクラスが選択されたアイテムを表示

Question

私はclass=selectedを持つアイテムのリストを持っています。nはすべてclass=selectedを次のアイテムに変更します。

jCarouselスクロールを有効にして、常にclass=selectedのアイテムを表示するにはどうすればよいですか？

Answer 1

jcarouselに自動スクロールを設定するのは簡単ではありませんか？

あなたはここで情報を見つけることができます：http://sorgalla.com/projects/jcarousel/

プロパティを「自動」
は、定期的にコンテンツを自動スクロールする秒数を指定します。 0（デフォルト）に設定すると、自動スクロールがオフになります。

あなたは、あなたがこのようjcarousel scrollメソッドを使用することができます

Answer 2

を「選択」するために、クラスを変更するには、余分なコーディングを必要としません。

var link = $("#linkIWantToScrollTo"); 

var scrollTo = link.parent().attr("jcarouselindex"); 
var animateScrolling = true; 

// Using jcarousel instance from the element where you applied jcarousel, scroll it... 
$("#menu").jcarousel('scroll', scrollTo - 1, animateScrolling, function(scrolled) { 
     if (scrolled) { 
      console.log('The carousel has been scrolled'); 
     } else { 
      console.log('The carousel has not been scrolled'); 
     } 
}); 

注：それはscrollTo - 1index is 0 basedために使用する必要があります。さもなければあなたは望ましくない結果を得るでしょう！ :)

linkはアンカーこのような<a>です：上記のコードjcarouselで

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="14"> 
<a id="linkIWantToScrollTo" title="Educação de Pacientes e Familiares" href="#"> 
</li> 

14を配置するためにスクロールします。これは今私のプロジェクトの一つですごくうまくいっています。位置14が見えなくなり、スクロール方法を適用すると、アイテムが視覚的に表示されるため、ユーザーエクスペリエンスが向上します。