2013-08-06 2 views
0

я ищу слайдер, который имеет функцию, чтобы добавить имя слайда в навигации, а не числа, как судоходствеИзменить Basic-слайдер с текстом, как навигация, кроме цифр

Ниже простой JQuery Slider http://basic-slider.com/

I был бы признателен, если некоторые из них могут сказать мне, если я могу изменить этот ползунок, так что я могу заменить пули нав с горкой Имя и иметь такую ​​же функциональность

Slide 1Slide 2Slide 3Slide 4

OnMouse Наведите указатель поворота на соответствующий слайд & onMouse Click он должен перейти к определенной ссылке.

Может же быть с ползунком Nivo

+0

К сожалению, вам нужно изменить сценарий, чтобы добавить необходимые функции. Должны ли мы сделать версию редактирования? –

+0

Я был бы признателен, если кто-то может помочь мне в этом, так как я больше разработчик, который может сделать немного скриптов не так. Я ищу решение до сих пор мне не повезло .. Даже если слайдер с подобной функцией будет удобен, так как я открыт для использования других слайдеров также – Learning

+0

Сначала попробуйте сделать это сами и покажите нам код, который вы пробовали, если он выходит из строя. – tb11

ответ

2

Slider использование навигации текста заголовка, а не номер:

<ul class="bjqs"> 
     <li title="Slide 1"> ... </li> 
     <li title="Slide 2"> ... </li> 
     <li title="Slide 3"> ... </li> 
    </ul> 

Javascript редактировать строки # 478 изменение этой

var slidenum = key + 1, 

с этим :

var slidenum = $(slide).attr('title') === undefined ? key + 1 : $(slide).attr('title'), 

Нажмите и парить Функция добавления:

Javascript добавить в строке # 56:

captionUrlArray : [] //Url for each of the captions 

Javascript добавить в строке # 488:

var newUrl = settings.captionUrlArray[key]; 

Javascript редактировать строку # 495 изменить это

marker.on('click','a',function(e){ 

к этому:

marker.on('mouseover','a',function(e){ 

* Не забудьте установить captionUrlArray при вызове библиотеки слайдера !!! *

$('#banner-slide').bjqs({ 
     animtype  : 'slide', 
     height  : 320, 
     width   : 620, 
     responsive : true, 
     randomstart : true, 
     captionUrlArray: [ "http://google.com", "", "http://example.com" ] 
     }); 

Окончательный рабочий сценарий здесь: http://jsfiddle.net/dEsWp/4/

+0

Цените, что это отличная работа – Learning

Смежные вопросы