https://www.autonews.bg/js/carousel.js

1(function($, undefined) {
2    jQuery.fn.maxCarousel = function(options) {
3
4        var defaults = {
5            animation: {
6                animationMargins: false, //вид анимации: анимированные margins
7                animationVisibility: false //анимированные переходы при прокрутке
8            },
9            rolledElements: 1
10        };
11
12        options = $.extend({}, defaults, options);//первый пустой объект нужен для того, чтобы пользователь мог вызвать
13        //метод с дефолтными настройками, после того, как указал какие-то опции.
14
15        /*определяю объект к которому необходимо прикрепить карусель*/
16        var $this = $(this);
17
18        return $this.each(function() {
19            /*необходимо для инициализации каждой карусели*/
20            var $this = $(this);
21            var $list,
22            $item,
23            $itemWidth,
24            $listLength,
25            $leftArrow,
26            $rightArrow,
27            $mainParent,
28            $visibleElements = 0,//количество видимых элементов
29            currentPosition = 0, // текущая позиция карусели
30            currentItem = 0,//счетчик текущей позиции, с помощью которого определяю параметры для прокрутки
31            listPositionX = 0, //позиция карусели по х (нужно для перетаскивания)
32            listCurrentPosition = 0, //позиция карусели по х (нужно для перетаскивания) для offset
33            listPositionDiff = 0,//разница между координатами мыши, нужна чтобы узнать в какую сторону крутить карусель
34            listCurrentPageX = 0, //позиция курсора на mousedown нужно для проверки перетаскивания
35            pullPositionUp = 0  //позиция курсора при mouseup, для проверки двинули ли карусель или просто нажали
36
37if (screen.width<=550)
38{
39            rollItems = 1 //количество прокручиваемых элементов
40}
41else {
42
43            rollItems = 1 //количество прокручиваемых элементов
44}
45
46            var carousel = {
47                init: function() {
48                    this.updateVars();
49                    this.bindEvent();
50                },
51                updateVars: function() {
52                    $mainParent = $this;
53                    $list = $('ul', $mainParent);
54                    $item = $('ul li', $mainParent);
55                    $listLength = $item.length;
56                    $itemWidth = $item.outerWidth(true);
57                    $leftArrow = $('.maxcarousel__l-arr', $mainParent);
58                    $rightArrow = $('.maxcarousel__r-arr', $mainParent);
59                },
60                bindEvent: function() {
61                    /*Минимальная ширина всей карусели (wrapper)*/
62                    $mainParent.css({'min-width': $item.eq(0).outerWidth(true) +
63                    $leftArrow.outerWidth(true) + $rightArrow.outerWidth(true)});
64
65                    /*Максимальная ширина всей карусели (wrapper)*/
66                    var maxCarouselWidth = $item.eq(0).outerWidth(true)*$listLength +
67                    $leftArrow.outerWidth(true) + $rightArrow.outerWidth(true);
68
69                    $mainParent.css({'max-width': maxCarouselWidth});
70
71                    /*Отключаю левую кнопку в самом начале*/
72                    if (currentItem === 0) {
73                        addDisabled($leftArrow);
74                    }
75
76                    this.leftClick();
77                    this.rightClick();
78                    this.scrollUser();
79                    this.resize();
80                },
81                leftClick: function() {

82                    /*События на левом клике*/
83                    $leftArrow.on('click touchstart', function() {
84
85                        /*В процессе анимации отключаю клики*/
86                        if ($item.is(':animated')) { return false; }
87
88                        /*отключаю анимацию для маргинов*/
89                        $item.stop(true, true);
90
91                        /*если видимых элементов столько же сколько их всего*/
92                        if ($visibleElements >= $listLength) {
93                            addDisabled($leftArrow);
94                            addDisabled($rightArrow);
95                            return false;
96                        }
97
98                        removeDisabled($rightArrow);
99
100                        /*Если список в самом начале или у левой кнопки класс disabled,
101                        или показаны все элементы отключаю левую кнопку*/
102                        if ( $(this).hasClass('disabled') || currentItem <= 0  || $visibleElements >= $listLength) {
103                            addDisabled($leftArrow);
104                            return false;
105                        }
106
107                        /*Слежу за номером элемента при сдвиге влево*/
108                        currentItem -= rollItems;
109
110                        /*Высчитываю позицию элемента при клике на левую стрелку*/
111                        currentPosition += $itemWidth*rollItems;
112                        $list.stop();
113                        $list.animate({ left: currentPosition }, function() {
114                            if(currentItem <= 0) {
115                                currentItem = 0;
116                                currentPosition = 0;
117                                addDisabled($leftArrow);
118                                $list.animate({ left: currentPosition });
119                            }
120                        });
121
122                        /*Запуск кастомной анимации*/
123                        if (options.animationMargins) {
124                            animateMargin($item, 'margin-left', 20);
125                        }
126
127                        if (options.animationVisibility) {
128                            animateVisiability($item);
129                        }
130
131                    });
132                },
133                rightClick: function() {
134                    /*События на правом клике*/
135                    $rightArrow.on('click touchstart', function() {
136                        /*В процессе анимации отключаю клики*/
137                        if ($item.is(':animated')) { return false; }
138
139                        /*отключаю анимацию для маргинов*/
140                        $item.stop(true, true);
141
142                        removeDisabled($leftArrow);
143
144                        /*если видимых элементов столько же сколько их всего*/
145                        if ($visibleElements >= $listLength) {
146                            addDisabled($leftArrow);
147                            addDisabled($rightArrow);
148                            return false;
149                        }
150
151                        /*Проверка на конечный элемент*/
152                        if ( ($listLength - $visibleElements) <= currentItem ) {
153                            addDisabled($rightArrow);
154                            removeDisabled($leftArrow);
155                            return false;
156                        } else {
157                            /*Слежу за номером элемента при сдвиге вправо*/
158                            currentItem += rollItems;
159                            /*Высчитываю позицию элемента при клике на правую стрелку*/
160                            currentPosition -= $itemWidth*rollItems;
161                            $list.stop();
162                            $list.animate({ left: currentPosition }, function() {
163                                if(($listLength - $visibleElements) <= currentItem) {
164                                    currentItem = $listLength - $visibleElements;
165                                    addDisabled($rightArrow);
166                                    currentPosition = -(currentItem)*$itemWidth;
167                                    $list.animate({ left:  currentPosition });
168                                }
169                            });
170                        }
171
172                        /*Отключаю правую кнопку на конечном эелементе*/
173                        if ( ($listLength - $visibleElements) <= currentItem ) {
174                            addDisabled($rightArrow);
175                        }
176
177                        /*Запуск кастомной анимации*/
178                        if (options.animationMargins) {
179                            animateMargin($item, 'margin-right', 30);
180                        }
181
182                        if (options.animationVisibility) {
183                            animateVisiability($item);
184                        }
185
186                    });
187                },
188
189                scrollUser: function() {
190
191                },
192
193
194                resize: function() {
195                    $(window).on('resize', function() {
196
197                        /*Рассчитываю ширину главного родителя без стрелок*/
198                        var $parentWidthNoArrows = $mainParent.outerWidth(true) -
199                        $leftArrow.outerWidth(true) - $rightArrow.outerWidth(true);
200
201                        /*Рассчитываю количество видимых элементов*/
202                        $visibleElements = Math.floor($parentWidthNoArrows / $item.eq(0).outerWidth(true));
203
204                        /*условие для уменьшение карусели, но до 1 элемента и ограничение на увеличение видимых элементов больше
205                        чем эелементов списка*/
206                        if ($visibleElements === 0) {
207                            $visibleElements = 1;
208                        } else if ($visibleElements > $listLength) {
209                            $visibleElements = $listLength;
210                        }
211
212                        /*Расcчитываю ширину непосредственного родителя*/
213                        var $parentWidth = $visibleElements * $item.eq(0).outerWidth(true);
214                        $list.parent().css({
215                            'width': $parentWidth,
216                            'min-width': $item.eq(0).outerWidth(true),
217                            'max-width': $item.eq(0).outerWidth(true)*$visibleElements
218                        });
219
220                        /*отключаю правую и левую кнопку, когда количество элементов в списке = количеству видимых элементов*/
221                        if ($visibleElements >= $listLength) {
222                            addDisabled($rightArrow);
223                            addDisabled($leftArrow);
224                        } else {
225                            removeDisabled($rightArrow);
226                        }
227
228                        /*при увеличении/уменьшении карусели сбрасываю все параметры*/
229                        currentItem = 0;
230                        currentPosition = 0;
231                        $list.css({'left': 0});
232                        addDisabled($leftArrow);
233                    });
234
235                    /*Отменяю выделение*/
236                    $mainParent.attr('unselectable','on')
237                        .css({

238                            '-moz-user-select':'none',
239                            '-o-user-select':'none',
240                            '-khtml-user-select':'none',
241                            '-webkit-user-select':'none',
242                            '-ms-user-select':'none',
243                            'user-select':'none'
244                        }).on('selectstart', function(){ return false; });
245
246                    $(window).resize();
247                }
248            };
249
250            /*helpers functions*/
251            function addDisabled(item) {
252                item.addClass('is-disabled');
253            }
254
255            function removeDisabled(item) {
256                item.removeClass('is-disabled');
257            }
258
259            function animateMargin(items, side, value) {
260                items.stop(true, true); //останавливаю анимацию
261                var w = items.eq(0).outerWidth(), //узнаю маргин для элемента
262                w1 = items.eq(0).outerWidth(true),
263                dif = (w1-w)/2;
264                var anim = {};
265                var anim1 = {};
266                anim1[side] = dif;
267                anim[side] = dif + value;
268
269                items.animate(anim, 300).animate(anim1, 300);
270            }
271
272            function animateVisiability(items) {
273                items.stop(true, true); //останавливаю анимацию
274                items.animate({'opacity': 0}, 200).delay(200).animate({'opacity': 1}, 100);
275            }
276
277            carousel.init();
278
279        });
280
281    };//end of maxCarousel
282
283})(jQuery);
284
285$('.maxcarousel').maxCarousel({rolledElements: 1});
286