wp_register_script(
'cube-link-carousel',
asset('scripts/link-carousel.js'),
- ['jquery'], // Dependencies
+ ['jquery', 'swiper'], // Dependencies
null, // Version
true // In footer?
);
- // Note: previously we used Elementor's copy of Slick but they replaced
- // Slick with Swiper in recent versions so now we handle it all ourselves
+ // Using Swiper because it is already included and heavily used by Elementor
return [ 'cube-link-carousel' ];
}
* Theme assets
*/
add_action('wp_enqueue_scripts', function () {
- wp_enqueue_script('sage/vendor', asset('scripts/vendor.js')->uri(), ['jquery'], null, true);
- wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor', 'jquery'], null, true);
+ wp_enqueue_script('sage/vendor', asset('scripts/vendor.js')->uri(), [], null, true);
+ wp_enqueue_script('sage/app', asset('scripts/app.js')->uri(), ['sage/vendor'], null, true);
wp_add_inline_script('sage/vendor', asset('scripts/manifest.js')->contents(), 'before');
"cross-env": "^5.2",
"eslint": "^5.11",
"eslint-plugin-import": "^2.17",
- "jquery": "^3.4.1",
"laravel-mix": "^4.0",
"laravel-mix-purgecss": "^4.1.0",
"lost": "^8.3.1",
"purgecss-with-wordpress": "knowler/purgecss-with-wordpress#more-wp-generated-classes",
"rimraf": "^2.6",
"rupture": "^0.7.1",
- "slick-carousel": "^1.8.1",
"stylelint": "^10.1",
"stylelint-config-standard": "^18.2",
"stylus": "^0.54.7",
-import 'slick-carousel'
-import $ from 'jquery';
-window.$ = window.jQuery = $;
-
// ELEMENTOR Trigger
-$(window).on( 'elementor/frontend/init', function() {
- elementorFrontend.hooks.addAction('frontend/element_ready/cube-link-carousel.default', function ($scope) {
- $scope.find('.link-carousel').slick(); // Note: settings come from data-attribute in HTML
+(function($) {
+ $(window).on('elementor/frontend/init', function () {
+ elementorFrontend.hooks.addAction('frontend/element_ready/cube-link-carousel.default', function ($scope) {
+ const elementSelector = `[data-id="${$scope.data('id')}"] .link-carousel`;
+ const swiperSettings = $(elementSelector).data('swiper'); // Get parameters from data-swiper attribute in HTML
+ const swiper = new Swiper(elementSelector, swiperSettings);
+ });
});
-});
+})(jQuery);
.link-carousel
&-item
- display: block
+ display: flex
+ align-items: center
+ flex-direction: column
cursor: pointer
- text-align: center
- margin: 0 20px
+ border-right: 1px solid rgba(#fff, 0.2)
+ height: auto !important // Needed to make equal heights, otherwise Swiper's 100% height breaks this
+
&-image
- display: block
- width: 100%
- position: relative
+ flex-grow: 1
+ padding: 2.5em 1em 1em
&-title
- margin-top: 1.5em
-
-// Slick overrides
-.slick-slider
- padding: 0 80px
-
- +below(768px)
- padding: 0 60px
- +below(500px)
- padding: 0 40px
-
-
- .slick-slide
- outline: none
-
- .slick-arrow, .slick-arrow:focus
- width: auto
- background: #ccc
- border-radius: 50%
- font-size: 56px
- line-height: 1.25
- width: 1.25em
- height: @width
- text-align: center
- transition: all 0.2s ease-out
-
- +below(768px)
- font-size: 45px
- +below(500px)
- font-size: 35px
-
- &:before
- display: inline-block
- color: currentColor
- font-size: 1em
- opacity: 0.7
- transition: inherit
- position: relative
- top: -0.02em
-
- &:hover
- &:before
- opacity: 1
-
-
- .slick-prev
- left: 0
- .slick-next
- right: 0
+ display: flex
+ flex-grow: 0
+ flex-shrink: 0
+ height: 4em // Fixed height regardless of label length
+ width: 100%
+ justify-content: center
+ align-items: center
+ text-align: center
+ padding: 1em
+ font-size: 26px
+ transition: background-color 0.2s ease-out
+
+ .link-carousel-item:hover &
+ @apply bg-teal
{{-- LINKS CAROUSEL --}}
@php
$settings = [
- 'slidesToShow' => 4,
- 'slidesToScroll' => 1,
- 'infinite' => true,
- 'responsive' => [
- [
- 'breakpoint' => 768,
- 'settings' => [
- 'slidesToShow' => 2
- ]
- ],
- ]
+ 'slidesPerView' => 4,
+ 'loop' => true,
+ 'breakpoints' => [
+ 1200 => [
+ 'slidesPerView' => 3
+ ],
+ 768 => [
+ 'slidesPerView' => 2
+ ],
+ ],
+ 'navigation' => [
+ 'nextEl' => '.swiper-button-next',
+ 'prevEl' => '.swiper-button-prev',
+ ],
];
- $slick = json_encode($settings);
+ $swiper = json_encode($settings);
@endphp
-<div class="link-carousel" data-slick="{{ $slick }}">
- @foreach ($links as $link)
- <a class="link-carousel-item slick-slide" href="{{ $link['url'] }}">
- <div class="slick-slide-inner">
+<div class="link-carousel swiper-container" data-swiper="{{ $swiper }}">
+ <div class="swiper-wrapper">
+ @foreach ($links as $link)
+ <a class="link-carousel-item swiper-slide" href="{{ $link['url'] }}">
<div class="link-carousel-item-image">
- <img src="{{ $link['image']['url'] }}">
+ <img src="{{ $link['image']['url'] }}" alt="{{ $link['title'] }}">
</div>
<h4 class="link-carousel-item-title">{{ $link['title'] }}</h4>
- </div>
- </a>
- @endforeach
+ </a>
+ @endforeach
+ </div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-button-next"></div>
</div>
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-jquery@^3.4.1:
- version "3.4.1"
- resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
- integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
-
js-dom-router@^1.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/js-dom-router/-/js-dom-router-1.0.0.tgz#c4b05674f6f0734f5bf9b9f389f1b3d9c62e4103"
astral-regex "^1.0.0"
is-fullwidth-code-point "^2.0.0"
-slick-carousel@^1.8.1:
- version "1.8.1"
- resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
- integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
-
snapdragon-node@^2.0.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
projects / ccv-wordpress.git / commitdiff