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>

此致里卡德

bxSlider，内容在文档准备就绪时滑入

0 个答案: