Jquery Easy Slider - доработка плагина

Суббота, 07 Май 2011

 

Наверно многие знакомы с плагином Jquery Easy Slider, который позволяет пролистывать картинки или контент. Плагин довольно хорошо работает и легко оформляется через CSS. Однако в нем не был предусмотрен один момент - при пролистывании в области которая отображается, одновременно может находится несколько элементов, а не только один.

 

Пример слайдера:

 

Jquery Easy Slider

 

Посмотреть Demo

 

Для решения такой задачи в одном из проектов пришлось немного доработать слайдер. Попробую обьяснить что именно добавилось и изменилось. Во первых в default configuration properties была добавлена переменная var a;, которая содержит в себе количество одновременно отображаемых элементов в слайдере (в данном примере это картинки в списке li).

 

 
// default configuration properties
var defaults = {
  prevId:     'prevBtn',
  prevText:     'Previous',
  nextId:     'nextBtn',  
  nextText:     'Next',
  orientation:  '', //  'vertical' is optional;
  speed:       800,
  a:              4 //количество элементов li в области отображения
};
 

 

Во вторых изменен способ вычисления ширины с:

 

 
var w = obj.width(); 
 

 

на:

 

 
var w = $("li", obj).width(); //ширина элемента li
 

 

Таким способом определяется ширина отдельного li - но это предпологает что в CSS для всех элементов списка в слайдере, должна быть установлена одинаковая ширина!

 

Таким же образом вычисляется и высота отдельного элемента списка в слайдере - li

 

 
var h = $("li", obj).height(); //высота элемента li
 

 

Для obj - который содержит ссылку на узел DOM - $("#slider"), добавлена установка ширины и высоты на основе вычисленя количества элементов в переменой var a; и их ширины, т.е произведению количества элементов на их ширину. Так же добавляется CSS свойство overflow: hidden, которое позволяет скрывать элементы не помещающиеся в область просмотра. С помощью этого достигается эффект одновременного отображения в слайдере нужного количества элементов.

 

 
obj.css({'width': w*options.a, 'height': h, 'overflow': 'hidden'});
 

 

Так же изменен способ расчета значения переменной var ts;, которая содержит значение при котором лиистать далее (next), уже нельзя. Изменено с:

 

 
var ts = s-1;
 

 

на:

 

 
var ts = s-options.a;
 

 

Принцип заключается в том, что от общего количества элементов в слайдере, вычитается количество одновременно отображаемых элементов. К примеру если s=16 и a=4 то 16-4=12, пролистав до 12`го элемента в слайдере, оставшиеся четыре будут находится в области просмотра obj контейнера $("#slider"), и далее уже нет необходимости листать.

 

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

 

 
(function($) {
 
  $.fn.easySlider = function(options){
 
    // default configuration properties
    var defaults = {
      prevId:     'prevBtn',
      prevText:     'Previous',
      nextId:     'nextBtn',  
      nextText:     'Next',
      orientation:  '', //  'vertical' is optional;
      speed:       800,
      a:              4
    }; 
 
    var options = $.extend(defaults, options);  
 
    return this.each(function() {  
      obj = $(this);         
      var s = $("li", obj).length; //количество элементов li
      var w = $("li", obj).width(); //ширина элемента li
      var h = $("li", obj).height(); //высота элемента li
 
      obj.css({'width': w*options.a, 'height': h, 'overflow': 'hidden'});
 
      var ts = s-options.a;
      ...
 

 

На счет изменений все, осталось лишь привести пример подключения слайдера для тех кто использует его впервые.

 

Подключите CSS(опционально):

 

 
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 

 

В <head> поместите подгрузку библиотеки Jquery и плагина Jquery Easy Slider, а также JS код инициализции плагина:

 

 
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#slider").easySlider({a:7,speed:300});
  });
</script>
 

 

Создайте следующую структуру HTML которая будет обрабатыватся плагином Easy Slider:

 

 
<div class="clider-cont">
  <div id="slider">
    <ul>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      <li><a href=""><img alt="" src="img/cab-info-album.jpg"/></a></li>
      ...
    </ul>
  </div>
</div>
 

 

Вот и все, спасибо за внимание.

 

Посмотреть пример: Jquery Easy Slider.

Скачать пример: Jquery Easy Slider.

 

PS. Читайте последние записи RSS Подписка на RSS

 

Метки:

Комментарии 

 
anonim Четверг, 07 Июль 2011

А как сделать чтобы слайды крутились непрерывно?

 

 
 
anonim Среда, 28 Декабрь 2011

Как сделать чтобы в слайдере ширина опеределялась в %, если li например задано 25% и их отображается 4 штуки....

 

 
 
anonim Четверг, 29 Декабрь 2011

Как разместить несколько слайдеров на одной странице?

 

 
 
anonim Воскресенье, 18 Март 2012

хорошый. спасибо скачаю! проверь Flowslider (flowslider.com) тоже не плохой, использовал для парочки сайтов

 

 
 
anonim Среда, 30 Май 2012

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


//iteration click slider
var ftimeout = 4500;
var timeout = 5000;
var canMove = true;
function autoSlider(){
if(canMove){jQuery("#nextBtn a").click();
setTimeout(autoSlider, timeout);
}
}

jQuery(".clider-cont").mouseenter(function(){
canMove = false;
clearTimeout( autoSlider.resetTimeout );
//alert("");
}).mouseleave(function(){
//alert("");
canMove = true;
clearTimeout( autoSlider.resetTimeout );
setTimeout(autoSlider, ftimeout);
});
setTimeout(autoSlider, ftimeout);

 

 
 
anonim Пятница, 13 Июль 2012

Подскажите как сделать чтобы при нажатии на картинки шло перелистывания а не переход на другую старницу?

 

 
 
anonim Вторник, 01 Октябрь 2013

подскажите как решить сл трабл - когда вставляю вместо картинки каой-то тег типа div и тд - то происходит сл - к примеру ширина ul li 250 px - все работает норм но если ширину сделать 248px и сделать бордер 1 пиксель (тоесть по логике у нас все равно ширина удет 250 тк 248+1+1=250) то при прокрутке справа элемент списка выглядывает на +2 пикселя при каждой прокрутке (((

 

 

Добавить комментарий