Как организовать два слайдера по принципу обложка-внутренние страницы?
 

Всем доброго времени суток! Снова обращаюсь к вам за помощью в решении такой задачи. Прошу кто может помогите советом или вариантом решения.
В общем дело такое -
Нужно организовать два слайдера:
в первом крутятся так назовем обложки журнала
а во втором внутренние страницы каждой обложки соответственно.
В следствии если мы переходим по первому слайдеру, содержимое второго меняется.
На данный момент на странице реализовано два слайдера - ( я использую слайдер flexslider - http://pcvector.net/scripts/slidesho...y-slayder.html)

<div class="slider-main flexslider">
                            <ul class="slides">
                                <li data-thumb="slides/slide1-1.jpg|slides/slide1-2.jpg|slides/slide1-3.jpg|slides/slide1-4.jpg|slides/slide1-5.jpg|slides/slide1-6.jpg">
                                    <img src="slides/slide1.jpg"  alt="" />
                                </li>
                                <li data-thumb="slides/slide2-1.jpg|slides/slide2-2.jpg|slides/slide2-3.jpg|slides/slide2-4.jpg">
                                   <img src="slides/slide2.jpg"  alt="" />
                                </li>
                                <li data-thumb="slides/slide3-1.jpg|slides/slide3-2.jpg|slides/slide3-3.jpg|slides/slide3-4.jpg">
                                    <img src="slides/slide3.jpg"  alt="" />
                                </li>
                                <li data-thumb="slides/slide4-1.jpg|slides/slide4-2.jpg">
                                    <img src="slides/slide4.jpg"  alt="" />
                                </li>
                            </ul>
                        </div>
                        <div class="minislider flexslider">
                            <ul class="slides">
                                <li>
                                   <img src="" />
                                </li>
                                <li>
                                    <img src="" />
                                </li>
                                <li>
                                   <img src="" />
                                </li>
                                <li>
                                    <img src="" />
                                </li>
                            </ul>
                        </div>

Верхний слайдер обложек - .slider-main
Слайдер для внутренних фотографий - .minislider
У flexslider активный слайд имеет класс flex-active-slide.
В итоге мое незаконченное решение выглядит так

/
 $(window).load(function() {

//настройка для главного слайдера обложек
            $('.slider-main').flexslider({
                animation: "slide",
                controlNav: false,
                slideshow: false
            });

//настройка для слайдера внутренних страниц каждой обложки
      
            $('.minislider').flexslider({
                animation: "slide",
                animationLoop: false,
                itemWidth: 200,
                itemMargin: 5,
                minItems: 2,
                maxItems: 3,
                directionNav: false,
                slideshow: false
            });


//здесь собственно моя попытка выборки внутренних фотографий для каждой обложки

            var activeSlide = $('.slider-second .flex-active-slide'),
                renderSlide = $('.minislider li img'),
                renderLinkSlide = $('.minislider .gallery-box'),
                images = [],
                selectedImages;
                activeSlide.each(function() {
                    selectedImages = activeSlide.attr('data-thumb').split('|');
                    images = images.concat(selectedImages);
                    for(var i=0;i<images.length;i++){
                        renderSlide.eq(i).attr('src',images[i]);
                        renderLinkSlide.eq(i).attr('href',images[i]);
                        $('.minislider').flexslider({
                            animation: "slide",
                            animationLoop: false,
                            itemWidth: 200,
                            itemMargin: 5,
                            minItems: 2,
                            maxItems: 3,
                            directionNav: false,
                            slideshow: false
                        });
                    }
                });
    });

В результате моих попыток в .minislider отображаются img только первого загруженного активного слайдера .slider-main (<li data-thumb="slides/slide1-1.jpg|slides/slide1-2.jpg|slides/slide1-3.jpg|slides/slide1-4.jpg|slides/slide1-5.jpg|slides/slide1-6.jpg"><img src="slides/slide1.jpg" alt="" /></li>)
а при переходе, когда другой слайдер становится активный и имеет класс .flex-active-slide, картинки в .minislider не обновляются.
И вторая проблема не добавляются элементы в слайдер .minislider если внутренних фотографий обложки больше, чем 4, то есть тут нужно как-то по-другому это реализовать, но у меня полный стопор и я не понимаю как дальше двигаться чтобы до конца довести до нужного результата.
Прошу помогите, если это сложное решение, и оно требует материального вознаграждения (в разумных пределах:) ) прошу напишите, я готова рассмотреть такой вариант помощи, как говорится ну очень надо))
Спасибо заранее за ответы и помощь.

helgajijka,

$(window).load(function() {
    $(".slider-main").flexslider({
        animation: "slide",
        controlNav: false,
        slideshow: false,
        after: function(sl) {
            var images = $(sl.slides[sl.currentSlide]).data("thumb").split("|");
            $.each(images, function(indx, src) {
                slider.addSlide($('<li><img src="' + src + '" /></li>'), indx)
            });
            $.each(slider.slides, function(indx, el) {
                indx >= images.length && slider.removeSlide(el)
            })
        }
    });
    var slider = $(".minislider").flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 200,
        itemMargin: 5,
        minItems: 2,
        maxItems: 3,
        directionNav: false,
        slideshow: false
    }).data("flexslider")
});

рони,
Огромное спасибо за помощь! Как всегда Вы меня выручаете, и Ваше решение как всегда очень оригинальное и правильное. Реально круто получилось именно то, что нужно!
А меня совсем в другом направлении занесло на пути решения этого вопроса)) тут оказывается нужно задействовать calback api самого слайдера, и в целом теперь я вижу насколько неправильна была моя попытка, не хватает знаний и опыта в решении такого рода задач))
Если можно, объясните мне участок где именно определяется, что если картинок больше, то добавляется новый элемент, вот на этом участке не очень понимаю как вычисляется indx -

$.each(slider.slides, function(indx, el) {
               indx >= images.length && slider.removeSlide(el)
            })

Еще и еще раз огромное Вам спасибо за Ваш неутомимый труд, и за помощь! :thanks:

гмм в коде нет этого
есть массив слайдов -- меняем с начала массива картинки на новые - строки 8-10
обрезаем старые лишние в конце массива, если есть - строки 11 - 13
идёт перебор всего массива слайдов slider.slides - если массив больше чем добавили лишнее удаляется.
читать надо документацию про slider.removeSlide и slider.addSlide и data("flexslider").

рони,
спасибо за объяснение, теперь мне стало ясно по этому моменту.

а про документацию про slider.removeSlide и slider.addSlide и data("flexslider") действительно я не обратила внимания на эти ключевые методы для этой задачи, на github https://github.com/woothemes/FlexSlider теперь нашла , спасибо еще раз!