2013-08-30

[jQuery] カルーセル「Elastislide」で、スマホの向きを変えても先頭に戻らないようにする

jQueryのカルーセルスライダーはいろいろ種類がありますが、
最近ではレスポンシブ対応、スマホ対応のものもかなり増えてきました。

そういう中で何を選ぶか、というのもかなり難しいところなのですが、
Elastislideというプラグインを使った案件で、気になった点があったので変更しました。


デモを見てもらうとわかりやすいのですが、
もともとの動きでは、カルーセルをNEXTで動かした後に、ウィンドウサイズを変更すると
カルーセルが自動的に先頭に戻ってしまいます。
一方、変更後ではカルーセルはそのままになりました。

デモ(変更前)
http://aroun-d.com/demo/20130830/index_org.html

デモ(変更後)
http://aroun-d.com/demo/20130830/


PCで見ている分にはさほど大きな問題でもない気がするのですが、
スマホの場合は、サムネイルをクリックしたり、スクロールさせたりといった
ちょっとした動きでも向きが変わったとされるイベント(orientation)が反応してしまいます。
するとそのたびにカルーセルが先頭に戻ってしまい、かなりマズイです。

修正箇所は438行目の「self._slideToItem( self.current );」をコメントアウトし、
下記の内容を追加します。

self.fitCount = self.options.orientation === 'horizontal' ?
self.$carousel.width() < self.options.minItems * self.imgSize.width ? self.options.minItems : Math.floor( self.$carousel.width() / self.imgSize.width ) :
self.$carousel.height() < self.options.minItems * self.imgSize.height ? self.options.minItems : Math.floor( self.$carousel.height() / self.imgSize.height );

var itemSpace = self.options.orientation === 'horizontal' ? self.$items.outerWidth( true ) : self.$items.outerHeight( true );
// total width/height of the <ul>
var totalSpace = self.itemsCount * itemSpace;
var amount = self.fitCount * itemSpace;

// show / hide navigation buttons
Math.abs( self.translation ) > 0 ? self._toggleControls( 'prev', true ) : self._toggleControls( 'prev', false );
totalSpace - Math.abs( self.translation ) > Math.abs( amount ) ? self._toggleControls( 'next', true ) : self._toggleControls( 'next', false );


※修正に関しましては自己責任にてお願いいたします。

Comment:

Trackback URL: