diff --git a/index.html b/index.html index 16d24e5..f51bb09 100644 --- a/index.html +++ b/index.html @@ -36,9 +36,9 @@ description: pages.home.description {% tmd pages.home.merchants-text %} -
+
-
+ -
+ -
+ -
+ -
+ -
+
diff --git a/package.json b/package.json index dd85d49..cb49fca 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ }, "dependencies": { "no-scroll": "^2.0.0", - "sass-burger": "^1.3.1" + "sass-burger": "^1.3.1", + "slick-carousel": "^1.6.0" } } diff --git a/src/js/ctabox.js b/src/js/ctabox.js new file mode 100644 index 0000000..d6c3ed9 --- /dev/null +++ b/src/js/ctabox.js @@ -0,0 +1,55 @@ +;(function($) { + 'use strict'; + + $(document).ready(function() { + + var $ctaboxes = $('[data-js-ctabox]'); + + $ctaboxes.each(function(index, element) { + var $element = $(element), + $slider = $element.find('.ctabox__inner'), // TODO + $slides = $element.find('.ctabox__cta'), // TODO + sliderOptions = { + centerMode: true, // ($slides.length % 2 > 0), + draggable: true, + touchThreshold: 10, + variableWidth: true, + arrows: false, // TODO + infinite: true + }, + + /** + * Make "off-slides" clickable. + * Enable navigation by clicking on the next/last image + * TODO: Do it without rebinding everthing + **/ + bindSlides = function() { + $slides = $element.find('.ctabox__cta'); + $slides.unbind('click.ctabox') + .bind('click.ctabox', function(e) { + var $target = $(e.currentTarget); + + if ($target.hasClass('slick-current') !== true) { + e.stopPropagation(); + e.preventDefault(); + if ($target.prevAll('.slick-current').length > 0) { + $slider.slick('slickNext'); + } else { + $slider.slick('slickPrev'); + } + } + }); + }; + + // Init Slider + $slider.slick(sliderOptions); + + if (sliderOptions.centerMode === true) { + bindSlides(); + $slider.on('beforeChange', bindSlides); + } + }); + + }); + +}(jQuery)); diff --git a/src/js/slick.slider.js b/src/js/slick.slider.js new file mode 100644 index 0000000..ccd23b2 --- /dev/null +++ b/src/js/slick.slider.js @@ -0,0 +1,23 @@ +/*eslint-disable */ + +/* + _ _ _ _ + ___| (_) ___| | __ (_)___ +/ __| | |/ __| |/ / | / __| +\__ \ | | (__| < _ | \__ \ +|___/_|_|\___|_|\_(_)/ |___/ + |__/ + + Version: 1.6.0 + Author: Ken Wheeler + Website: http://kenwheeler.github.io + Docs: http://kenwheeler.github.io/slick + Repo: http://github.com/kenwheeler/slick + Issues: http://github.com/kenwheeler/slick/issues + + */ + +!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"undefined"!=typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";var b=window.Slick||{};b=function(){function c(c,d){var f,e=this;e.defaults={accessibility:!0,adaptiveHeight:!1,appendArrows:a(c),appendDots:a(c),arrows:!0,asNavFor:null,prevArrow:'',nextArrow:'',autoplay:!1,autoplaySpeed:3e3,centerMode:!1,centerPadding:"50px",cssEase:"ease",customPaging:function(b,c){return a('