Нужен слайдер на jQuery с полосой прокрутки и стрелочками одновременно

Мне нужен слайдер контента на jQuery с полосой прокрутки и стрелками одновременно. Что-то вроде этого, но со стрелками по бокам, как это. Стрелки должны появляться при наведении родительского тега. ищу в инете. Но я не могу найти то, что мне нужно. Кто-нибудь знает такой слайдер?


jquery jquery-slider
person Anna Presnyakova    schedule 15.05.2012    source источник
comment
Вам, скорее всего, потребуется создать его самостоятельно, который при щелчке стрелки вычисляет текущую левую позицию и перемещает ее на оставшуюся часть, чтобы выровнять ее со следующим изображением, это не будет слишком сложно.   -  person Mark Pieszak - Trilon.io    schedule 25.07.2012

Ответы (4)


arrow_upward
7
arrow_downward

Используйте метод value, чтобы установить значение ползунка на следующую/предыдущую страницу при нажатии кнопки "следующая/предыдущая". . Для этого требуется около 10 строк JavaScript с jQuery и пользовательским интерфейсом.

Я разработал его на основе ползунка по предоставленной вами ссылке. Код JS выглядит следующим образом, и его можно найти в этой скрипте.

var max = , pageWidth = ; // see the fiddle for the full code
$('#prev, #next').click(function(){
    var current = $("#slider").slider('value');
    var to = $(this).is('#prev') ? current - pageWidth : current + pageWidth;
    $('#prev, #next').show();

    if(to <= 0)
        $('#prev').hide();
    else if(to >= max - pageWidth)
        $('#next').hide();

    $("#slider").slider('value', to);
    sliderOpts.slide(null, { value: to });
});
$('#prev').trigger('click'); // init​​​​​​​​

Таким образом, вам остается только применить любые изменения CSS, которые вам нравятся, и если вы хотите переместить кнопки #prev и #next в родительский элемент, это тоже хорошо с предоставленным кодом.

person Simeon    schedule 25.07.2012
comment
Большое спасибо за пример. Мне нравится, как вы показываете математические расчеты. Есть ли в любом случае, чтобы SNAP это. Таким образом, предыдущая и следующая показывают 2 изображения на блок - полоса прокрутки может двигаться куда угодно - скажем, если они нажмут на предыдущую и следующую, может ли она снова вернуться к 2 на блок? - person TheBlackBenzKid; 26.07.2012
comment
Как вы можете сделать это, как SNAP, но на этой странице это щелкает: gucci .com/us/category/m/men_s_ready_to_wear#look3262lookA113 - person AlphaApp; 26.07.2012
comment
Вам мой ответ ничем не помог? Ничего страшного, если не было, я спрашиваю, так как вся репутация была отдана другому другому ответу, а не расщепленному. Пожалуйста, объясните, что я упустил, чтобы я мог улучшить - person Simeon; 17.08.2012

arrow_upward
2
arrow_downward

поможет ли этот пример?

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html

попробуйте «просмотреть исходный код» и возьмите необходимые файлы *.js и *.css и настройте оттуда свой CSS и скрипты.

Удачи!

person Mars Mellow    schedule 27.07.2012

arrow_upward
0
arrow_downward

Попробуйте Jscrollpane: http://jscrollpane.kelvinluck.com/

Я использовал его на дюжине очень сложных веб-сайтов, и мне всегда удавалось делать с ним то, что я хотел. У него также есть отличная документация.

Вы можете выбрать горизонтальный или вертикальный ползунок (или оба), показать/скрыть стрелки, перейти к определенному элементу html, использовать анимацию и т.д.

Проверьте это! Как только вы привыкнете к этому, вы всегда будете использовать его!

Надеюсь, поможет!

person VVV    schedule 25.07.2012
comment
Я думаю, что пример того, как настроить его в соответствии с конкретными потребностями этого плаката, поможет. Такой пример покажет, что стрелки можно позиционировать и т. д. - person Simeon; 26.07.2012
comment
Работал для моих нужд. Отличная ссылка. Может не обязательно отвечать на вопрос, но мне все равно помогло. - person ; 04.10.2012

arrow_upward
-1
arrow_downward

Во-первых, вы должны погуглить свои требования, их так много, проверьте это

person Priyank Patel    schedule 15.05.2012
comment
Я гуглил и уже видел все эти ползунки. они не совпадают - person Anna Presnyakova; 15.05.2012