0

私はhttp://responsive-slides.viljamis.com/で作業しており、見出しと段落を表示し、スライドショーの外で回転させる必要があります。これに似たもの：

http://www.rodale.com/smoothie-ingredients ?

私はJSの男ではなく、いくつかのオプションを試してみましたが、うまくいきませんでした。私の現在のコードは次のとおりです。

  <script>
$(function () {

  // Slideshow
  $("#slider").responsiveSlides({
    auto: false,
    pager: false,
    nav: true,
    speed: 500,
    maxwidth: 728,
    namespace: "large-btns",
    before: function(){
        }, // Function: Before callback
    after: function(){
        $(".current").html($(".rslides").find("li#" + $("." + this.namespace +     "1_on").attr("id")).index() + 1);
    } // Function: After callback
  });
$(".total").html($(".rslides li").index() + 1);
});

スライド H3 と P を表示する DIV を追加しようとしましたが、取得できません。どんな助けでも大歓迎です。

4

1 に答える 1

1

ライブラリを編集して、現在のインデックスを after 関数に戻すのが理想的です。それにもかかわらず、簡単な修正/ハックが必要な場合:

次のようなことができます：

ここでjsfiddleを参照してください：

http://jsfiddle.net/L5T6Y/1/

次のようなサンプル html を使用します。

<div id="slide_content_body">
    <div id="slide_content_0" class="slide_content">
        <h2>Superfood Smoothies! 1</h2>
    </div>
    <div id="slide_content_1" class="slide_content" style="display: none;">
        <h2>Superfood Smoothies! 2 </h2>
    </div>
    <div id="slide_content_2" class="slide_content" style="display: none;">
        <h2>Superfood Smoothies! 3</h2>
    </div>
</div>

<div class="rslides_container">
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://viljamis.com/responsive-slides/1.jpg" alt="" />
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/2.jpg" alt="" />
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/3.jpg" alt="" />
        </li>
    </ul>
</div>

js:

$(function () {

    // Slideshow 1
    var boo = $("#slider1").responsiveSlides({
        auto: false,
        pager: true,
        nav: true,
        speed: 500,
        maxwidth: 800,
        before: function () {
        }, // Function: Before callback
        after: function () {
            $( '.slide_content' ).hide();
            $( '#slide_content_' + $('.rslides1_on').index() ).show();
        } // Function: After callback
    });
});

RE にコンテンツを入れたい場合は、次のようにできます。

このフィドルをチェックしてください：http://jsfiddle.net/dnAC2/2/

js 関数を次のように変更します。

 $('#slide_content_panel').html( $('.rslides1_on .content').html() );

htmlに関しては、次のようになります。

<div id="slide_content_panel">

</div>

<div class="rslides_container">
    <ul class="rslides" id="slider1">
        <li>
            <img src="http://viljamis.com/responsive-slides/1.jpg" alt="" />
             <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 1</h2>
            </div>
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/2.jpg" alt="" />
            <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 2</h2>
            </div>
        </li>
        <li>
            <img src="http://viljamis.com/responsive-slides/3.jpg" alt="" />
            <div class="content" style="display: none;">
                <h2>Superfood Smoothies! 3</h2>
            </div>
        </li>
    </ul>
</div>
于 2013-04-10T02:27:49.790 に答える