26.12.2016, 11:52
|
Новичок на форуме
|
|
Регистрация: 26.12.2016
Сообщений: 4
|
|
Правильная анимация миниатюр на слайдере flexslider jquery
На сайте установлена CMS: DLE 11.2
Есть слайдер, для активации которого требуется ввести соответствующее поле в доп. поля.
В шаблоне встроен flexslider jquery. Сам слайдер выглядит таким образом: есть два блока с увеличенной картинкой и блок с миниатюрами картинок. В блок с миниатюрами помещаются 6 картинок, а над самим блоком с миниатюрами находится блок с увеличенной выбранной картинкой, соответственно. Загрузил 10 картинок не через код, а через функцию загрузки картинок при добавлении новости.
И вот в чем проблема: когда листаю увеличенные картинки, миниатюры так же двигаются за соответствующей картинкой. Когда я пролистываю на 7 картинку, блок с миниатюрами, получается, показывает ее, типа передвигаясь левее (сам блок с миниатюрами показывает только 6 картинок). Все отлично, но как только я перехожу на 8 картинку в блоке с увеличенными картинками, миниатюра дальше не двигается. Будто стоит предел перелистывания в 7 картинок. Так же на миниатюрах есть стрелки прокрутки - они работают нормально, но как только я прошу показать 9 и 10 фотографию, миниатюры показываются, и как только хочу просмотреть 9 или 10 картинку увеличенной, то картинка увеличивается, а миниатюры возвращаются обратно к своему пределу - 7 картинок. Не остается миниатюры на картинке, которую я выбрал после 7 картинки.
Соответственно, подключен javascript файл jquery.flexslider-min.js и таблица стилей, ну и HTML.
Вот пример слайдера и прокрутки миниатюр за основной картинкой: http://bayguzin.ru/demo/galleria_cla...ssic-demo.html
Подскажите, как решить проблему?
|
|
26.12.2016, 12:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Сообщение от akseft
|
Загрузил 10 картинок не через код, а через функцию загрузки картинок при добавлении новости.
|
кто же слайеру обьяснит, что ему картинок добавили? ищите api слайдера , и если у него есть addItem, им и добавьте новые картинки.
|
|
26.12.2016, 13:28
|
Новичок на форуме
|
|
Регистрация: 26.12.2016
Сообщений: 4
|
|
Сообщение от рони
|
кто же слайеру обьяснит, что ему картинок добавили? ищите api слайдера , и если у него есть addItem, им и добавьте новые картинки.
|
Ну а почему же лимит на 7 картинок?
Логические, его можно увеличить, лимит этот.
А кроме addItem, есть еще код, отвечающий за количество картинок?
|
|
26.12.2016, 13:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
akseft,
видимо я не понимаю о чём вы пишите, поэтому помочь не могу.
|
|
26.12.2016, 13:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
akseft,
есть такой параметр как ширина миниатюр
itemWidth: 20, попробуйте изменить, сделайте меньше, чтоб больше вошло.
|
|
26.12.2016, 14:24
|
Новичок на форуме
|
|
Регистрация: 26.12.2016
Сообщений: 4
|
|
Сообщение от рони
|
akseft,
есть такой параметр как ширина миниатюр
itemWidth: 20, попробуйте изменить, сделайте меньше, чтоб больше вошло.
|
у меня itemWidth:0 стоит.
Могу выслать Вам код, чтобы Вы его посмотрели, но кто, как говорится, будет в этом разбираться задарма. В javascript я ничего не понимаю. Знаю, что построен мой слайдер на jquery и есть java документ. Мне просто подарили шаблон, так я для себя сайт делаю.
|
|
26.12.2016, 14:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
akseft,
что мог подсказал выше
|
|
25.01.2017, 16:31
|
Новичок на форуме
|
|
Регистрация: 26.12.2016
Сообщений: 4
|
|
|
|
25.01.2017, 17:10
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Сообщение от akseft
|
у меня itemWidth:0 стоит.
|
$(window).load(function () {
$('#carousel').flexslider({
animation: 'slide',
controlNav: false,
directionNav: $arrows,
animationLoop: false,
slideshow: $autoplay,
minItems: 5,
move: 1,
itemWidth: 129,
itemMargin: 15,
asNavFor: '#slider'
});
у вас 129 - измените на 90 может поможет
|
|
25.01.2017, 17:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
akseft,
в целом это глюк плагина, это к автору слайдера, можно избежать, если все миниатюры расположить в зоне видимости уменьшив их ширину itemWidth
|
|
|
|