Показать сообщение отдельно
  #1 (permalink)  
Старый 06.09.2015, 00:28
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

Как организовать два слайдера по принципу обложка-внутренние страницы?
Всем доброго времени суток! Снова обращаюсь к вам за помощью в решении такой задачи. Прошу кто может помогите советом или вариантом решения.
В общем дело такое -
Нужно организовать два слайдера:
в первом крутятся так назовем обложки журнала
а во втором внутренние страницы каждой обложки соответственно.
В следствии если мы переходим по первому слайдеру, содержимое второго меняется.
На данный момент на странице реализовано два слайдера - ( я использую слайдер 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, то есть тут нужно как-то по-другому это реализовать, но у меня полный стопор и я не понимаю как дальше двигаться чтобы до конца довести до нужного результата.
Прошу помогите, если это сложное решение, и оно требует материального вознаграждения (в разумных пределах ) прошу напишите, я готова рассмотреть такой вариант помощи, как говорится ну очень надо))
Спасибо заранее за ответы и помощь.
Ответить с цитированием