Создание плагина WordPress для карусели: часть 3

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

 #carousel ul { margin-left: -100%; } 

Эта простая строка заслуживает объяснения. Если вы протестируете его, вы увидите, что первый элемент не отображается, вместо этого мы видим второй элемент. Вы можете проверить другое значение, чтобы лучше понять, что произошло. -50px с -50px мы перемещаем блок ul 50 пикселей влево. Со значениями, которые я показал вам в CSS выше, поскольку карусель имеет ширину 900 пикселей, я могу отобразить второй элемент со значением -900px .

Однако вместо этого мы можем использовать проценты. Преимущество состоит в том, что этот процент относительно контейнера. Здесь «100%» равно «900 пикселям», поэтому, если мы даем значение -100% , мы скрываем первый элемент и отображаем второй. Использование процентов позволяет изменять ширину контейнера без изменения значений свойства margin-left .

Функция для отображения другого элемента

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

 function carousel_show_another_link(direction) { } 

Куда мы идем?

Чтобы определить значение, которое будет присвоено margin-left , нам нужно знать, где мы находимся. Есть несколько возможных способов добиться этого, и я выбрал тот, который использует только текущее значение свойства margin-left .

 var ul = $('#carousel ul'); var current = -parseInt(ul[0].style.marginLeft) / 100; 

Первая строка возвращает блок ul . Как мы будем использовать его позже, хранение в переменной является хорошей идеей. Вторая строка может показаться немного странной. Цель состоит в том, чтобы сохранить целое число, представляющее текущий отображаемый элемент. Первый элемент будет представлен 0 , второй — 1 и т. Д.

Для этого мы получаем текущее значение свойства margin-left . Проблема в том, что это значение примерно равно -200% и нам нужно число: чтобы удалить «%», мы используем функцию parseInt() которая преобразует значение в целое число (например, '-200%' становится -200 ). Поскольку мы хотим получить положительное целое число, мы добавляем знак «минус» (например, чтобы получить 200 из -200 ) и делим на 100, чтобы получить желаемое значение (например, 2 , а не 200 ).

Вы можете удивиться, почему мы не использовали ul.css('margin-left') чтобы получить значение свойства margin-left . На самом деле .css() — это метод jQuery, и в нашем контексте это, кажется, лучшая идея. Проблема в том, что этот метод не даст нам процент. Используя те же значения, что и выше, если текущий элемент является третьим, свойство margin-left установлено на -200% а метод .css() вернет -1800px . Чтобы вычислить текущий элемент, используя это значение в пикселях, нам нужно использовать ширину большого контейнера, и я предпочитаю использовать только блок ul .

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

 var new_link = current + direction; 

Существует ли новый предмет?

Перед показом нового элемента нам нужно проверить, существует ли он. Если new_link меньше или равен -1 или больше или равен общему количеству элементов, то он не существует, и мы не можем отобразить его, поэтому перемещение блока ul не является хорошей идеей. Обратите внимание, что этот тест может показаться излишним, поскольку стрелки не отображаются, когда мы не можем идти дальше, но обеспечение того, что что-то действительно можно сделать, всегда является хорошей идеей.

 var links_number = ul.children('li').length; if (new_link >= 0 && new_link First we get the total number of items, which is the number of li tags in our list. This number is useful for the condition we described above as we want a positive integer that mustn't be greater than or equal to the number of items (don't forget that we begin with 0 and not 1 ). 
  Отображение нового товара 

  Наконец, перемещение блока может быть достигнуто одной строкой.  Мы должны рассчитать новое значение margin-left .  Чтобы сделать это, давайте подумаем об этом.  Для каждого «пройденного» элемента у нас есть ширина 100% для перемещения.  Таким образом, новое значение margin-left будет в 100 раз больше новой позиции элемента, которую мы только что рассчитали, со знаком минус, чтобы перейти влево. 

 [js] ul.animate ({'margin-left': - (new_link * 100) + '%'}); 

Я решил использовать анимацию jQuery, но вы можете создавать свои собственные или даже изменять настройки этой.

Некоторые псевдонимы для более практического использования

Теперь мы создадим функции, которые будут вызываться каждый раз, когда пользователь нажимает на стрелку. Эти функции не требуют большого количества кода, так как единственное, что они делают, это вызывают функцию carousel_show_another_link() с правильным параметром. Ниже приведен код функции, которая вызывается, когда мы щелкаем «предыдущую» стрелку.

 function carousel_previous_link() { carousel_show_another_link(-1); return false; } 

 $(document).ready(function() { // Here we attach the events }); 

 $('#carousel ul li a.carousel-prev').click(carousel_previous_link); 

 $('#carousel ul').css('margin-left', 0);