[FEATURE] add new grid element 'slider container' (Podio Feature_61) (#…

…17)

* [FEATURE] add new grid element slider-container

* [STYLE] change comment of sliderContainer.hbs

* [FIX] delete twice recall function (Podio Feature_61)

* [FIX] fix bugging flip effect

dev/js/main.js

@@ -6,6 +6,7 @@
 @import 'main/contentElements/slider.js';
 @import 'main/contentElements/carousel.js';
 @import 'main/contentElements/parallax.js';
+@import 'main/contentElements/sliderContainer.js';
 
 // plugins
 @import 'main/plugins/news/newsCarousel.js';

dev/js/main/contentElements/sliderContainer.js

@@ -0,0 +1,110 @@
+/* global Swiper*/
+(function($) {
+    'use strict';
+    // document load event
+    $(document).ready(function() {
+        var $swiperContainerWrapper = $('.js__slider-container__wrapper');
+        $swiperContainerWrapper.each(function() {
+            $(this).children().wrap('<div class="swiper-slide slider-container__slide js__slider-container__slide"></div>');
+        });
+
+        var $swiperContainer = $('.js__slider-container__container');
+        $swiperContainer.each(function() {
+            var time = $(this).attr('data-autoplay');
+            var loopParam = $(this).attr('data-loop');
+            var amountOfSlides = parseInt($(this).attr('data-slidesperview'));
+            var effectName = $(this).attr('data-effect');
+            var transition = $(this).attr('data-speed');
+            var widthForMobile;
+            var widthForTablet;
+            var widthForLaptop;
+            var widthForMediumLaptop;
+            if (amountOfSlides >= 4) {
+                widthForMobile = 1,
+                widthForTablet = 2,
+                widthForLaptop = 3,
+                widthForMediumLaptop = 4;
+            } else if (amountOfSlides === 2) {
+                widthForMobile = 1,
+                widthForTablet = 1,
+                widthForLaptop = 1,
+                widthForMediumLaptop = 2;
+            } else if (amountOfSlides === 1) {
+                widthForMobile = 1,
+                widthForTablet = 1,
+                widthForLaptop = 1,
+                widthForMediumLaptop = 1;
+            } else {
+                widthForMobile = 1,
+                widthForTablet = 2,
+                widthForLaptop = 2,
+                widthForMediumLaptop = 3;
+            }
+            var slider = new Swiper($(this), {
+                containerModifierClass:'js__slider-container__container',
+                wrapperClass:'js__slider-container__wrapper',
+                slideClass:'js__slider-container__slide',
+                nextButton: $(this).parent().find('.js__slider-container__btn-next'),
+                prevButton: $(this).parent().find('.js__slider-container__btn-prev'),
+                pagination: $(this).parent().find('.js__slider-container__pagination'),
+                paginationClickable: true,
+                speed: parseInt(transition),
+                loop:loopParam,
+                autoplay: time,
+                effect:effectName,
+                watchSlidesVisibility: true,
+                spaceBetween: 20,
+                preloadImages: false,
+                lazyLoading: true,
+                lazyLoadingInPrevNext: true,
+                slidesPerView: amountOfSlides,
+                breakpoints:{
+                    // Responsive breakpoints
+                    480: {
+                        slidesPerView:widthForMobile
+                    },
+                    767: {
+                        slidesPerView:widthForTablet
+                    },
+                    992: {
+                        slidesPerView:widthForLaptop
+                    },
+                    1024:{
+                        slidesPerView:widthForMediumLaptop
+                    }
+                },
+                coverflow: {
+                    rotate: 90,
+                    stretch: 0,
+                    depth: 200,
+                    modifier: 1,
+                    slideShadows: false
+                },
+                cube: {
+                    slideShadows: false,
+                    shadow: false
+                },
+                fade: {
+                    crossFade: true
+                },
+                flip: {
+                    slideShadows: false,
+                    limitRotation: true
+                }
+            });
+            // Makes it possible to skip between slider images if they have links, using the tab button
+            slider.container.on('focus', 'a', function(e) {
+                //Index of focused slide
+                var focusIndex = $(e.target).parents('.slider-container__slide').index();
+                //Reset scrollLeft set by browser on focus
+                slider.container.scrollLeft(0);
+                // IE fix
+                setTimeout(function() {
+                    slider.container.scrollLeft(0);
+                }, 0);
+                //Slide to focused slide
+                slider.slideTo(focusIndex);
+            });
+        });
+    });
+})(jQuery);

dev/styles/main.less

@@ -51,6 +51,7 @@
 @import "main/contentElements/logoCarousel.less";
 @import "main/contentElements/socialIcons.less";
 @import "main/contentElements/parallax.less";
+@import "main/contentElements/sliderContainer.less";
 
 // appearance
 @import "main/appearance/wrapperStyle/blueMountainWrp.less";

dev/styles/main/contentElements/sliderContainer.less

@@ -0,0 +1,81 @@
+.slider-container{
+    position: relative;
+}
+
+.slider-container__container{
+    margin:20px 45px 40px;
+    position: relative;
+    overflow: hidden;
+}
+
+.slider-container-effect{
+    margin:20px 15px 45px;
+}
+
+.slider-container-effect .slider-container__container{
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.slider-container-effect .slider-container__slide{
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+
+.slider-container__button-prev, .slider-container__button-next {
+    display: none;
+}
+
+.slider-container__button-next{
+    right: 5px;
+}
+.slider-container__button-prev{
+    left: -5px;
+}
+
+.slider-container__button-next:before{
+    content: '\e675';
+}
+.slider-container__button-prev:before{
+    content: '\e672';
+}
+
+.slider-container__pagination .swiper-pagination-bullet-active {
+    background: @main-color;
+}
+
+.slider-container__pagination{
+    bottom: -20px;
+    width: 100%;
+}
+
+.slider-container__pagination > .swiper-pagination-bullet{
+    margin:0 5px;
+}
+
+@media (min-width: 992px){
+    .slider-container__button-prev, .slider-container__button-next {
+        display: block;
+        background: none;
+        .icons();
+        color: @main-color;
+        -moz-osx-font-smoothing: grayscale;
+        height: auto;
+        font-size: 35px;
+    }
+
+    .slider-container-effect .slider-container__container{
+        margin: 20px 45px 40px;
+        position: relative;
+        overflow: hidden;
+    }
+}
+
+@media (min-width: 1280px){
+    .slider-container-effect{
+        max-width:990px;
+        margin:20px auto 45px;
+    }
+}