bxSlider, содержимое вставляется в документ готов - PullRequest
Новая
       283

bxSlider, содержимое вставляется в документ готов

1 голос
/ 27 декабря 2011

Я использую bxSlider (http://bxslider.com/) для отображения контента в карусельной форме). Теперь мой арт-директор хочет, чтобы я убедился, что посетители понимают, что при нажатии на значки пейджера будет больше контента Чтобы указать на это, он хочет, чтобы первый слайд скользил справа, когда содержимое будет загружено.

Я пытался добиться этого с помощью jquery's: show ("slide", {direction: "right"}, 1000); на содержащий ул. Но эффект скольжения не достигается. Вместо этого он просто появляется.

Кто-нибудь, кто знает, почему это ведет себя так или знает другой способ добиться этого?

Код: 

<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>

С уважением, Рикард

...