Как использовать flexslider в двух вкладках jquery ui?

Question

Как использовать flexslider в двух вкладках jquery ui?

0

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

<div id="tabs-1">
                        <div class="flexslider " >
                            <ul class="slides">
                                <li data-thumb="images/1_thumb.jpg">
                                    <img src="images/1.jpg ">

                                </li>
                                <li data-thumb="images/2_thumb.jpg">
                                    <img src="images/2.jpg">

                                <li data-thumb="images/3_thumb.jpg">
                                    <img src="images/3.jpg">

                                </li>
                                <li data-thumb="images/4.jpg">
                                    <img src="images/4.jpg">

                                </li>
                            </ul>
                        </div>
                    </div>

                    <div id="tabs-2">
                        <div class="flexslider" id="slider2" >
                            <ul class="slides">
                                <li data-thumb="images/1_thumb.jpg">
                                    <img src="images/1.jpg ">

                                </li>
                                <li data-thumb="images/2_thumb.jpg">
                                    <img src="images/2.jpg">

                                <li data-thumb="images/3_thumb.jpg">
                                    <img src="images/3.jpg">

                                </li>
                                <li data-thumb="images/4.jpg">
                                    <img src="images/4.jpg">

                                </li>
                            </ul>
                        </div>


                    </div>

сценарий:

        $( "#tabs" ).tabs({
  create: function( e, ui ) {
    ui.panel.find( ".flexslider" ).flexslider({
        animation: "slide",
        controlNav: "thumbnails",
       // animationLoop: false,
        slideshow: false

    });
},
beforeActivate: function( e, ui ) {
    ui.oldPanel.find( ".flexslider" ).flexslider( "destroy" );
    ui.newPanel.find( ".flexslider" ).flexslider({
        animation: "slide",
        controlNav: "thumbnails",
        //animationLoop: false,
        slideshow: false

    });
}
});

Это ссылка на сайт https://dl.dropboxusercontent.com/u/168659703/zaarly_v2/page1.html. Когда я установил

  animationLoop: false

то работает отлично. Скажите, пожалуйста, где проблема.

Bir 11 нояб. 2013, в 06:15

Источник

0

Попытайтесь загрузить ur js вверху страницы, а не в конце
swetha 11 нояб. 2013, в 04:46
0

для инициализации flexslider в jquery попробуйте использовать селектор идентификатора, а не селектор класса, дайте обоим слайдерам разные идентификаторы, а затем попробуйте сделать это
Rahul Gupta 13 нояб. 2013, в 08:40

Теги:

javascript

jquery

flexslider

1 ответ

Ещё вопросы

Попытайтесь загрузить ur js вверху страницы, а не в конце
для инициализации flexslider в jquery попробуйте использовать селектор идентификатора, а не селектор класса, дайте обоим слайдерам разные идентификаторы, а затем попробуйте сделать это

VJS · Answer 1 · 2013-11-11T04-09-00.000Z

Любой компонент, который требует некоторых вычислений по размеру для его инициализации, не будет работать на скрытой вкладке, потому что панель вкладок сама скрыта с помощью отображения: none; так что любые элементы внутри него не будут сообщать о своей фактической высоте и ширине. (0 в большинстве браузеров)

Вот ваше решение

$( "#tabs" ).tabs({
 beforeActivate: function( e, ui ) {
     if(ui.oldTab.length>0){
        ui.oldTab.find( ".flexslider" ).flexslider( "destroy" );
     }
 },
 show: function(e,ui){
    $(ui.panel).find( ".flexslider" ).flexslider({
    animation: "slide",
    controlNav: "thumbnails",
    animationLoop: false,
    slideshow: false
    });
 }
});

Я удаляю слайдер в "beforeActivate" и инициализирую следующий слайдер вкладки в "show". Потому что к тому времени новая вкладка активируется и отображается.