1

ここでデモされているのと同様の「スライダー」を構築しようとしていますhttp://ui.jquery.com/repository/real-world/product-slider/しかし、リスト項目内で内部 div を使用しようとしています ( <li>) . <p>画像またはブロック要素 ( 、<div>など)を使用していない場合、このデモは壊れているようです。

これに対する簡単な解決策はありますか？<div>私は基本的に、画像を使用する代わりに、テキストと場合によっては画像を使用したいと考えています。

jCarousel は機能しているように見えますが、もう少し軽量なものを探していましたか? 何か案は？

4

2 に答える 2

2

あなたがやろうとしていることの実用的な例があると思いますが、いくつかの問題があります。

ベースとして投稿した例を使用して、UL 内の LI の HTML マークアップを、コンテナー DIV 内の DIV に置き換えることができます。例えば：

        <div class="sliderGallery">
          <div class="div-that-gets-cropped">
            <div class="text-and-images-chunk">Some text!<br /><img class="pb-airportexpress" src="slider-gallery_files/pb_airport_express.jpg" /></div>
            <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_airport_extreme.jpg" /></div>
            <div class="text-and-images-chunk">Some text!<br /><img src="slider-gallery_files/pb_timecapsule_20080115.jpg" /></div>
            ...
          </div>

次に、ページ内の jQuery コードを変更して、UL ではなくそのコンテナー DIV をターゲットにします。

   window.onload = function () {
        var container = $('div.sliderGallery');
        var divThatGetsCropped = $('div.div-that-gets-cropped', container);
        var itemsWidth = divThatGetsCropped.innerWidth() - container.outerWidth();
        $('.slider', container).slider({
            minValue: 0,
            maxValue: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                divThatGetsCropped.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                divThatGetsCropped.css('left', ui.value * -1);
            }
        });
    };

次に、重要な CSS の変更を行う必要があります... 元の例では、LI を表示するスタイルに依存していました: インライン、オーバーフローが隠されているコンテナー内。これらの "text-and-images-chunk" DIV をインラインで表示するようにスタイル設定するだけでは、すべてを正しく表示しようとすると頭痛の種になります。あなたはおそらくそれらすべてを浮かせたいと思うでしょう。

しかし、フローティング要素は、「 sliderGallery」DIVによって「明らかに」される方法のため、コンテナ「div-that-gets-cropped」DIVではうまく再生されません（少なくともそれがFirefox 3.03で経験していることです） ）。「div-that-gets-cropped」DIV (10000 ピクセル) に非常に大きな幅を設定することで、これを回避しました。

        .sliderGallery div.div-that-gets-cropped {
          position: absolute;
          list-style: none;
          overflow: none;
      white-space: nowrap;
      padding: 0;
          margin: 0;
          width: 10000px;
        }

        .sliderGallery div.div-that-gets-cropped div.text-and-images-chunk {
      float: left;
      margin-right: 24px;
        }

そして、.slider-lbl1、.slider-lbl2 の「左」の値を微調整して、最終的な幅に合わせて調整する必要があります (テキストのサイズによって「 text-and-images-chunk" 要素)。

私が気づいた 1 つの問題は、ブロック レベルの要素に画像がある場合、インラインを使用した例のように、画像を下部に「抱きしめる」良い方法がないことです。要素の配置をいじることでこれを機能させることができるかもしれませんが (私にはできませんでした)、これが特定の使用法では大した問題にならないことを願っています。

そうは言っても、jCarousel は、コードが少し大量に追加されたとしても、まさにあなたがやっていることを意図しているようです。

于 2008-10-13T06:41:18.063 に答える
0

jCarousel Lite プラグインを確認してください。非常に便利で、設定が簡単であることがわかりました。

http://www.gmarwaha.com/jquery/jcarousellite/index.php?#demo

于 2009-06-20T13:33:39.487 に答える