From c3a942c6b2e99f7a6a56be927402ab99e001af3d Mon Sep 17 00:00:00 2001 From: Viktoria Husaruk Date: Tue, 6 Dec 2016 12:36:56 +0200 Subject: [PATCH] [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 | 1 + .../main/contentElements/sliderContainer.js | 110 +++++ dev/styles/main.less | 1 + .../main/contentElements/sliderContainer.less | 81 ++++ .../contentElements/sliderContainer.hbs | 459 ++++++++++++++++++ .../contentElements/sliderContainer.hbs | 26 + .../parts/nav/dropdownMenuWithColumns.hbs | 9 +- 7 files changed, 684 insertions(+), 3 deletions(-) create mode 100644 dev/js/main/contentElements/sliderContainer.js create mode 100644 dev/styles/main/contentElements/sliderContainer.less create mode 100644 dev/templates/pages/content/contentElements/sliderContainer.hbs create mode 100644 dev/templates/parts/content/contentElements/sliderContainer.hbs diff --git a/dev/js/main.js b/dev/js/main.js index 3f4bab4..c6a859e 100644 --- a/dev/js/main.js +++ b/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'; diff --git a/dev/js/main/contentElements/sliderContainer.js b/dev/js/main/contentElements/sliderContainer.js new file mode 100644 index 0000000..f3e429c --- /dev/null +++ b/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('
'); + }); + + 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); diff --git a/dev/styles/main.less b/dev/styles/main.less index 0680d98..b200cfa 100644 --- a/dev/styles/main.less +++ b/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"; diff --git a/dev/styles/main/contentElements/sliderContainer.less b/dev/styles/main/contentElements/sliderContainer.less new file mode 100644 index 0000000..1cc57c4 --- /dev/null +++ b/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; + } +} diff --git a/dev/templates/pages/content/contentElements/sliderContainer.hbs b/dev/templates/pages/content/contentElements/sliderContainer.hbs new file mode 100644 index 0000000..8fbbc24 --- /dev/null +++ b/dev/templates/pages/content/contentElements/sliderContainer.hbs @@ -0,0 +1,459 @@ +--- +#layout: default.hbs #by default it is default.hbs, but you can specify another one +title: Slider Container #title in menu +position: 9 #position in menu +hideInMenu: false #if true, will be hidden in menu +hideInBreadcrumbs: false #if true, will be hidden in breadcrumbs +externalLink: false #just add link (http://link.com) instead of "false" to use this page like a link to external page. +--- + +{{> breadcrumbs}} + +
+
+
+ + +

SliderContainer+bigIconTextButton

+

button, pagination, loop: true slidesPreView:5, speed:1000, autoplay:3000

+ {{ renderContent 'sliderContainer' + button = true + pagination = true + loop = true + slidesPerView = 5 + speed = 1000 + autoplay = 3000 + elements=' +
+ +

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

+ Read more +
+ +
+ +

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

+ Read more +
+ +
+ +

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

+ Read more +
+ +
+ +

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

+ Read more +
+ +
+ +

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

+ Read more +
+ ' + }} + + + +

SliderContainer+imageTextLink

+

button, paggination, loop: true; slidespreview:2

+ {{ renderContent 'sliderContainer' + button = true + pagination=true + loop = true + slidesPerView = 2 + elements=' +
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+
+ foto +

Content element 2

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ ' + }} + + + +

SliderContainer+quote

+

button, loop: true; paggination:false

+ {{ renderContent 'sliderContainer' + button = true + loop = true + pagination=false + elements=' +
+
+

Thank you for the support, efficient and fast. You are true professionals. Top service. It’s nice to come back.

+ +
+ +
+ +
+
+

Top service. It’s nice to come back. Thank you for the support, efficient and fast. You are true professionals.

+ +
+ +
+ ' + }} + + + +

SliderContainer+iconTextLink

+

button, pagination, loop: true; speed:300

+ {{ renderContent 'sliderContainer' + button = true + pagination = true + loop = true + speed = 300 + elements=' +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ +
+

Content element

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+ Read more +
+ ' + }} + + + +

SliderContainer+TextAndMedia

+

button, paggination: true; slidesPreView:2

+ {{ renderContent 'sliderContainer' + button = true + pagination = true + slidesPerView = 2 + elements=' +
+

Nam iaculis nisi quis posuere gravida - Above, center

+
+
+
+
+
+
+
+ + img + +
+ Pellentesque tristique erat ac metus tristique efficitur +
+
+
+
+
+
+
+
+

Duis sagittis, lorem in porttitor vestibulum, quam tellus venenatis velit, vitae aliquam mauris nunc vel justo. Donec vel consequat tortor. Etiam hendrerit id massa sit amet lobortis. Maecenas in risus quam. Pellentesque id libero vitae nibh feugiat porttitor eget id purus.

+
+
+
+
+

Nam iaculis nisi quis posuere gravida - Above, center

+
+
+
+
+
+
+
+ + img + +
+ Pellentesque tristique erat ac metus tristique efficitur +
+
+
+
+
+
+
+
+

Duis sagittis, lorem in porttitor vestibulum, quam tellus venenatis velit, vitae aliquam mauris nunc vel justo. Donec vel consequat tortor. Etiam hendrerit id massa sit amet lobortis. Maecenas in risus quam. Pellentesque id libero vitae nibh feugiat porttitor eget id purus.

+
+
+
+
+

Nam iaculis nisi quis posuere gravida - Above, center

+
+
+
+
+
+
+
+ + img + +
+ Pellentesque tristique erat ac metus tristique efficitur +
+
+
+
+
+
+
+
+

Duis sagittis, lorem in porttitor vestibulum, quam tellus venenatis velit, vitae aliquam mauris nunc vel justo. Donec vel consequat tortor. Etiam hendrerit id massa sit amet lobortis. Maecenas in risus quam. Pellentesque id libero vitae nibh feugiat porttitor eget id purus.

+
+
+
+
+

Nam iaculis nisi quis posuere gravida - Above, center

+
+
+
+
+
+
+
+ + img + +
+ Pellentesque tristique erat ac metus tristique efficitur +
+
+
+
+
+
+
+
+

Duis sagittis, lorem in porttitor vestibulum, quam tellus venenatis velit, vitae aliquam mauris nunc vel justo. Donec vel consequat tortor. Etiam hendrerit id massa sit amet lobortis. Maecenas in risus quam. Pellentesque id libero vitae nibh feugiat porttitor eget id purus.

+
+
+
+
+

Nam iaculis nisi quis posuere gravida - Above, center

+
+
+
+
+
+
+
+ + img + +
+ Pellentesque tristique erat ac metus tristique efficitur +
+
+
+
+
+
+
+
+

Duis sagittis, lorem in porttitor vestibulum, quam tellus venenatis velit, vitae aliquam mauris nunc vel justo. Donec vel consequat tortor. Etiam hendrerit id massa sit amet lobortis. Maecenas in risus quam. Pellentesque id libero vitae nibh feugiat porttitor eget id purus.

+
+
+
+ ' + }} + + + +

SliderContainer+images(lightbox)

+

button, paggination, loop: true; slidesPreView:4

+ {{ renderContent 'sliderContainer' + button = true + pagination = true + loop = true + slidesPerView = 4 + elements=' +
+
+
+
+
+
+
+
+ + Foto 1 alternative text + +
+ This is Öresundsbron, the bridge between Sweden and Denmark. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Foto 1 alternative text + +
+ This is Öresundsbron, the bridge between Sweden and Denmark. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Foto 1 alternative text + +
+ This is Öresundsbron, the bridge between Sweden and Denmark. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Foto 1 alternative text + +
+ This is Öresundsbron, the bridge between Sweden and Denmark. +
+
+
+
+
+
+
+
+
+ ' + }} + + + +
+
+
diff --git a/dev/templates/parts/content/contentElements/sliderContainer.hbs b/dev/templates/parts/content/contentElements/sliderContainer.hbs new file mode 100644 index 0000000..2f96aa7 --- /dev/null +++ b/dev/templates/parts/content/contentElements/sliderContainer.hbs @@ -0,0 +1,26 @@ +{{!-- SliderContainer settings: + pagination=true/false (by deafalt false); + loop=true/false (by deafalt false); + slidesperview = 1/2/3/4/5 (by deafalt 3); + speed=300/500/1000 (by deafalt 500); + autoplay=1000/2000/3000/5000/7000/10000 (by deafalt "false"); + effect=slider/coverflow/flip/fade/cube (by deafalt slider); +--}} + + +
+
+
+ {{#if this.elements}} + {{{elements}}} + {{/if}} +
+
+ {{#if this.pagination}} +
+ {{/if}} + {{#if this.button}} +
+
+ {{/if}} +
diff --git a/dev/templates/parts/nav/dropdownMenuWithColumns.hbs b/dev/templates/parts/nav/dropdownMenuWithColumns.hbs index 8dbc994..99ae542 100644 --- a/dev/templates/parts/nav/dropdownMenuWithColumns.hbs +++ b/dev/templates/parts/nav/dropdownMenuWithColumns.hbs @@ -103,13 +103,16 @@
  • Tabs
    • -
  • +
  • + Slider Container +
    • +
  • FullWidthImage
    • -
  • +
  • ResponsiveVideo
    • -
  • +
  • Navigation Level 3