0

この方法でプロジェクトに bxslider を追加しました: jquery:

$(document).ready(function () {
        $('.bxslider').bxSlider({
            minSlides: 2,
            maxSlides: 3,
            slideWidth: 340,
            moveSlides: 1,
            slideMargin: 0,
            infiniteLoop: true
        });

HTML 部分:

<div style="width:100%;float: left; position: relative; bottom: 17px;">
    <ul class="bxslider" id="slider1" >
        <li style="float: left; list-style: none outside none;width:340px !important;">
<img src="/Content/images/home.png" alt="home" width="340"height="239" />
</li>
<li style="float: left; list-style: none outside none;width:340px !important;">
<img src="/Content/images/home1.png" alt="home1" width="340"height="239" />
</li>
<li style="float: left; list-style: none outside none;width:340px !important;">
<img src="/Content/images/home2.png" alt="home2" width="340"height="239" />
</li>
</ul>
</div>

次のボタンをクリックすると、スライダー内で画像が 1 つずつ移動するのがわかります。スライダーのすべての画像が終了すると、最初の画像から再び回転を開始します。この場合、小さな「空の領域」が表示されます。その後、最初の画像。空のスペースが見えないように、スムーズなループが循環的に機能するようにします。

上記の問題のリンクは

http://neelamsharma.s3.amazonaws.com/simplehtml/testing/testing.html

誰かがこれの解決策を教えてもらえますか?

事前に助けてくれてありがとう！

4

2 に答える 2

0

「ティッカー」を使用します。そのようです：

$( '.bxslider' ).bxSlider( {
      pager: false,
      slideMargin: 30,
      controls: false,
      speed: 50000,
      useCSS: false,
      ticker: true,
      tickerHover: true,
      slideWidth: 300,
      responsive: false,
      minSlides: 2,
      maxSlides: 100,
  } );

これにより、ニュース ティッカーまたは左から右への継続的なフィードの効果が作成されます。これが機能しない場合は、CSS に問題があります。このために、HTML の周りにスタイルを記述していません。ここの jQuery では、これらの bxslider 設定のみ。

于 2019-09-19T02:05:55.443 に答える