mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
[Feature] CTABox: Slider
This commit is contained in:
0xfff
parent
015ecd062c
commit
7d9e576138
7 changed files with 211 additions and 8 deletions
14
index.html
14
index.html
|
|
@ -36,9 +36,9 @@ description: pages.home.description
|
|||
{% tmd pages.home.merchants-text %}
|
||||
</div>
|
||||
|
||||
<div class="ctabox">
|
||||
<div class="ctabox" data-js-ctabox>
|
||||
<div class="ctabox__inner">
|
||||
<article class="ctabox__cta">
|
||||
<article class="ctabox__cta" data-js-ctabox-item>
|
||||
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
|
||||
<div class="ctabox__imagewrapper">
|
||||
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
|
||||
|
|
@ -51,7 +51,7 @@ description: pages.home.description
|
|||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="ctabox__cta">
|
||||
<article class="ctabox__cta" data-js-ctabox-item>
|
||||
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
|
||||
<div class="ctabox__imagewrapper">
|
||||
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
|
||||
|
|
@ -64,7 +64,7 @@ description: pages.home.description
|
|||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="ctabox__cta">
|
||||
<article class="ctabox__cta" data-js-ctabox-item>
|
||||
<a href="https://www.bolehvpn.net/" target="_blank" class="ctabox__link">
|
||||
<div class="ctabox__imagewrapper">
|
||||
<img src="/assets/img/home/bolehvpn.png" class="ctabox__image">
|
||||
|
|
@ -77,7 +77,7 @@ description: pages.home.description
|
|||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="ctabox__cta">
|
||||
<article class="ctabox__cta" data-js-ctabox-item>
|
||||
<a href="https://node40.com" target="_blank" class="ctabox__link">
|
||||
<div class="ctabox__imagewrapper">
|
||||
<img src="/assets/img/home/node40.png" class="ctabox__image">
|
||||
|
|
@ -90,7 +90,7 @@ description: pages.home.description
|
|||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="ctabox__cta">
|
||||
<article class="ctabox__cta" data-js-ctabox-item>
|
||||
<a href="https://protonmail.com/" target="_blank" class="ctabox__link">
|
||||
<div class="ctabox__imagewrapper">
|
||||
<img src="/assets/img/home/protonmail.png" class="ctabox__image">
|
||||
|
|
@ -103,7 +103,7 @@ description: pages.home.description
|
|||
</div>
|
||||
</a>
|
||||
</article>
|
||||
<article class="ctabox__cta">
|
||||
<article class="ctabox__cta" data-js-ctabox-item>
|
||||
<a href="https://www.qhoster.com/" target="_blank" class="ctabox__link">
|
||||
<div class="ctabox__imagewrapper">
|
||||
<img src="/assets/img/home/qhoster.png" class="ctabox__image">
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
55
src/js/ctabox.js
Normal file
55
src/js/ctabox.js
Normal file
|
|
@ -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));
|
||||
23
src/js/slick.slider.js
vendored
Normal file
23
src/js/slick.slider.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,32 @@
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
&__inner,
|
||||
.slick-track {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 10%;
|
||||
background: linear-gradient(to right, $color-gray-light 10%, transparent 100%);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 10%;
|
||||
background: linear-gradient(to left, $color-gray-light 10%, transparent 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&__imagewrapper {
|
||||
|
|
|
|||
98
src/scss/_slick-slider.scss
Normal file
98
src/scss/_slick-slider.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/* Slider */
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.slick-list {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.slick-slide {
|
||||
float: left;
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
[dir="rtl"] & {
|
||||
float: right;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
&.slick-loading img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&.dragging img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slick-initialized & {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slick-loading & {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-vertical & {
|
||||
display: block;
|
||||
height: auto;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -26,6 +26,7 @@
|
|||
@import "overlay-menu";
|
||||
@import "video";
|
||||
@import "magnific-popup";
|
||||
@import "slick-slider";
|
||||
@import "info-grid";
|
||||
@import "ctabox";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue