Как добиться горизонтального эффекта слайдера jQuery

У меня есть список элементов html <li>, я хочу, чтобы это прокручивалось по горизонтали с помощью jQuery и чтобы показать текущую дату больше, это то, что я мог бы делать с текстовыми эффектами, но у меня есть не знаю, как идти о кодировании горизонтального слайдера.Как добиться горизонтального эффекта слайдера jQuery

говорят, что все, что я до сих пор ниже или просмотра jsFiddle

<div class="yearswrapper"> 
    <ul class="yearslist"> 
     <li><a href="">2003</a></li> 
     <li><a href="">2004</a></li> 
     <li><a href="">2005</a></li> 
     <li><a href="">2006</a></li> 
     <li><a href="">2007</a></li> 
     <li><a href="">2008</a></li> 
     <li><a href="">2009</a></li> 
     <li><a href="">2010</a></li> 
     <li><a href="">2011</a></li> 
     <li><a href="">2012</a></li> 
     <li><a href="">2013</a></li> 
    </ul> 
    <p id="left">Slide Left</p> 
    <p id="right">Slide right</p> 
</div>

css.css

.yearslist li { 
    display:inline; 
}

источник

2013-10-07 001221

Что не вы пробовали до сих пор? Это ссылки на [jQuery] (http://jquery.com/) и [jQuery Plugins] (http://plugins.jquery.com/) являются хорошей отправной точкой. –

Заканчивать jQuery слайдера: http://jqueryui.com/slider/ (убедитесь, что вы загрузить JQuery , jQuery UI и UI CSS).

Как только у вас есть рабочий слайдер, есть событие под названием slide. Каждый раз, когда пользователь меняет значение ползунка, он проверяет это событие слайда. Концепция заключается в том, что вы проверите значение slide и измените значение CSS соответственно.

$('#slider').slider({ 
    value: 1, // start at first li 
    step: 1, // slider moves up and down one to check each year 
    max: 13, // end at year 2013 
    slide: function(event, ui) { 
     //check against the ui.value and change CSS 
     $('li').eq(ui.value).css('font-weight', 'bold'); 
    } 
})

Существует больше документации на jQuery слайдера здесь: http://api.jqueryui.com/slider/

источник

2013-10-07 14:57:14 Phil

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

Если вы используете переполнение на «yearswrapper» вы можете получить горизонтальную полосу прокрутки появляются. Затем вы можете поместить полосу прокрутки - эту страницу, может быть некоторой помощи:

http://api.jquery.com/?s=scroll

или это может помочь:

Crossbrowser content scroller with custom look

источник

2013-10-07 14:50:05 matpol

Как добиться горизонтального эффекта слайдера jQuery

ответ

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