https://i-sng.ru/ruws-content/cache/i-sng.ru/wpfc-minified/e2evxf9h/7txid.js

1// source --> /assets/js/slider.js 
2class RuwsSlider {
3  constructor(sliderSelector, argument) {
4    this.sliderSelector = sliderSelector,
5    this.arguments = argument;
6  }
7
8    // Инициализация слайдера
9    slider() {
10        // Переменные
11        let ruws = {
12            slider: Array.from(document.getElementsByClassName(this.sliderSelector)), // slider
13            sliderWrapper: {}, // slider Wrapper
14            sliderViewport: {}, // slider Viewport
15            sliderElement: [], // массив  элементов
16            sliderSize: 0, // Размер ruws-slider
17            numberOfSlides: 0, // Колличество слайдов
18            arrayTransform: [], // Массив с transform  
19            indexItem: 0, // Номер слайда
20            autoplaySpeed: 3000, // Стандартная скорость прокрутки
21            sliderArray: [], // 
22            control: 0, //
23            dotsArray: [], // Dots Array
24            orientation: false,
25            buttonPrev: {},
26            buttonNext: {},
27            bigImageButtonPrev: {},
28            bigImageButtonNext: {},
29            otherButtonPrev: {},
30            otherButtonNext: {},
31            buffering: false,
32            infinity: false
33        }
34        if( ruws.slider.length == 0){
35            return false
36        } else {
37            ruws.slider.forEach(item => {
38                ruws.sliderElement = Array.prototype.slice.call(item.children);
39                item.classList.add('ruws-slider');
40                ruws.sliderWrapper = document.createElement('div');
41                item.append(ruws.sliderWrapper);
42                ruws.sliderViewport = document.createElement('div');
43                this.arguments.vertical == true ? (ruws.sliderViewport.classList.add('ruws-viewport-v'), ruws.sliderSize = item.offsetHeight) : (ruws.sliderViewport.classList.add('ruws-viewport'), ruws.sliderSize = item.offsetWidth);
44                ruws.sliderWrapper.style.position = 'absolute';
45                ruws.sliderWrapper.classList.add('ruws-wrapper');
46                ruws.sliderWrapper.append(ruws.sliderViewport);
47                ruws.sliderElement.forEach((i, index) => {
48                    ruws.sliderViewport.append(i);
49                    i.style.position = 'absolute';
50                    ruws.numberOfSlides = index;
51                    ruws.sliderArray[ruws.numberOfSlides] = i;
52                    i.setAttribute('data-num', ruws.numberOfSlides);
53                    isSelected(ruws.indexItem);
54                    this.arguments.vertical == true ? (getHorizontalWidth(item, i), ruws.arrayTransform[index] = index * i.offsetHeight, i.style.transform = `translateY(${ruws.arrayTransform[index]}px)`) : (getHorizontalHeight(item, i), ruws.arrayTransform[index] = index * i.offsetWidth, i.style.transform = `translateX(${ruws.arrayTransform[index]}px)`);
55                    this.arguments.bigImage !== 'undefined' ? (i.addEventListener('click', () => { ruws.indexItem = +i.getAttribute('data-num'); isSelected(ruws.indexItem), bigImage(this.arguments.bigImage); getColNum(this.arguments.colNum)})) : false ;
56                });
57            });
58            // Ширина слайдера
59            function getHorizontalWidth(slider ,selector){setTimeout(() => {slider.style.width = `${selector.offsetWidth}px`;}, 100);}
60            // Высота слайдера
61            function getHorizontalHeight(slider ,selector){setTimeout(() => {slider.style.height = `${selector.offsetHeight}px`;}, 100);}
62            // Добавление is-selected
63            function isSelected(indexSlider) {ruws.sliderArray.length !== 0 ? (ruws.sliderArray.forEach(i => {i.classList.remove('is-selected');}), ruws.sliderArray[indexSlider].classList.add('is-selected')) : false}
64            // Autoplay slider
65            function createAutoplay(autoplaySpeed, orientation) {
66                let startInterval = setInterval(startIntervalFunction, autoplaySpeed);
67                function startIntervalFunction(){
68                    ruws.indexItem >= ruws.numberOfSlides ? ruws.indexItem = 0 : ruws.indexItem += 1;
69                    ruws.control >= Math.round((ruws.arrayTransform[ruws.arrayTransform.length - 1]/ruws.arrayTransform[1] - ruws.sliderSize/ruws.arrayTransform[1] + 1)) ? ruws.control = 0 : ruws.control += 1;
70                    isSelected(ruws.indexItem);
71                    orientation == true ? ruws.sliderWrapper.style.transform = `translateY(${-ruws.arrayTransform[ruws.control]}px)` : ruws.sliderWrapper.style.transform = `translateX(${-ruws.arrayTransform[ruws.control]}px)`;
72                    ruws.slider.forEach(i => {i.querySelectorAll('.ruws-dots-items').forEach(it => {it.classList.remove('is-selected');})});
73                    ruws.dotsArray.length !== 0 ? ruws.dotsArray[ruws.control].classList.add('is-selected') : false;

74                }
75                ruws.slider.forEach(i => {i.parentElement.addEventListener('mouseenter', () => {clearInterval(startInterval);}); i.parentElement.addEventListener('mouseleave', () => {setTimeout(() => {startInterval = setInterval(startIntervalFunction, autoplaySpeed)}, 500)});})
76
77            }
78            // Стрелочная навигация
79            function controlButtonPrev(buttonSelector, orientation, bImageSelector, selectorNumber, select) {
80                buttonSelector.addEventListener('click', () => {
81                    ruws.indexItem <= 0 ? ruws.indexItem = 0 : ruws.indexItem -= 1;
82                    if (ruws.infinity === true) {
83                        if (ruws.control <= 0) {
84                            ruws.control = ruws.numberOfSlides + 1
85                            orientation == true ? (ruws.sliderElement[ruws.numberOfSlides].style.transform = `translateY(${-ruws.arrayTransform[1]}px)`, ruws.sliderWrapper.style.transform = `translateY(${ruws.arrayTransform[1]}px)`) : (ruws.sliderElement[ruws.numberOfSlides].style.transform = `translateX(${-ruws.arrayTransform[1]}px)`, ruws.sliderWrapper.style.transform = `translateX(${ruws.arrayTransform[1]}px)`)
86                           setTimeout(() => {
87                                ruws.sliderWrapper.style.transition = 'none';
88                                ruws.control = ruws.numberOfSlides
89                                orientation == true ? (ruws.sliderWrapper.style.transform = `translateY(${-ruws.arrayTransform[ruws.control]}px)`, ruws.sliderElement[ruws.numberOfSlides].style.transform = `translateY(${ruws.arrayTransform[ruws.control]}px)`) : (ruws.sliderWrapper.style.transform = `translateX(${-ruws.arrayTransform[ruws.control]}px)`, ruws.sliderElement[ruws.numberOfSlides].style.transform = `translateX(${ruws.arrayTransform[ruws.control]}px)`)                                
90                            }, 500)
91                            setTimeout(() => {
92                                ruws.sliderWrapper.style.transition = '.5s'
93                            }, 600)                          
94                        } else {
95                            ruws.control -= 1
96                        }
97                    }
98                    if (select === 'simple') {
99                        ruws.control <= 0 ? ruws.control = 0 : ruws.control -= 1;
100                    }
101                    if (select === 'stop') {
102                        ruws.control <= 0 ? ruws.control = 0 : ruws.control -= 1; 
103                    }         
104                    isSelected(ruws.indexItem);
105                    orientation == true ? ruws.sliderWrapper.style.transform = `translateY(${-ruws.arrayTransform[ruws.control]}px)` : ruws.sliderWrapper.style.transform = `translateX(${-ruws.arrayTransform[ruws.control]}px)`;
106                    ruws.slider.forEach(i => {i.querySelectorAll('.ruws-dots-items').forEach(it => {it.classList.remove('is-selected');})});   
107                    bImageSelector !== 'undefined' ? bigImage(bImageSelector) : false;
108                    ruws.dotsArray.length != 0 ? ruws.dotsArray[ruws.control].classList.add('is-selected') : false;
109                    getColNum(selectorNumber); 
110                 });
111            }
112            function controlButtonNext(buttonSelector, orientation, bImageSelector, selectorNumber, select) {    
113                buttonSelector.addEventListener('click', () => {
114                ruws.indexItem >= ruws.numberOfSlides ? ruws.indexItem = 0 : ruws.indexItem += 1;
115                    if (ruws.infinity === true) {
116                        ruws.arrayTransform.push((ruws.arrayTransform[ruws.arrayTransform.length - 1] + ruws.arrayTransform[1]))      
117                        if (ruws.control >= ruws.numberOfSlides) {
118                            console.log(ruws.numberOfSlides)
119                            ruws.control += 1
120                            orientation == true ? ruws.sliderElement[0].style.transform = `translateY(${ruws.arrayTransform[ruws.control]}px)` : ruws.sliderElement[0].style.transform = `translateX(${ruws.arrayTransform[ruws.control]}px)`
121                            setTimeout(() => {
122                                ruws.sliderWrapper.style.transition = '

122none';
123                                ruws.control = 0
124                                orientation == true ? (ruws.sliderWrapper.style.transform = `translateY(${-ruws.arrayTransform[ruws.control]}px)`, ruws.sliderElement[0].style.transform = `translateY(${ruws.arrayTransform[ruws.control]}px)`) : (ruws.sliderWrapper.style.transform = `translateX(${-ruws.arrayTransform[ruws.control]}px)`, ruws.sliderElement[0].style.transform = `translateX(${ruws.arrayTransform[ruws.control]}px)`)                                
125                            }, 500)
126                            setTimeout(() => {
127                                ruws.sliderWrapper.style.transition = '.5s'
128                            }, 600)                                   
129                        } else {
130                            ruws.control += 1
131                        }
132                    }
133                    if(select === 'simple') {
134                        ruws.control >= Math.round((ruws.arrayTransform[ruws.arrayTransform.length - 1]/ruws.arrayTransform[1] - ruws.sliderSize/ruws.arrayTransform[1] + 1)) ? ruws.control = Math.round((ruws.arrayTransform[ruws.arrayTransform.length - 1]/ruws.arrayTransform[1] - ruws.sliderSize/ruws.arrayTransform[1] + 1)) : ruws.control += 1;
135                    }
136                    if (select === 'stop') {
137                        if(ruws.indexItem >= ruws.sliderSize/ruws.arrayTransform[1]){
138                            ruws.control >= Math.round((ruws.arrayTransform[ruws.arrayTransform.length - 1]/ruws.arrayTransform[1] - ruws.sliderSize/ruws.arrayTransform[1] + 1)) ? ruws.control = 0 : ruws.control += 1;
139                        } else {
140                            ruws.control = 0
141                        }       
142                    }                         
143                    isSelected(ruws.indexItem);
144                    orientation == true ? ruws.sliderWrapper.style.transform = `translateY(${-ruws.arrayTransform[ruws.control]}px)` : ruws.sliderWrapper.style.transform = `translateX(${-ruws.arrayTransform[ruws.control]}px)`;
145                    ruws.slider.forEach(i => {i.querySelectorAll('.ruws-dots-items').forEach(it => {it.classList.remove('is-selected');})});  
146                    bImageSelector !== 'undefined' ? bigImage(bImageSelector) : false;
147                    ruws.dotsArray.length != 0 ? ruws.dotsArray[ruws.control].classList.add('is-selected') : false;
148                    getColNum(selectorNumber); 
149                });
150            }
151
152            function infinite() {
153                  
154            }
155
156            // Dots
157            function dots(slider, orientation) {
158                if (ruws.numberOfSlides > 0){
159                    const dotsList = document.createElement('ul');
160                    dotsList.classList.add('ruws-dots-list');
161                    slider.forEach(d => {d.append(dotsList);})
162                    dotsList.style.position = 'absolute';
163                    console.log(ruws.numberOfSlides)
164                    for (let i = 0; i <= ruws.numberOfSlides; i++) {
165                        let dotsItems = document.createElement('li')
166                        dotsItems.classList.add('ruws-dots-items');
167                        dotsList.append(dotsItems);
168                    }
169                    slider.forEach(i => {
170                        let dot = i.querySelectorAll('.ruws-dots-items');
171                        if (dot.length !== 0) {
172                            dot[ruws.indexItem].classList.add('is-selected');
173                            dot.forEach((dotItem, dotIndex) => {
174                                dotItem.setAttribute('data-dots-nav', dotIndex);
175                                ruws.dotsArray[dotIndex] = dotItem;
176                                dotItem.addEventListener('click', () => {
177                                    ruws.control = dotItem.getAttribute('data-dots-nav');
178                                    ruws.indexItem = dotItem.getAttribute('data-dots-nav');
179                                    isSelected(ruws.indexItem);
180                                    orientation == true ? ruws.sliderWrapper.style.transform = `translateY(${-ruws.arrayTransform[ruws.control]}px)` : ruws.sliderWrapper.style.transform = `translateX(${-ruws.arrayTransform[ruws.control]}px)`;
181                                    dot.forEach(i => {i.classList.remove('is-selected');});
182                                    dotItem.classList.add('is-selected');
183                                });
184                            }); 
185                        }
186                    });
187                }
188
189            }
190            function bigImage(selector){
191                const bImage = document.querySelector(selector);
192                bImage ? (bImage.querySelector('img').setAttribute('src', ruws.sliderArray[ruws.indexItem].querySelector('img').getAttribute('data-src')), getAutor(bImage)) : false;

193            }
194
195            function getColNum(selector){
196                let q = document.querySelector(selector);
197                if(q){q.innerHTML = `${ruws.indexItem + 1} / ${ruws.numberOfSlides}`;}                
198            }
199            function getAutor(selector){
200                ruws.sliderElement.forEach(i => {
201                    if(i.classList.contains('is-selected')){
202                        let autor = i.querySelector('.rtut').textContent
203                        if(document.querySelector('.ruws-information')){
204                            document.querySelector('.ruws-information').remove();
205                        }
206                        if(autor.length-1 != 0){
207                            let autorDiv = document.createElement('div');
208                            selector.append(autorDiv)
209                            autorDiv.classList.add('ruws-information')
210                            let autorText = document.createElement('span');
211                            autorDiv.append(autorText)
212                            autorText.innerHTML = ''
213                            autorText.innerHTML = 'Автор фото: ' + autor
214                        }
215                    }                    
216                })
217            }
218            function preloadImg(src) {
219                let img = new Image();
220                img.src = src;
221            }
222
223            if (this.arguments.vertical == true) {ruws.orientation = true}
224            if (typeof this.arguments.buttonPrev !== 'undefined') {Array.from(document.getElementsByClassName(this.sliderSelector)).forEach(item => {ruws.buttonPrev = item.parentElement.querySelector(this.arguments.buttonPrev)}); controlButtonPrev(ruws.buttonPrev, ruws.orientation, this.arguments.bigImage, this.arguments.colNum, this.arguments.select);}
225            if (typeof this.arguments.buttonNext !== 'undefined') {Array.from(document.getElementsByClassName(this.sliderSelector)).forEach(item => {ruws.buttonNext = item.parentElement.querySelector(this.arguments.buttonNext)}); controlButtonNext(ruws.buttonNext, ruws.orientation, this.arguments.bigImage, this.arguments.colNum, this.arguments.select);}
226            //if (typeof this.arguments.buttonsAll !== 'undefined') {controlButtonAll(this.arguments.buttonsAll, this.arguments.vertical);}
227            if (this.arguments.dots == true) {dots(ruws.slider, ruws.orientation);}
228            if (typeof this.arguments.autoplaySpeed !== 'undefined' && this.arguments.autoplay == true) {ruws.autoplaySpeed = this.arguments.autoplaySpeed;}
229            if (this.arguments.autoplay == true) {createAutoplay(ruws.autoplaySpeed, ruws.orientation);}
230            if (typeof this.arguments.indexItem !== 'undefined') {ruws.indexItem = this.arguments.indexItem; ruws.sliderArray[ruws.indexItem].classList.add('is-selected');}
231            if (typeof this.arguments.bigImageButtonPrev !== 'undefined') {Array.from(document.getElementsByClassName(this.sliderSelector)).forEach(item => {ruws.bigImageButtonPrev = item.parentElement.querySelector(this.arguments.bigImageButtonPrev)}); controlButtonPrev(ruws.bigImageButtonPrev, ruws.orientation, this.arguments.bigImage, this.arguments.colNum);}
232            if (typeof this.arguments.bigImageButtonNext !== 'undefined') {Array.from(document.getElementsByClassName(this.sliderSelector)).forEach(item => {ruws.bigImageButtonNext = item.parentElement.querySelector(this.arguments.bigImageButtonNext)}); controlButtonNext(ruws.bigImageButtonNext, ruws.orientation, this.arguments.bigImage, this.arguments.colNum);}
233            if (typeof this.arguments.bigImage !== 'undefined') {bigImage(this.arguments.bigImage)}
234            if (typeof this.arguments.colNum !== 'undefined') {getColNum(this.arguments.colNum)}
235            if (typeof this.arguments.otherButtonPrev !== 'undefined') {Array.from(document.getElementsByClassName(this.arguments.otherButtonPrev)).forEach(item => {ruws.otherButtonPrev = item}); controlButtonPrev(ruws.otherButtonPrev, ruws.orientation, this.arguments.bigImage, this.arguments.colNum);}
236            if (typeof this.arguments.otherButtonNext !== 'undefined') {Array.from(document.getElementsByClassName(this.arguments.otherButtonNext)).forEac

236h(item => {ruws.otherButtonNext = item}); controlButtonNext(ruws.otherButtonNext, ruws.orientation, this.arguments.bigImage, this.arguments.colNum);}
237            if (this.arguments.buffering === true){ruws.buffering = true;ruws.sliderArray.forEach(i => {preloadImg(i.querySelector('img').getAttribute('data-src'))})}
238            if (this.arguments.infinity === true){ruws.infinity = true; infinite()}
239        }
240    };
241    destroy() {
242        document.querySelectorAll(this.sliderSelector).forEach(item => {
243            let destroyElement = [];
244            item.classList.contains('ruws-slider') ? (item.classList.remove('ruws-slider'), destroyElement = Array.prototype.slice.call(item.querySelector('.ruws-viewport').children), destroyElement.forEach(i => {i.classList.remove('is-selected'); item.append(i)}), item.querySelector('.ruws-viewport').remove(), item.querySelector('.ruws-wrapper').remove(), item.querySelector('.ruws-dots-list') ? item.querySelector('.ruws-dots-list').remove() : false ) : false;
245        })
246    }
247
248};