サイクルjqueryプラグインがwidth：100％をとり、オプションscrollHorzで左のスタイルにします

私はレスポンシブなレイアウトで動作するスライドショーを作成しています。数時間の作業の後、スライドショーはレイアウトに反応しますが、幅が100％オプションであるため、fn： 'scrollHorz'が正しく動作しません。 width：100％はクラスのleft：スタイルに与えられているからです。だから私の質問は、これをどのように機能させることができるかということです。私は本当に助けていただければ幸いです。サイクルjqueryプラグインがwidth：100％をとり、オプションscrollHorzで左のスタイルにします

これは

section { 
    margin: 0; 
} 
img { 
    max-width: 100%; 
} 
img.loading { 
    margin-bottom: 2em; 
    visibility: hidden; 
} 

#page-wrapper-test { 
    width: 100%; 
    margin: 0 auto; 
} 
#test { 
    width: 100%; 
} 
div.loading { 
    width: 100%; 
} 
#test section { width: 100%; }

この私のCSSの私のマークアップ

<div id="test"> 
    <section> 
     <img src="images/sliderContent_1.png" alt="Slide 1" /> 
    </section> 
    <section> 
     <img src="images/sliderContent_1.png" alt="Slide 2" /> 
    </section> 
    <section> 
     <img src="images/sliderContent_1.png" alt="Slide 2" /> 
    </section> 
</div>

であり、これはあなたのjQueryのサイクルのための高さプロパティを設定する必要が私のスクリプト

$(document).ready(function() { 
    $('#test').prepend('<img class="loading" src="images/loading.gif" />'); 
    $('#test').after('<div id="nav" class="nav">'); 
    $('#test').cycle({ 
      slideExpr: 'section', 
      fx:  'scrollHorz', 
      timeout: 0, 
      pager: '#nav', 
      next: '#test', 
      slideResize: true, 
      containerResize: false, 
      width: '100%', 
      fit: 1, 
     }); 
    });

出典

2011-08-12 okMonty

です。 scrollHorzにはいくつかの奇妙な動作があります。代わりにscrollLeftを使うことをお勧めします。しかし、必要に応じて、ページャのカスタム機能をscrollRightに設定する必要があります。

$('#test').prepend('<img class="loading" src="" />'); 
$('#test').after('<div id="nav" class="nav">'); 
$('#test').cycle({ 
    slideExpr: 'section', 
    fx: 'scrollLeft', 
    timeout: 1000, 
    pager: '#nav', 
    next: '#test', 
    slideResize: true, 
    containerResize: false, 
    width: '100%', 
    height: "100px", 
    fit: 1, 
});

ここ

、あなたのポケットベルのカスタム関数を使用することができます方法は次のとおりです：

var $test = $('#test'); 

$test.prepend('<img class="loading" src="" />'); 
$test.after('<div id="nav" class="nav">'); 
$test.cycle({ 
    slideExpr: 'section', 
    fx: 'scrollLeft', 
    timeout: 2000, 
    pager: '#nav', 
    next: '#test', 
    slideResize: true, 
    containerResize: false, 
    width: '100%', 
    height: "200px", 
    fit: 1, 
    after: function(currSlideElement, nextSlideElement, options) { 
     slideIndex = options.currSlide; 
     nextIndex = slideIndex + 1; 
     prevIndex = slideIndex -1; 

     if (slideIndex == options.slideCount-1) { 
      nextIndex = 0; 
     } 

     if (slideIndex == 0) { 
      prevIndex = options.slideCount-1; 
     } 
    }, 
    pageAnchorBuilder: function(idx, slide) { 
     return '<a href="#">' + idx + 'a</a>'; 
    } 
}); 
var $navChildren = $('#nav').children(); 
$navChildren.unbind('click'); 
$navChildren.click(function(e) { 
    var idx = $navChildren.index(this); 
    if (idx < slideIndex) { 
     $test.cycle(idx, 'scrollRight'); 
    } 
    else if (idx > slideIndex) { 
     $test.cycle(idx); 
    } 
    e.preventDefault(); 
});

はここでそれをチェックアウト：
http://jsfiddle.net/vfonic/uTpqB/

出典

2011-09-19 13:19:33