Здравствуйте! Достался слайдер на sly.js со следующими настройками:
$(document).ready(function(){
// fancybox
if ($('a').is('.fancybox')) {
$('.fancybox').fancybox();
}
// Картинки записываются как бекграунд
$('.gallery .gmask > ul > li, .gallery1 .gmask > ul > li').each(function(){
var self = $(this),
selfImg = self.find('img'),
selfImgUrl = 'url('+ selfImg.attr('src') + ')';
self.css("background-image", selfImgUrl);
});
// sly
// высота лишек
galleryH();
galleryH1();
$(window).resize(function(){
initSly();
galleryH();
galleryH1();
});
initSly();
function initSly() {
if ($('div').is('.gallery') || $('div').is('.gallery1')) {
var $frame1 = $('.gallery .gmask');
$frame1.each(function() {
var $wrap1 = $(this).parent();
$(this).sly({
horizontal: 1,
itemNav: 'forceCentered',
activateMiddle: 1,
smart: 1,
itemSelector: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBy: 0,
speed: 600,
elasticBounds: 1,
easing: 'swing',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
pagesBar: $wrap1.find('.pagination'),
activatePageOn: 'click',
pageBuilder: function(index) {
return '<li>' + (index + 1) + '</li>';
},
cycleBy: 'items',
cycleInterval: 6000,
pauseOnHover: 0,
prev: $wrap1.find('.btn-prev'),
next: $wrap1.find('.btn-next')
});
$(this).find('li').width($(this).width());
if ($(this).parent().hasClass('reviews-gallery') && $(window).width() < 1200) {
var _this = $(this);
$(this).sly('destroy');
_this.find('.reviews-list').css('width', 'auto');
return false;
}
});
$frame1.sly('reload');
var $frame = $('.gallery1 .gmask');
$frame.each(function() {
var $wrap1 = $(this).parent();
$(this).sly({
horizontal: 1,
itemNav: 'forceCentered',
activateMiddle: 1,
smart: 1,
itemSelector: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBy: 0,
speed: 600,
elasticBounds: 1,
easing: 'swing',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
pagesBar: $wrap1.find('.pagination'),
activatePageOn: 'click',
pageBuilder: function(index) {
return '<li><img src="images/min-img' + (index + 1) + '.jpg" width="80" height="78" /></li>';
},
pauseOnHover: 0,
prev: $wrap1.find('.btn-prev'),
next: $wrap1.find('.btn-next')
});
$(this).find('li').width($(this).width());
if ($(this).parent().hasClass('reviews-gallery') && $(window).width() < 1200) {
var _this = $(this);
$(this).sly('destroy');
_this.find('.reviews-list').css('width', 'auto');
return false;
}
});
$frame.sly('reload');
var $frame2 = $('.gallery1 .pagination-box');
$frame2.each(function() {
var $wrap1 = $(this).parent();
$(this).sly({
horizontal: 1,
itemNav: 'forceCentered',
activateMiddle: 1,
smart: 1,
itemSelector: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
scrollBy: 0,
speed: 600,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
activatePageOn: 'click',
activateOn: 'click',
/*cycleBy: 'items',
cycleInterval: 6000,
pauseOnHover: 0*/
});
if ($(this).parent().hasClass('reviews-gallery') && $(window).width() < 1200) {
var _this = $(this);
$(this).sly('destroy');
_this.find('.reviews-list').css('width', 'auto');
return false;
}
});
$frame2.sly('reload');
}
}
});
<div class="pagination-box">
<ul class="pagination">
</ul>
</div>
<div class="gmask">
<ul>
</ul>
</div>
Суть проблемы: даже если вставлять для превьшек свой код (между
<ul class="pagination"></ul>) он его меняет на то, что в строке
088 кода выше. Комментирование строк ничего не дает. Как его изменить таким образом, что бы он осуществлял навигацию по тем картинкам, которые вставляются туда списком
<li></li> посредсвом ЦМС?