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