jQuery Cycle Custom Navigation - PullRequest
Новая
       33

jQuery Cycle Custom Navigation

2 голосов
/ 23 марта 2011

Использование плагина jQuery Cycle для создания слайд-шоу контента (не картинок) - как бы мне заставить работать приведенный ниже код?

Это мой контент слайд-шоу: 

        <div id="slideshow">
            <div>
                <h1>Title One</h1>
                <p>Description for title one</p>         
            </div>
            <div>
                <h1>Title two</h1>
                <p>Description for title two</p>         
            </div>
            <div>
                <h1>Title Three</h1>
                <p>Description for title three</p>         
            </div>
            <div>
                <h1>Title Four</h1>
                <p>Description for title four</p>         
            </div>
        </div>

Иэто пользовательская навигация ниже: 

        <div id="slideshow-nav">
            <ul>
                <li>
                    <a href="#">
                        <span class="thumb one"></span>
                        <span class="title">One</span>
                        <span class="desc">Desc one</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="thumb two"></span>
                        <span class="title">Two</span>
                        <span class="desc">Desc two</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="thumb three"></span>
                        <span class="title">three</span>
                        <span class="desc">Desc three</span>
                    </a>
                </li>
                <li class="last">
                    <a href="#">
                        <span class="thumb four"></span>
                        <span class="title">Four</span>
                        <span class="desc">Desc Four</span>
                    </a>
                </li>

            </ul>
        </div>

Очевидно, я хочу, чтобы ссылки привязки в навигационной панели соответствовали правому слайду выше.Я также хотел бы, чтобы «активный» класс был добавлен к текущей выбранной навигации, если это возможно?

В качестве примера, Brightcove (http://www.brightcove.com/en/) делает более или менее то, что я пытаюсь достичь в этом слайд-шоу.

Спасибо

1 Ответ

9 голосов
/ 23 марта 2011

Проблема решена:

Я использовал этот код: 

        $('#slideshow').cycle({
            fx: 'scrollHorz',
            speed: 500,
            timeout: 8000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#slideshow-nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '#slideshow-nav li:eq(' + (idx) + ')';
            }
        });

        $('#slideshow-nav li').click(function() { 
            $('#slideshow').cycle('pause'); 
        });

        $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
            $(pager).find('li').removeClass('activeLI') 
                .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
        };

Убедитесь, что вы используете "jquery.cycle.all.min.js", а не облегченную версию, как этоне поддерживает параметр пейджера.

...