jquery горизонтальный слайдер ul/navbar

В своих спецификациях вы указали, что если у вас есть определенное количество кнопок, скажем, «более x кнопок», вы хотите, чтобы ползунок отображался. Таким образом, вы хотите создать панель навигации, которая будет выглядеть нормально независимо от наличия ползунка. К сожалению, я не могу помочь вам с этим аспектом проблемы, если не увижу ваш CSS; Я смогу помочь вам только с jQuery.

Для начала вам нужно будет написать условное выражение:

if ($("button").length > x) { ...show slider...}

Теперь, прежде чем мы продолжим, я хотел бы указать на тот очевидный факт, что существует множество различных способов создания слайдера. Не имея возможности видеть ваш код (я знаю, что на данный момент я, вероятно, звучу как заезженная пластинка, но вы все еще новичок в Stack Overflow, так что это я вас учу), наиболее совместимое решение, о котором я могу думать, было бы чтобы создать панель навигации и оставить достаточно места слева и справа для кнопок ползунка (мы будем манипулировать свойством visibility, чтобы показать/скрыть их, а не свойством display — это также предотвратит медленные скачки панели навигации при загрузке). браузеры).

Чтобы реализовать это, нам нужно будет начать с двух элементов (показаны только селекторы) для кнопок:

var buttonLeft = $("#buttonLeft");
var buttonRight = $("#buttonRight");

Затем мы хотим добавить следующие строки, которые будут выполняться, если наше условие было истинным:

buttonLeft.css("visibility", "visible")
          .on("click.sliderLeft", function() {...show more on the left...};
buttonRight.css("visibility", "visible")
           .on("click.sliderRight", function() {...show more on the right...};

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

Это еще одна часть сценария, которую можно реализовать десятками способов. Реализация, которую вы выберете, будет в значительной степени основываться на ваших HTML и CSS. Для этого практического руководства я просто предположу, что вы собираетесь использовать скользящий элемент с position: relative и с некоторым оберткой div с overflow: hidden.

var navBar = $("#navBar"); // sliding element

Следующий шаг — определить, что вы хотите использовать для эффекта слайда. Для простоты (и поскольку вы используете начальную загрузку - таким образом, у вас, скорее всего, все кнопки будут одинакового размера), я собираюсь предположить, что все ваши кнопки навигации имеют одинаковый размер:

var navButtonWidth = $(".navButtons").width();

Я также собираюсь предположить, для простоты, что у вас есть левое и правое поля ваших кнопок, установленные на 5px. Далее я предполагаю, что каждая анимация будет занимать 1000 миллисекунд. Таким образом, вы захотите добавить следующие строки в обработчики кликов, чтобы они служили вашими эффектами слайда:

var slideAmount = navButtonWidth + 10; //button width plus margin left plus margin right

//left button
...
var slideLeftStr = "+=" + slideAmount + "px";
navBar.animate({ left: slideStr }, 1000);
...

//right button
...
var slideRightStr = "-=" + slideAmount + "px";
navBar.animate({ left: slideStr }, 1000);
...

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

Дайте знать, если у вас появятся вопросы. Удачи! :)

ОБНОВЛЕНИЕ:

Чтобы ответить на ваш вопрос об использовании кнопок для перехода к определенной кнопке, ответ будет «да, вы можете это сделать», но на самом деле вы хотели бы перейти к начальной позиции следующей или предыдущей кнопки (соответственно). ). Я могу сказать вам, что это, вероятно, выглядело бы ужасно, но в любом случае вот код:

...
//put this function outside of the click handlers
var slideTo = function (destButton) {
    //destButton is the button you are sliding to
    return destButton.offset().left + "px";   
}     

//put this in both click handlers
...
var destinationButton = ....get the previous or next button based on which handler you're in
navBar.animate({ left: slideTo(destinationButton) }, 1000);
...

Однако вариант, который я бы предложил, состоит в том, чтобы написать обработчик кликов, который медленно скользит по панели навигации, пока пользователь все еще держит указатель мыши над кнопкой.