jquery - bxSlider、コンテンツはドキュメントにスライドイン可能

Question

私はbxSlider（http://bxslider.com/）を使用して、カルーセルでコンテンツを表示しています。今、私のアートディレクターは、ポケットベルのアイコンがクリックされた場合に、より多くのコンテンツが必要であることを訪問者が理解できるようにしたいと思っています。これを示すために、コンテンツの読み込みが完了したら、最初のスライドを右からスライドさせたいと考えています。

私はjqueryを使用してこれを達成しようとしました：show（ "slide"、{direction： "right"}、1000）; 含まれているulに。しかし、スライド効果は得られません。代わりに、それは明らかに表示されます。

なぜこれがこのように動作するのか、またはこれを達成するための別の方法を知っている人はいますか？

コード：

<script type="text/javascript>
$(document).ready(function () {

        var slides = $("#eventslider>li");

        if (slides.length < 4) {
            $('#next-button').hide();
        }

        var slider = $('#eventslider').bxSlider({
            controls: false,
            mode: 'horizontal',
            displaySlideQty: 3,
            moveSlideQty: 3,
            infiniteLoop: false,
            hideControlOnEnd: true
        });

        setTimeout("showSlider()", 1000);


    });

    function showSlider() {
        $("#eventslider").show('slide', { direction: 'right' }, 1000);
    }
</script> 

<ul id="eventslider" style="display:none">

    <li>
        <p class="date">
            2011-12-31</p>

        <h3><a href="http://domain/en-gb/events_training/Pages/Event-wo-Image.aspx">
            Event wo Image</a></h3>
        <p class="rollUp">Lorem ipsum dolor, sit amet</p>

        <p>
            <a href="http://domain/en-gb/events_training/Pages/Event-wo-Image.aspx">
                Read more
            </a>
        </p>
    </li>

    <li>
        <p class="date">
            2011-12-16</p>
        <div class="imagecontainer"><a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx"><img src="/SiteCollectionImages/industries/top/yellowcoats.jpg" alt="" /></a></div>            
        <h3><a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx">
            Local event sweden</a></h3>
        <p class="rollUp">Vad som helst</p>

        <p>
            <a href="http://domain/se/events_training/Pages/Lokal-händelse-sverigeen-GB.aspx">
                Read more
            </a>
        </p>
    </li>

    <li>
        <p class="date">
            2011-12-14</p>

        <h3><a href="http://domain/en-gb/events_training/Pages/Older-event.aspx">
            Older event</a></h3>
        <p class="rollUp">asfasdf</p>

        <p>
            <a href="http://domain/en-gb/events_training/Pages/Older-event.aspx">
                Read more
            </a>
        </p>
    </li>

    <li>
        <p class="date">
            2011-10-19</p>
        <div class="imagecontainer"><a href="http://domain/en-gb/events_training/Pages/Test.aspx"><img src="/SiteCollectionImages/126084-matte-white-square-icon-transport-travel-transportation-airplane1.png" alt="" /></a></div>            
        <h3><a href="http://domain/en-gb/events_training/Pages/Test.aspx">
            Test</a></h3>
        <p class="rollUp">Test again</p>

        <p>
            <a href="http://domain/en-gb/events_training/Pages/Test.aspx">
                Read more
            </a>
        </p>
    </li>

    </ul>

よろしく、リカード