Несколько слайдеров Jquery на одной странице - PullRequest
Новая
       19

Несколько слайдеров Jquery на одной странице

1 голос
/ 19 августа 2011

Я использую плагин jquery, слайды для питания моего слайдера.Я хочу, чтобы на моей странице было 3 ползунка, только один показ.У меня есть три кнопки, которые пролистывают ползунки.Ниже приведены html и jquery для моих кнопок:

HTML 

<ul class="tabs">
            <li><a href="#tab1">Slider 1</a></li>
            <li><a href="#tab2">Slider 2</a></li>
            <li><a href="#tab3">Slider 3</a></li>

        </ul>

JQUERY 

 $(".tab_content").hide();
                $("ul.tabs li:first").addClass("active").show(); 
                $(".tab_content:first").show(); 

                $("ul.tabs li").click(function() {

                    $("ul.tabs li").removeClass("active"); 
                    $(this).addClass("active"); 
                    $(".tab_content").slideUp(600);

                    var activeTab = $(this).find("a").attr("href"); 
                    $(activeTab).fadeIn(3500); 
                    return false;
                });

Рабочую демонстрацию страницы можно посмотреть здесь: http://vitaminjdesign.com/example/examples/Standard/index.html

Как видите, работает, но не хорошо.JQuery, который скрывает каждый слайдер при нажатии, работает, но я чувствую, что есть гораздо лучшее решение.При загрузке страницы загружаются все три ползунка (два скрытых).Это нормальная практика?

Есть ли лучший способ работы с тремя ползунками, чем то, как я его использую?Или, может быть, у вас есть несколько советов или приемов, чтобы сделать это намного чище и лучше переходить между слайдами?Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 20 августа 2011

Использование Jquery scrollTo привело к решению со следующим jquery: 

$('#hero-slider ul a.pita').click(function () {

                $('#hero-slider ul a').removeClass('activeSlide');
                $(this).addClass('activeSlide');    
                $('.maskss').scrollTo($(this).attr('rel'), 500);
                return false;       

            });

просмотреть его в реальном времени: http://vitaminjdesign.com/example/examples/Standard/index.html

0 голосов
/ 19 августа 2011

Загрузка содержимого, скрытого на странице, вполне приемлема, если его загрузка не займет вечность.

Но в этом случае я мог бы рассмотреть возможность использования одного слайдера и просто загрузки изображений внутри контейнера слайдера.область при щелчке http://api.jquery.com/load/ Обратите внимание, что вы можете загрузить контент из одного документа (показанного на странице jquery api), добавив дополнительные элементы с id.Думаю, я не уверен, как ваш слайдер обрабатывает дополнительные контейнеры.

Таким образом, я считаю, что вы должны иметь возможность использовать один слайдер и загружать все изображения внутри него, не путая слайдер, в отличие от загрузки всех изображений внутри одного.слайдер и скрывающий те .. что должно смущать большинство слайдеров.

...