Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
0c383575 by Jeff Balicki
Options

carousel 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 291fc93e
Expand all
Inline Side-by-side
Showing 18 changed files with 311 additions and 3 deletions
1 <?php
2
3 /**
4 * Carousel Block Template.
5 *
6 * @param array $block The block settings and attributes.
7 * @param string $content The block inner HTML (empty).
8 * @param bool $is_preview True during AJAX preview.
9 * @param (int|string) $post_id The post ID this block is saved to.
10 */
11
12 // Create id attribute allowing for custom "anchor" value.
13 $id = 'carousel-' . $block['id'];
14 if( !empty($block['anchor']) ) {
15 $id = $block['anchor'];
16 }
17
18 // Create class attribute allowing for custom "className" and "align" values.
19 $className = 'carousel';
20
21
22 if( !empty($block['className']) ) {
23 $className .= ' ' . $block['className'];
24 }
25 if( !empty($block['align']) ) {
26 $className .= ' align' . $block['align'];
27 }
28 if( $is_preview ) {
29 $className .= ' is-admin';
30 }
31
32 $carousel_style = get_field('carousel_style');
33
34
35 ?>
36 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
37 <?php switch($carousel_style){
38
39 case 'promo': ?>
40
41 <?php if( have_rows('promo_items') ): ?>
42 <div class=" carousel-items promo-carousel">
43 <div class='swiper-wrapper'>
44 <?php while( the_repeater_field('promo_items') ): ?>
45 <div class="swiper-slide">
46 <div class="carousel-content">
47 <?php $image = get_sub_field('image'); ?>
48 <div class="row">
49 <div class="col-lg-4 col-md-12 promo-image" style=background-image:url(); >
50 <img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt'];?>">
51 </div>
52 <div class="col-lg-8 col-md-12">
53 <div class="promo-text"><?php the_sub_field('text'); ?></div>
54 </div>
55 </div>
56 </div>
57 </div>
58 <?php endwhile; ?>
59 </div>
60 <div class="swiper-pagination"></div>
61
62 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
63 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
64 </div>
65 <?php else: ?>
66 <p>Please add some slides.</p>
67 <?php endif; ?>
68
69 <?php break;
70 default: ?>
71 <p>Please select style.</p>
72 <?php }; ?>
73 </div>
74
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -55,4 +55,16 @@ if( function_exists('acf_add_options_page') ) { ...@@ -55,4 +55,16 @@ if( function_exists('acf_add_options_page') ) {
55 ] 55 ]
56 )); 56 ));
57 57
58 acf_register_block_type( array(
59 'title' => __( 'Carousel', 'client_textdomain' ),
60 'name' => 'carousel',
61 'render_template' => 'blocks/carousel/carousel.php',
62 'mode' => 'edit',
63 'supports' => [
64 'align' => false,
65 'anchor' => true,
66 'customClassName' => true
67 ]
68 ));
69
58 } 70 }
...\ No newline at end of file ...\ No newline at end of file
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -42,6 +42,8 @@ ...@@ -42,6 +42,8 @@
42 }, 42 },
43 "homepage": "https://understrap.com", 43 "homepage": "https://understrap.com",
44 "dependencies": { 44 "dependencies": {
45 "rollup-plugin-postcss": "^4.0.2",
46 "swiper": "^8.4.2",
45 "vanilla-lazyload": "^17.8.4" 47 "vanilla-lazyload": "^17.8.4"
46 }, 48 },
47 "devDependencies": { 49 "devDependencies": {
...@@ -65,7 +67,7 @@ ...@@ -65,7 +67,7 @@
65 "postcss": "^8.4.18", 67 "postcss": "^8.4.18",
66 "postcss-cli": "^10.0.0", 68 "postcss-cli": "^10.0.0",
67 "postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git", 69 "postcss-understrap-palette-generator": "git+https://github.com/understrap/postcss-understrap-palette-generator.git",
68 "rollup": "^3.2.5", 70 "rollup": "^2.78.0",
69 "sass": "^1.56.0", 71 "sass": "^1.56.0",
70 "terser": "^5.15.1", 72 "terser": "^5.15.1",
71 "understrap": "github:understrap/understrap#develop" 73 "understrap": "github:understrap/understrap#develop"
......
...@@ -9,7 +9,7 @@ const { nodeResolve } = require( '@rollup/plugin-node-resolve' ); ...@@ -9,7 +9,7 @@ const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
9 const commonjs = require( '@rollup/plugin-commonjs' ); 9 const commonjs = require( '@rollup/plugin-commonjs' );
10 const multi = require( '@rollup/plugin-multi-entry' ); 10 const multi = require( '@rollup/plugin-multi-entry' );
11 const replace = require( '@rollup/plugin-replace' ); 11 const replace = require( '@rollup/plugin-replace' );
12 12 import postcss from 'rollup-plugin-postcss'
13 /** 13 /**
14 * Internal dependencies 14 * Internal dependencies
15 */ 15 */
...@@ -39,6 +39,9 @@ const plugins = [ ...@@ -39,6 +39,9 @@ const plugins = [
39 nodeResolve(), 39 nodeResolve(),
40 commonjs(), 40 commonjs(),
41 multi(), 41 multi(),
42 postcss({
43 plugins: []
44 })
42 ]; 45 ];
43 46
44 module.exports = { 47 module.exports = {
......
1 import Swiper, {
2 Navigation,
3 Pagination,
4 A11y,
5 Keyboard
6 } from 'swiper';
7 import 'swiper/css';
8 import 'swiper/css/navigation';
9 import 'swiper/css/pagination';
10 import 'swiper/css/keyboard';
11 import 'swiper/css/a11y';
12
13 jQuery(document).ready(function($) {
14
15
16
17 jQuery('.carousel-items').each(function() {
18
19 //var offset = ((window.innerWidth - $('#content').width()) / 2) - 28;
20 //var offsetAfter = ((window.innerWidth - $('#content').width()) / 2) - 28;
21 var offsetAfter = 0;
22 var PerView = 1
23 var offset =0;
24 var space = 20;
25 var SlidesPerGroup= 1;
26
27 var _id = jQuery(this).parent().attr('id');
28
29
30 if ($(window).width() < 600) {
31 offset = 0;
32 PerView = 1;
33 SlidesPerGroup = 1;
34 space = 0;
35 offsetAfter = 0;
36
37 }
38
39
40
41 var swiper_params = {
42 modules: [Navigation, Pagination, A11y, Keyboard],
43 slidesPerView: PerView,
44 slidesOffsetAfter: offsetAfter,
45 slidesOffsetBefore: offset,
46 spaceBetween: space,
47 slidesPerGroup: SlidesPerGroup ,
48 centeredSlides: true,
49 loop: true,
50 pagination: {
51 el: ".swiper-pagination",
52 type: 'bullets',
53 clickable: "true",
54 },
55
56 navigation: {
57 nextEl: '.swiper-button-next[data-id="' + _id + '"]',
58 prevEl: '.swiper-button-prev[data-id="' + _id + '"]',
59 },
60
61 a11y: {
62 prevSlideMessage: 'Previous slide',
63 nextSlideMessage: 'Next slide',
64 },
65 keyboard: {
66 enabled: true,
67 onlyInViewport: false,
68 },
69
70 };
71
72
73 new Swiper(this, swiper_params);
74 console.log(swiper_params);
75
76 });
77 $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
78
79 $(window).on('resize', function(){
80 $('.carousel ').css('margin-left',"-"+$('#content').css('margin-left'));
81
82 });
83
84
85 });
...\ No newline at end of file ...\ No newline at end of file
...@@ -7,6 +7,7 @@ import "./_search"; ...@@ -7,6 +7,7 @@ import "./_search";
7 import "./_header_menu"; 7 import "./_header_menu";
8 import "./_side_menu"; 8 import "./_side_menu";
9 import "./_image_captionation"; 9 import "./_image_captionation";
10 import "./_carousels";
10 11
11 12
12 var myLazyLoad = new LazyLoad(); 13 var myLazyLoad = new LazyLoad();
......
1 .swiper-pagination-bullet {
2 background: #fff !important;
3 border: 2px solid #2c2c2c !important;
4 height: 10px !important;
5 width: 10px !important;
6 border-radius: 0% !important;
7 background-color: #666666 !important;
8 border: 1px solid #666666 !important;
9 opacity: 0.25 !important;
10 }
11 .swiper-pagination-bullet-active {
12 opacity: 1 !important;
13 }
14
15 .swiper-pagination{
16 bottom: -40px !important;
17 }
18 // carousel css
19 .carousel:not(.is-admin) {
20 background-color: transparent !important;
21 left: -20px;
22 width: 100vw;
23 margin-top: 30px;
24 margin-bottom: 30px;
25 padding: 0px 50px;
26
27 }
28
29 .carousel-items {
30 text-align: center;
31 font-size: 18px;
32 background: #fff;
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 max-width: 1200px;
37 margin: 0 auto;
38 overflow: hidden;
39
40 }
41 .carousel-content{
42 padding: 0px 50px;
43 }
44 .promo-image{
45 img{
46 width: 100%;
47 }
48 }
49 .promo-carousel{
50 h2{
51 font-size: 24px;
52 line-height: 30px;
53 text-align: left;
54 }
55 p{
56 font-size: 16px;
57 line-height: 24px;
58 text-align: left;
59 }
60 .promo-text{
61 margin-left: 20px;
62 @media only screen and (max-width: 1000px) {
63 margin-left: 0px;
64 margin-top: 20px;
65 }
66 }
67 }
68
69 .swiper-button-next.swiper-button-disabled,
70 .swiper-button-prev.swiper-button-disabled {
71 pointer-events: all !important;
72 }
73
74 .carousel-items.slick-initialized.slick-slider {
75 margin-right: 15px; //for the scroll bar
76 }
77
78
79
80 .swiper-button-prev{
81 background-color: #EE0000;
82
83 width:35px !important;
84 height:35px !important;
85 border: 0px solid #EE0000;
86 border-radius: 0px 20px 20px 0px;
87 display: none;
88
89 &:after{
90 content:"" !important;
91 width: 11px;
92 height: 18px;
93 background-repeat: no-repeat;
94 background-size: contain;
95 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
96 display: inline-block;
97 position: absolute;
98 top: 8px;
99 left: 13px;
100 }
101
102 }
103
104 .swiper-button-next{
105 background-color: #EE0000;
106
107 right: -10px !important;
108
109 width:35px !important;
110 height:35px !important;
111 border: 0px solid #EE0000;
112 border-radius: 20px 0px 0px 20px;
113 display: none;
114
115 &:after{
116 content:"" !important;
117 width: 11px;
118 height: 18px;
119 background-repeat: no-repeat;
120 background-size: contain;
121 transform: rotate(180deg);
122 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
123 display: inline-block;
124 position: absolute;
125 top: 8px;
126 left: 13px;
127 }
128
129 }
130
...@@ -20,3 +20,4 @@ body{ ...@@ -20,3 +20,4 @@ body{
20 @import "text_size_increased"; 20 @import "text_size_increased";
21 @import "promo_area"; 21 @import "promo_area";
22 @import "project_lead"; 22 @import "project_lead";
23 @import "carousel";
......
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
2 Theme Name: MSF CA Child 2 Theme Name: MSF CA Child
3 Author: Tenzing Communications 3 Author: Tenzing Communications
4 Template: msf-ca 4 Template: msf-ca
5 Version: 1.0.12 5 Version: 1.0.13
6 */ 6 */
......