Skip to content

Commit d134468

Browse files
vhusaruk92dmh
vhusaruk92
authored and
dmh
committed
[FEATURE] add a preloader until slider container is initialized (#442)
* [BUGFIX] add preloader until slider is initialized * [TASK] add loader element to template * [TASK] change code according to stylelintrc
1 parent 60f58de commit d134468

File tree

3 files changed

+140
-96
lines changed

3 files changed

+140
-96
lines changed

‎Resources/Private/Templates/GridElements/SliderContainer.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<div class=" swiper-button-prev slider-container__button-prev js__slider-container__btn-prev"></div>
2020
</f:if>
2121
</div>
22+
<div class="slider-container_loader"></div>
2223
<f:if condition="{data.pi_flexform.data.columns.lDEF.grid_container.vDEF}">
2324
</div>
2425
</div>

‎felayout_t3kit/dev/js/main/contentElements/sliderContainer.js‎

Lines changed: 104 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -3,107 +3,115 @@
33
'use strict'
44
// document load event
55
$(document).ready(function () {
6-
var $swiperContainerWrapper = $('.js__slider-container__wrapper')
7-
$swiperContainerWrapper.each(function () {
8-
$(this).children().wrap('<div class="swiper-slide slider-container__slide js__slider-container__slide"></div>')
9-
})
10-
11-
var $swiperContainer = $('.js__slider-container__container')
12-
$swiperContainer.each(function () {
13-
var time = $(this).attr('data-autoplay')
14-
var loopParam = $(this).attr('data-loop')
15-
var amountOfSlides = parseInt($(this).attr('data-slidesperview'))
16-
var effectName = $(this).attr('data-effect')
17-
var transition = $(this).attr('data-speed')
18-
var widthForMobile
19-
var widthForTablet
20-
var widthForLaptop
21-
var widthForMediumLaptop
22-
if (amountOfSlides >= 4) {
23-
widthForMobile = 1
24-
widthForTablet = 2
25-
widthForLaptop = 3
26-
widthForMediumLaptop = 4
27-
} else if (amountOfSlides === 2) {
28-
widthForMobile = 1
29-
widthForTablet = 1
30-
widthForLaptop = 1
31-
widthForMediumLaptop = 2
32-
} else if (amountOfSlides === 1) {
33-
widthForMobile = 1
34-
widthForTablet = 1
35-
widthForLaptop = 1
36-
widthForMediumLaptop = 1
37-
} else {
38-
widthForMobile = 1
39-
widthForTablet = 2
40-
widthForLaptop = 2
41-
widthForMediumLaptop = 3
42-
}
43-
var slider = new Swiper($(this), {
44-
containerModifierClass: 'js__slider-container__container',
45-
wrapperClass: 'js__slider-container__wrapper',
46-
slideClass: 'js__slider-container__slide',
47-
nextButton: $(this).parent().find('.js__slider-container__btn-next'),
48-
prevButton: $(this).parent().find('.js__slider-container__btn-prev'),
49-
pagination: $(this).parent().find('.js__slider-container__pagination'),
50-
paginationClickable: true,
51-
speed: parseInt(transition),
52-
loop: loopParam,
53-
autoplay: time,
54-
effect: effectName,
55-
watchSlidesVisibility: true,
56-
spaceBetween: 20,
57-
preloadImages: false,
58-
lazyLoading: true,
59-
lazyLoadingInPrevNext: true,
60-
slidesPerView: amountOfSlides,
61-
breakpoints: {
62-
// Responsive breakpoints
63-
480: {
64-
slidesPerView: widthForMobile
6+
if ($('.slider-container').length > 0) {
7+
var $swiperContainerWrapper = $('.js__slider-container__wrapper')
8+
// dividing content into sliders
9+
$swiperContainerWrapper.each(function () {
10+
$(this).children().wrap('<div class="swiper-slide slider-container__slide js__slider-container__slide"></div>')
11+
})
12+
var $swiperContainer = $('.js__slider-container__container')
13+
// initialization of the Slider
14+
$swiperContainer.each(function () {
15+
var currentSlider = $(this)
16+
var time = currentSlider.attr('data-autoplay')
17+
var loopParam = currentSlider.attr('data-loop')
18+
var amountOfSlides = parseInt(currentSlider.attr('data-slidesperview'))
19+
var effectName = currentSlider.attr('data-effect')
20+
var transition = currentSlider.attr('data-speed')
21+
var widthForMobile
22+
var widthForTablet
23+
var widthForLaptop
24+
var widthForMediumLaptop
25+
if (amountOfSlides >= 4) {
26+
widthForMobile = 1
27+
widthForTablet = 2
28+
widthForLaptop = 3
29+
widthForMediumLaptop = 4
30+
} else if (amountOfSlides === 2) {
31+
widthForMobile = 1
32+
widthForTablet = 1
33+
widthForLaptop = 1
34+
widthForMediumLaptop = 2
35+
} else if (amountOfSlides === 1) {
36+
widthForMobile = 1
37+
widthForTablet = 1
38+
widthForLaptop = 1
39+
widthForMediumLaptop = 1
40+
} else {
41+
widthForMobile = 1
42+
widthForTablet = 2
43+
widthForLaptop = 2
44+
widthForMediumLaptop = 3
45+
}
46+
var slider = new Swiper(currentSlider, {
47+
containerModifierClass: 'js__slider-container__container',
48+
wrapperClass: 'js__slider-container__wrapper',
49+
slideClass: 'js__slider-container__slide',
50+
nextButton: currentSlider.parent().find('.js__slider-container__btn-next'),
51+
prevButton: currentSlider.parent().find('.js__slider-container__btn-prev'),
52+
pagination: currentSlider.parent().find('.js__slider-container__pagination'),
53+
paginationClickable: true,
54+
speed: parseInt(transition),
55+
loop: loopParam,
56+
autoplay: time,
57+
effect: effectName,
58+
watchSlidesVisibility: true,
59+
spaceBetween: 20,
60+
preloadImages: false,
61+
lazyLoading: true,
62+
lazyLoadingInPrevNext: true,
63+
slidesPerView: amountOfSlides,
64+
breakpoints: {
65+
// Responsive breakpoints
66+
480: {
67+
slidesPerView: widthForMobile
68+
},
69+
767: {
70+
slidesPerView: widthForTablet
71+
},
72+
992: {
73+
slidesPerView: widthForLaptop
74+
},
75+
1024: {
76+
slidesPerView: widthForMediumLaptop
77+
}
78+
},
79+
coverflow: {
80+
rotate: 90,
81+
stretch: 0,
82+
depth: 200,
83+
modifier: 1,
84+
slideShadows: false
6585
},
66-
767: {
67-
slidesPerView: widthForTablet
86+
cube: {
87+
slideShadows: false,
88+
shadow: false
6889
},
69-
992: {
70-
slidesPerView: widthForLaptop
90+
fade: {
91+
crossFade: true
7192
},
72-
1024: {
73-
slidesPerView: widthForMediumLaptop
93+
flip: {
94+
slideShadows: false
95+
},
96+
onInit: function () {
97+
currentSlider.closest('.slider-container').css('height', 'auto')
98+
$('.slider-container_loader').css('display', 'none')
7499
}
75-
},
76-
coverflow: {
77-
rotate: 90,
78-
stretch: 0,
79-
depth: 200,
80-
modifier: 1,
81-
slideShadows: false
82-
},
83-
cube: {
84-
slideShadows: false,
85-
shadow: false
86-
},
87-
fade: {
88-
crossFade: true
89-
},
90-
flip: {
91-
slideShadows: false
92-
}
93-
})
94-
// Makes it possible to skip between slider images if they have links, using the tab button
95-
slider.container.on('focus', 'a', function (e) {
96-
// Index of focused slide
97-
var focusIndex = $(e.target).parents('.slider-container__slide').index()
98-
// Reset scrollLeft set by browser on focus
99-
slider.container.scrollLeft(0)
100-
// IE fix
101-
setTimeout(function () {
100+
})
101+
// Makes it possible to skip between slider images if they have links, using the tab button
102+
slider.container.on('focus', 'a', function (e) {
103+
// Index of focused slide
104+
var focusIndex = $(e.target).parents('.slider-container__slide').index()
105+
// Reset scrollLeft set by browser on focus
102106
slider.container.scrollLeft(0)
103-
}, 0)
104-
// Slide to focused slide
105-
slider.slideTo(focusIndex)
107+
// IE fix
108+
setTimeout(function () {
109+
slider.container.scrollLeft(0)
110+
}, 0)
111+
// Slide to focused slide
112+
slider.slideTo(focusIndex)
113+
})
106114
})
107-
})
115+
}
108116
})
109117
})(jQuery)

‎felayout_t3kit/dev/styles/main/contentElements/sliderContainer.less‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,40 @@
11
.slider-container {
22
position: relative;
3+
height: 0;
4+
overflow: hidden;
5+
}
6+
7+
.slider-container_loader {
8+
display: block;
9+
width: 46px;
10+
height: 46px;
11+
height: 350px;
12+
position: relative;
13+
margin: 0 auto;
14+
15+
&:after {
16+
content: " ";
17+
display: block;
18+
top: 50%;
19+
position: absolute;
20+
width: 46px;
21+
height: 46px;
22+
margin: 1px;
23+
border-radius: 50%;
24+
border: 5px solid @main-color;
25+
border-color: @main-color transparent @main-color transparent;
26+
animation: lds-dual-ring 1.2s linear infinite;
27+
}
28+
}
29+
30+
@keyframes lds-dual-ring {
31+
0% {
32+
transform: rotate(0deg);
33+
}
34+
35+
100% {
36+
transform: rotate(360deg);
37+
}
338
}
439

540
.slider-container__container {

0 commit comments

Comments
 (0)