Skip to content

Jeremy Groot / stellervista-Intranet

Go to a project
Toggle navigation
Toggle navigation pinning
6a6ff3ec by Jeff Balicki
Options

slider 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent defae2b4
Inline Side-by-side
Showing 25 changed files with 132 additions and 847 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 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
36 <?php switch($carousel_style){
37 case 'count-up-infographic':
38 ?>
39 <?php if( have_rows('count_up_infographic_items') ): ?>
40 <div class="count-info carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
41 <?php while( the_repeater_field('count_up_infographic_items') ):
42 ?>
43 <div class="swiper-slide">
44
45 <?php
46 ob_start();
47 include __DIR__."./../card/styles/count-up-infographic.php";
48 echo ob_get_clean();
49 ?>
50
51 </div>
52 <?php endwhile; ?>
53 </div></div>
54 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
55 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
56
57 <?php else: ?>
58 <p>Please add some slides.</p>
59 <?php endif; ?>
60 <?php break;
61 case 'testimonials': ?>
62
63 <?php if( have_rows('testimonials_items') ): ?>
64 <div class="testimonials-carousel carousel-items "><div class='swiper-wrapper'>
65 <?php while( the_repeater_field('testimonials_items') ):
66 ?>
67 <div class="swiper-slide">
68
69 <?php
70 ob_start();
71 include __DIR__."./../card/styles/testimonials.php";
72 echo ob_get_clean();
73 ?>
74
75 </div>
76 <?php endwhile; ?>
77 </div></div>
78 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
79 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
80 <?php else: ?>
81 <p>Please add some slides.</p>
82 <?php endif; ?>
83
84 <?php break;
85 case 'story': ?>
86
87 <?php if( have_rows('story_items') ): ?>
88 <div class="stories carousel-items "><div class='swiper-wrapper'>
89 <?php while( the_repeater_field('story_items') ):
90 ?>
91 <div class="swiper-slide">
92 <?php
93 ob_start();
94 include __DIR__."./../card/styles/story.php";
95 echo ob_get_clean();
96 ?>
97 </div>
98 <?php endwhile; ?>
99 </div></div>
100 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
101 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
102
103 <?php else: ?>
104 <p>Please add some slides.</p>
105 <?php endif; ?>
106 <?php break;
107 case 'download': ?>
108
109 <?php if( have_rows('download_items') ): ?>
110 <div class="download carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
111 <?php while( the_repeater_field('download_items') ):
112 ?>
113 <div class="swiper-slide">
114 <?php
115 ob_start();
116 include __DIR__."./../card/styles/download.php";
117 echo ob_get_clean();
118 ?>
119 </div>
120 <?php endwhile; ?>
121 </div></div>
122 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
123 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
124 <?php else: ?>
125 <p>Please add some slides.</p>
126 <?php endif; ?>
127 <?php break;
128 case 'staff-diaries': ?>
129 <?php if( have_rows('staff_diaries_items') ): ?>
130 <div class="staff carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
131 <?php while( the_repeater_field('staff_diaries_items') ):
132 ?>
133 <div class="swiper-slide">
134 <?php
135 ob_start();
136 include __DIR__."./../card/styles/staff-diaries.php";
137 echo ob_get_clean();
138 ?>
139 </div>
140 <?php endwhile; ?>
141 </div> </div>
142 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
143 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
144 <?php else: ?>
145 <p>Please add some slides.</p>
146 <?php endif; ?>
147 <?php break;
148 case 'book-club': ?>
149 <?php if( have_rows('book_club_items') ): ?>
150 <div class="books carousel-items"><div class='swiper-wrapper'>
151 <?php while( the_repeater_field('book_club_items') ):
152 ?>
153 <div class="swiper-slide">
154 <?php
155 ob_start();
156 include __DIR__."./../card/styles/book-club.php";
157 echo ob_get_clean();
158 ?>
159 </div>
160 <?php endwhile; ?>
161 </div> </div>
162 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
163 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
164 <?php else: ?>
165 <p>Please add some slides.</p>
166 <?php endif; ?>
167 <?php break;
168 default: ?>
169 <p>Please select style.</p>
170 <?php }; ?>
171 </div>
172
1 <svg xmlns="http://www.w3.org/2000/svg" width="29" height="7" viewBox="0 0 29 7">
2 <g id="Group_985" data-name="Group 985" transform="translate(-672 105)">
3 <circle id="Ellipse_16" data-name="Ellipse 16" cx="3.5" cy="3.5" r="3.5" transform="translate(672 -105)" fill="#699"/>
4 <circle id="Ellipse_24" data-name="Ellipse 24" cx="3.5" cy="3.5" r="3.5" transform="translate(683 -105)" fill="#699"/>
5 <circle id="Ellipse_25" data-name="Ellipse 25" cx="3.5" cy="3.5" r="3.5" transform="translate(694 -105)" fill="#699"/>
6 </g>
7 </svg>
1 <svg xmlns="http://www.w3.org/2000/svg" width="29" height="7" viewBox="0 0 29 7">
2 <g id="Group_985" data-name="Group 985" transform="translate(-672 105)">
3 <circle id="Ellipse_16" data-name="Ellipse 16" cx="3.5" cy="3.5" r="3.5" transform="translate(672 -105)" fill="#e00"/>
4 <circle id="Ellipse_24" data-name="Ellipse 24" cx="3.5" cy="3.5" r="3.5" transform="translate(683 -105)" fill="#e00"/>
5 <circle id="Ellipse_25" data-name="Ellipse 25" cx="3.5" cy="3.5" r="3.5" transform="translate(694 -105)" fill="#e00"/>
6 </g>
7 </svg>
1 <svg id="Group_1314" data-name="Group 1314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.935" height="20.915" viewBox="0 0 20.935 20.915">
2 <defs>
3 <clipPath id="clip-path">
4 <rect id="Rectangle_151" data-name="Rectangle 151" width="20.935" height="20.915" fill="#699"/>
5 </clipPath>
6 </defs>
7 <path id="Path_1277" data-name="Path 1277" d="M0,0V20.915H20.934V9.763h-2.56v8.6H2.58V2.517h8.383V0Z" transform="translate(0 0)" fill="#699"/>
8 <g id="Group_1023" data-name="Group 1023" transform="translate(0 0)">
9 <g id="Group_1022" data-name="Group 1022" clip-path="url(#clip-path)">
10 <path id="Path_1278" data-name="Path 1278" d="M18.276,13.612,16.363,11.7l9.185-9.143H23V.016h6.913v6.9H27.374V4.478l-9.1,9.134" transform="translate(-8.975 -0.009)" fill="#699"/>
11 </g>
12 </g>
13 </svg>
1 <svg id="Group_1314" data-name="Group 1314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.935" height="20.915" viewBox="0 0 20.935 20.915">
2 <defs>
3 <clipPath id="clip-path">
4 <rect id="Rectangle_151" data-name="Rectangle 151" width="20.935" height="20.915" fill="none"/>
5 </clipPath>
6 </defs>
7 <path id="Path_1277" data-name="Path 1277" d="M0,0V20.915H20.934V9.763h-2.56v8.6H2.58V2.517h8.383V0Z" transform="translate(0 0)" fill="#1a1818"/>
8 <g id="Group_1023" data-name="Group 1023" transform="translate(0 0)">
9 <g id="Group_1022" data-name="Group 1022" clip-path="url(#clip-path)">
10 <path id="Path_1278" data-name="Path 1278" d="M18.276,13.612,16.363,11.7l9.185-9.143H23V.016h6.913v6.9H27.374V4.478l-9.1,9.134" transform="translate(-8.975 -0.009)" fill="#1a1818"/>
11 </g>
12 </g>
13 </svg>
1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.488" height="22" viewBox="0 0 19.488 22">
2 <defs>
3 <clipPath id="clip-path">
4 <rect id="Rectangle_217" data-name="Rectangle 217" width="19.488" height="22" fill="#fff"/>
5 </clipPath>
6 </defs>
7 <g id="Group_1435" data-name="Group 1435" clip-path="url(#clip-path)">
8 <path id="Path_1391" data-name="Path 1391" d="M16.973,22H2.529c-.034-.012-.067-.026-.1-.036a.858.858,0,0,1-.6-.545.918.918,0,0,1-.052-.333q0-2.112,0-4.225v-.122h-.1c-.15,0-.3,0-.449,0A1.233,1.233,0,0,1,.034,15.716.9.9,0,0,0,0,15.6V9a.689.689,0,0,0,.032-.1A1.231,1.231,0,0,1,1.267,7.864c.144,0,.287,0,.431,0,.024,0,.047,0,.08-.007V.982c0-.046,0-.092,0-.137A.867.867,0,0,1,2.332.053.986.986,0,0,1,2.7,0H13.056a.426.426,0,0,1,.333.146c.029.031.057.064.085.1Q15.52,2.58,17.568,4.916a.607.607,0,0,1,.167.43c0,.027,0,.055,0,.082V7.865h.1c.15,0,.3,0,.449,0a1.207,1.207,0,0,1,1.1.724,1.178,1.178,0,0,1,.1.534q0,1.851,0,3.7,0,1.315,0,2.63a1.577,1.577,0,0,1-.012.265,1.23,1.23,0,0,1-1.2,1.018h-.449c-.027,0-.053,0-.086,0v.125q0,2.08,0,4.16c0,.058,0,.116-.006.174a.862.862,0,0,1-.644.76c-.038.01-.075.024-.112.036M2.645.864v7H16.858c.021-.1.018-2.083,0-2.156h-3.7c-.034,0-.067,0-.1,0a.433.433,0,0,1-.418-.368A.867.867,0,0,1,12.63,5.2q0-2.108,0-4.215V.864Zm0,20.027H16.865V16.746H2.643Zm4.893-5.213c.037.006.067.013.1.016.249.021.5.047.749.06a10.291,10.291,0,0,0,1.611-.019,5.27,5.27,0,0,0,1.213-.262,2.8,2.8,0,0,0,1.8-1.774,4.044,4.044,0,0,0,.145-2.149,2.635,2.635,0,0,0-.525-1.166,2.867,2.867,0,0,0-1.453-.956,5.356,5.356,0,0,0-1.474-.2A14.208,14.208,0,0,0,7.943,9.3c-.135.014-.27.036-.407.054Zm-4.11-2.27a4.467,4.467,0,0,0,.86.014,3.354,3.354,0,0,0,1.057-.239,1.977,1.977,0,0,0,.889-.682,2.134,2.134,0,0,0,.349-1.553A1.784,1.784,0,0,0,5.391,9.442a3.378,3.378,0,0,0-1.137-.213,12.83,12.83,0,0,0-2.047.091c-.074.01-.148.025-.22.037V15.7h1.44ZM18.118,9.277c-.142-.02-3.864-.013-3.927.006V15.7c.121.018,1.381.013,1.456-.007v-1.71q0-.215,0-.431c0-.142,0-.285,0-.434H17.19c.128,0,.257,0,.385,0s.254.005.379,0v-1.18h-2.3c-.019-.173-.011-1.4.01-1.475h2.453Z" fill="#fff"/>
9 <path id="Path_1392" data-name="Path 1392" d="M162.156,186.269c.105-.013.207-.031.31-.038a3.028,3.028,0,0,1,1.028.069,1.655,1.655,0,0,1,1.265,1.3,2.968,2.968,0,0,1-.084,1.67,1.749,1.749,0,0,1-1.294,1.168,2.867,2.867,0,0,1-.772.08c-.149,0-.3-.01-.453-.015Z" transform="translate(-153.153 -175.879)" fill="#fff"/>
10 <path id="Path_1393" data-name="Path 1393" d="M61.758,187.832v-1.907c.038-.009.076-.02.114-.025a2.393,2.393,0,0,1,.945.025.994.994,0,0,1,.344.165.813.813,0,0,1,.315.53,1.123,1.123,0,0,1-.005.419.951.951,0,0,1-.716.754,1.939,1.939,0,0,1-.689.067c-.1-.006-.2-.018-.308-.027" transform="translate(-58.329 -175.546)" fill="#fff"/>
11 </g>
12 </svg>
1 (function($){
2
3 /**
4 * initializeBlock
5 *
6 * Adds custom JavaScript to the block HTML.
7 *
8 * @date 15/4/19
9 * @since 1.0.0
10 *
11 * @param object $block The block jQuery element.
12 * @param object attributes The block attributes (only available when editing).
13 * @return void
14 */
15 var initializeBlock = function( $block ) {
16 // $block.find('.carousel-items:not(.large)').slick({
17 // dots: false,
18 // infinite: true,
19 // speed: 300,
20 // slidesToShow: 4,
21 // adaptiveHeight: false,
22 // arrows:true,
23 // variableWidth: true,
24 // responsive: [
25 // {
26 // breakpoint: 1024,
27 // settings: {
28 // slidesToShow: 3,
29 // slidesToScroll: 1,
30 // }
31 // },
32 // {
33 // breakpoint: 600,
34 // settings: {
35 // slidesToShow: 2,
36 // slidesToScroll: 1
37 // }
38 // },
39 // {
40 // breakpoint: 480,
41 // settings: {
42 // slidesToShow: 1,
43 // slidesToScroll: 1
44 // }
45 // }
46 // // You can unslick at a given breakpoint now by adding:
47 // // settings: "unslick"
48 // // instead of a settings object
49 // ]
50 // });
51 // $block.find('.carousel-items.large').slick({
52 // dots: false,
53 // centerMode:true,
54 // infinite: true,
55 // speed: 300,
56 // slidesToShow: 2,
57 // adaptiveHeight: false,
58 // arrows:true,
59 // variableWidth: true,
60 // responsive: [
61 // {
62 // breakpoint: 1024,
63 // settings: {
64 // slidesToShow: 2,
65 // slidesToScroll: 1,
66 // }
67 // },
68 // {
69 // breakpoint: 600,
70 // settings: {
71 // slidesToShow: 2,
72 // slidesToScroll: 1
73 // }
74 // },
75 // {
76 // breakpoint: 480,
77 // settings: {
78 // slidesToShow: 1,
79 // slidesToScroll: 1
80 // }
81 // }
82 // // You can unslick at a given breakpoint now by adding:
83 // // settings: "unslick"
84 // // instead of a settings object
85 // ]
86 // });
87 // $('.slick-list').css('margin-left', $('.entry-content').css('margin-left'));
88
89 $($block).css('margin-left',"-"+$('.entry-content').css('margin-left'));
90
91 }
92
93 // Initialize each block on page load (front end).
94 // $(document).ready(function(){
95 // $('.carousel').each(function(){
96 // initializeBlock( $(this) );
97 // });
98 // });
99
100 // Initialize dynamic block preview (editor).
101 if( window.acf ) {
102 window.acf.addAction( 'render_block_preview/type=quote', initializeBlock );
103 }
104
105
106 })(jQuery);
107
108
109 // (function( $ ) {
110 // // the sameHeight functions makes all the selected elements of the same height
111 // $.fn.sameHeight = function() {
112
113 // var selector = this;
114 // var heights = [];
115
116 // // Save the heights of every element into an array
117 // selector.each(function(){
118 // var height = $(this).height();
119 // heights.push(height);
120 // });
121
122 // // Get the biggest height
123 // var maxHeight = Math.max.apply(null, heights);
124 // // Show in the console to verify
125 // // console.log(heights,maxHeight);
126
127 // // Set the maxHeight to every selected element
128 // selector.each(function(){
129 // $(this).height(maxHeight);
130 // });
131
132 // };
133
134 // }( jQuery ));
...\ No newline at end of file ...\ No newline at end of file
1
2 .carousel:not(.is-admin){
3 background-color: transparent !important;
4 left: -20px;
5 width: 100vw;
6 margin-top: 30px;
7 margin-bottom: 30px;
8 }
9
10
11
12 .carousel-items{
13 list-style: none;
14 margin-block-start: 0em;
15 margin-block-end: 0em;
16 margin-inline-start: 0px;
17 margin-inline-end: 0px;
18 padding-inline-start: 20px;
19 background-color: transparent !important;
20
21 }
22
23 .slick-list{
24
25 margin: auto;
26 margin-right: -20vw;
27
28
29 }
30
31
32
33
34
35 .slick-next{
36 right: 15px;
37 z-index: 9999;
38 top: calc(50% - 17.5px);
39 }
40 .slick-prev {
41 left: 0px;
42 z-index: 9999;
43 top: calc(50% - 17.5px);
44 }
45
46
47 .slick-next:before{
48
49 content: " ";
50 background-image: url(next-arrow.png);
51 background-size: cover;
52 width: 35px !important;
53 height: 35px !important;
54 display: block;
55 background-repeat: no-repeat;
56 opacity: 1;
57 }
58 .slick-prev:before,.slick-prev:before{
59
60 content: " ";
61 background-image: url(previous-arrow.png);
62 background-size: cover;
63 width: 35px !important;
64 height: 35px !important;
65 display: block;
66 background-repeat: no-repeat;
67 opacity: 1;
68 }
69
70 .slick-prev:hover:before{
71 background-image: url(previous-arrow-hover.png);
72 }
73 .slick-next:hover:before{
74 background-image: url(next-arrow-hover.png);
75 }
76
77
78
79 .count-up-infographic-block {
80 clear: both;
81 margin-right: 5px;
82
83 }
84
85 .count-up-infographic-block.vertical {
86 display: flex;
87 align-items: center;
88 justify-content: center;
89 text-align: center;
90 }
91
92 .count-up-infographic-block .infographic{
93 text-align: center;
94 }
95 .count-up-infographic-block .infographic img{
96 margin: auto;
97 margin-top: 10px;
98 width: 50px;
99 }
100 .count-up-infographic-block.vertical .infographic img{
101 width: 100px;
102 }
103
104 .count-up-infographic-block p {
105 font-size: 16px;
106 line-height: 20px;
107 color:#4D4D4D;
108 }
109
110 .count-up-infographic-block .countup{
111 font-size:35px;
112 line-height: 42px;
113 font-weight: bold;
114 }
115 .count-up-infographic-block.vertical .countup{
116 display: block;
117 margin: 10px 0px;
118 }
119
120 .count-up-infographic-block.vertical .column{
121 width: 100% !important;
122 }
123
124
125 .carousel-items li .count-up-infographic-block{
126 background-color: #F0F0F0;
127 width: 342px;
128 height: 342px;
129 }
130
131
132 .testimonials{
133 background-color:#D6EAF9;
134
135 }
136
137 .testimonial-text{
138 padding: 30px 50px;
139 }
140
141 .container.testimonials .row {
142 margin-right: -15px !important;
143 margin-left: -15px !important;
144 }
145 .container.testimonials p{
146 font-size: 16px !important;
147 line-height:21px !important;
148 font-style: italic;
149 }
150
151 .testimonials_image{
152 width: 100%;
153
154 }
155
156
157 .carousel-items li .testimonials{
158 background-color: #F0F0F0;
159 width: 683px;
160
161 }
162 .story{
163 width: 342px;
164 margin-right:30px;
165 background-color: #F0F0F0;
166 display: flex;
167 align-items: baseline;
168 align-content: center;
169 justify-content: left;
170 flex-direction: column;
171 margin-right:20px;
172 }
173
174 .story .row {
175 overflow: hidden;
176 }
177 .story .story-image{
178 min-height: 181px;
179 background-size: cover;
180 background-position: center;
181 transition: transform 0.3s ease-in;
182 -moz-transition: transform 0.3s ease-in;
183 -ms-transition: transform 0.3s ease-in;
184 -o-transition: transform 0.3s ease-in;
185 -webkit-transition: transform 0.3s ease-in;
186 }
187
188 .story h3{
189 font-size: 20px;
190 line-height: 25px;
191 margin-bottom: 20px;
192 }
193
194 .story a:hover .story-image{
195 transform:scale(1.05);
196 filter:brightness(1.075);
197 }
198
199 .story a:hover h3{
200 text-decoration: underline;
201 }
202
203 .story .story-content{
204 padding: 30px 40px 0px 40px;
205 }
206
207 .story .story-content p{
208 font-size: 16px;
209 line-height: 20px;
210 color:#4D4D4D;
211 }
212
213 .story .more-link {
214 background-image: url("more.svg");
215 background-repeat: no-repeat;
216 text-indent: -999px;
217 text-align: left;
218 overflow: hidden;
219 display: block;
220 height: 10px;
221 width: 100%;
222 align-items: flex-end;
223 margin:0px 40px 30px 40px;
224
225 }
226 .story a {
227 text-decoration: none;
228 color: inherit;
229 }
230 .story a:hover{
231 color: inherit;
232 }
233 .story a:hover .more-link {
234 background-image: url("more-hover.svg");
235 }
236 .carousel-items li .download {
237 width:449px;
238 margin-right:20px;
239 }
240 .download a{
241 text-decoration:none;
242 }
243 .download .row {
244 overflow: hidden;
245 }
246 .download .download-image{
247 min-height: 235px;
248 background-size: cover;
249 background-position: center;
250 transition: transform 0.3s ease-in;
251 -moz-transition: transform 0.3s ease-in;
252 -ms-transition: transform 0.3s ease-in;
253 -o-transition: transform 0.3s ease-in;
254 -webkit-transition: transform 0.3s ease-in;
255 }
256 .download .download-bar{
257 background-color:#EE0000;
258 position: relative;
259 }
260 .download a:hover .download-bar{
261 background-color:#669999;
262 }
263 .download a:hover .download-image {
264 transform:scale(1.05);
265 filter:brightness(1.075);
266 }
267
268 .download .download-text{
269 text-align:center;
270 padding:15px;
271 color:#fff;
272 text-transform: uppercase;
273 margin:auto;
274 width: 200px;
275
276 }
277
278 .download .download-text:after{
279 display:inline-block;
280 content: "";
281 background: url("pdf-icon.svg") no-repeat;
282 width: 20px;
283 height: 22px;
284 margin-left:10px;
285 position: absolute;
286
287 }
288
289
290 .staff-diaries {
291 width: 200px;
292 margin-right:20px;
293 }
294 .staff-diaries .staff-image{
295 min-height: 200px;
296 background-size: cover;
297 background-position: center;
298 transition: transform 0.3s ease-in;
299 -moz-transition: transform 0.3s ease-in;
300 -ms-transition: transform 0.3s ease-in;
301 -o-transition: transform 0.3s ease-in;
302 -webkit-transition: transform 0.3s ease-in;
303 }
304
305 .staff-diaries .row {
306 overflow: hidden;
307 }
308
309 .staff-diaries a:hover .staff-image {
310 transform:scale(1.05);
311 filter:brightness(1.075);
312 }
313
314 .staff-diaries .staff-content{
315 margin-top:10px;
316 font-size: 16px;
317 line-height: 20px;
318 color:#4D4D4D;
319 }
320 .staff-diaries .staff-content strong{
321 color:#000;
322 }
323
324
325 .book-club {
326 width: 200px;
327 margin-right:20px;
328 }
329 .book-club a{
330 text-decoration: none;
331 color: inherit;
332 }
333 .book-club .book-image{
334 min-height: 200px;
335 background-size: cover;
336 background-position: center;
337 position: relative;
338 transition: transform 0.3s ease-in;
339 -moz-transition: transform 0.3s ease-in;
340 -ms-transition: transform 0.3s ease-in;
341 -o-transition: transform 0.3s ease-in;
342 -webkit-transition: transform 0.3s ease-in;
343 }
344 .book-club .book-content p:first-of-type {
345 position: relative;
346 }
347 .book-club .book-content p:first-of-type::before{
348 display: inline-block;
349 content: "";
350 background: url("new-window.svg") no-repeat;
351 width: 21px;
352 height: 22px;
353 margin-left: 10px;
354 position: absolute;
355 top: 0;
356 right: 1px;
357 }
358
359 .book-club .row {
360 overflow: hidden;
361 }
362
363 .book-club a:hover .book-image {
364 transform:scale(1.05);
365 filter:brightness(1.075);
366 }
367
368 .book-club a:hover .book-content p:first-of-type::before{
369 background: url("new-window-hover.svg") no-repeat;
370
371 }
372 .book-club .book-content{
373 margin-top:10px;
374 font-size: 16px;
375 line-height: 20px;
376 color:#4D4D4D;
377 }
378
379
380 .book-club .book-content strong{
381 color:#000;
382 }
383 .book-club a:hover .book-content strong{
384 text-decoration: underline;
385 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -14876,6 +14876,7 @@ h1 + p, .h1 + p { ...@@ -14876,6 +14876,7 @@ h1 + p, .h1 + p {
14876 .entry-content .is-layout-constrained.wp-block-group { 14876 .entry-content .is-layout-constrained.wp-block-group {
14877 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137); 14877 box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
14878 padding: 40px 32px; 14878 padding: 40px 32px;
14879 margin-bottom: 40px;
14879 } 14880 }
14880 14881
14881 .js-accordion-item { 14882 .js-accordion-item {
......
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.
...@@ -8,43 +8,104 @@ function contest_slider(){ ...@@ -8,43 +8,104 @@ function contest_slider(){
8 8
9 $custom_args = array( 9 $custom_args = array(
10 'post_type' => 'nf_sub', 10 'post_type' => 'nf_sub',
11 'posts_per_page' => 3, 11 'posts_per_page' => -1,
12 'paged' => 1, 12 'paged' => 1,
13 'post_status' => 'any', 13 'post_status' => 'any',
14 'order' => 'DESC', 14 'order' => 'DESC',
15 'orderby' => 'rand', 15 'orderby' => 'rand',
16 // 'meta_query' => array( 16 'meta_query' => array(
17 // 'relation' => 'AND', 17 'relation' => 'AND',
18 // array( 18 array(
19 // 'key' => '_form_id', 19 'key' => '_form_id',
20 // 'value' => '2', 20 'value' => '2',
21 // 'compare' => '=', 21 'compare' => '=',
22 // ), 22 ),
23 // ), 23 ),
24 ); 24 );
25 $custom_query = new \WP_Query($custom_args); 25 $custom_query = new \WP_Query($custom_args);
26 26
27 ob_start(); 27 ob_start();
28 $uniqid = uniqid(); 28 $uniqid = uniqid();
29 if ($custom_query->have_posts()): ?> 29 if ($custom_query->have_posts()): ?>
30 <div id="<?php echo esc_attr($uniqid); ?>" class="<?php echo esc_attr($className); ?> "> 30 <div class="swiper-container">
31 <div class="content-item carousel-items <?php echo $size; ?>"> 31 <div class='swiper-wrapper'>
32 <div class='swiper-wrapper'> 32 <?php while ($custom_query->have_posts()): $custom_query->the_post(); ?>
33 <?php while ($custom_query->have_posts()): $custom_query->the_post(); ?> 33 <div class="swiper-slide">
34 <div class="swiper-slide"> 34 <?php $image = get_post_meta(get_the_ID(), '_field_9', true );
35 <?php $image = get_post_meta(get_the_ID(), '_field_11', true ); 35 $num = get_post_meta(get_the_ID(), '_seq_num', true );
36 $num = get_post_meta(get_the_ID(), '_seq_num', true ); 36 $cap = get_post_meta(get_the_ID(), '_field_7', true );
37 $cap = get_post_meta(get_the_ID(), '_field_8', true ); 37 ?>
38 ?> 38 <img src="<?php echo $image[$num];?>" alt="<?php echo $cap;?>">
39 <img src="<?php echo $image[$num];?>" alt="<?php echo $cap;?>"> 39 <div class="contest_cap"><?php echo $cap;?></div>
40 <div class="contest_cap"><?php echo $cap;?></div> 40 </div>
41 </div> 41 <?php endwhile; ?>
42 <?php endwhile; ?> 42 </div>
43 </div> 43 <div class="swiper-button-prev"></div>
44 </div> 44 <div class="swiper-button-next"></div>
45 <div class="swiper-button-prev" data-id="<?= $uniqid ?>"></div> 45 </div>
46 <div class="swiper-button-next" data-id="<?= $uniqid ?>"></div> 46 <style>
47 </div> 47 .swiper-container{
48 width: 100%;
49 position: relative;
50 overflow: hidden;
51 height: 250px;
52 margin-right: 0px;
53 padding-right: 0px;
54 }
55 .swiper-wrapper {
56 width: 100%;
57 }
58 .swiper-slide {
59 text-align: left;
60 width: auto;
61 }
62 .swiper-slide img{
63 height: 185px;
64 width: auto;
65 }
66 .swiper-button-next, .swiper-rtl .swiper-button-prev{
67 z-index: 9999;
68 }
69 .swiper-button-prev, .swiper-rtl .swiper-button-next {
70 left: unset;
71 right: 32px;
72 bottom: 0px;
73 top: unset;
74 width: 32px;
75 height: 32px;
76 font-size: 26px;
77 background-color:#1A3668;
78 margin-right:6px;
79 }
80 .swiper-button-next, .swiper-rtl .swiper-button-prev{
81 left: unset;
82 right: 0px;
83 bottom: 0px;
84 top: unset;
85 width: 32px;
86 height: 32px;
87 background-color:#1A3668;
88
89 }
90 .swiper-button-prev:hover,
91 .swiper-button-next:hover{
92 background-color:#132C55;
93 }
94 .swiper-button-prev:after,
95 .swiper-button-next:after{
96 font-size: 20px;
97 color:#fff;
98 }
99 .contest_cap{
100
101 color:#000;
102 font-size:20px;
103 margin-top:-40px;
104 margin-left:20px;
105
106 }
107
108 </style>
48 <?php endif; 109 <?php endif;
49 110
50 wp_reset_query(); 111 wp_reset_query();
......
...@@ -24967,39 +24967,31 @@ ...@@ -24967,39 +24967,31 @@
24967 styleInject(css_248z); 24967 styleInject(css_248z);
24968 24968
24969 jQuery(document).ready(function ($) { 24969 jQuery(document).ready(function ($) {
24970 $('.carousel-items').each(function () { 24970 new Swiper('.swiper-container', {
24971 var offset = 0, 24971 modules: [Navigation, Pagination, A11y, Keyboard],
24972 PerView = 3, 24972 direction: 'horizontal',
24973 space = 30, 24973 loop: true,
24974 SlidesPerGroup = 1, 24974 loopedSlides: 8,
24975 offsetAfter = 0, 24975 slidesPerView: 'auto',
24976 _id = $(this).attr('id'); 24976 spaceBetween: 4,
24977 var swiper_params = { 24977 pagination: {
24978 modules: [Navigation, Pagination, A11y, Keyboard], 24978 el: '.swiper-pagination',
24979 slidesPerView: PerView, 24979 clickable: true
24980 slidesOffsetAfter: offsetAfter, 24980 },
24981 slidesOffsetBefore: offset, 24981 navigation: {
24982 spaceBetween: space, 24982 nextEl: '.swiper-button-next',
24983 slidesPerGroup: SlidesPerGroup, 24983 prevEl: '.swiper-button-prev'
24984 pagination: { 24984 },
24985 el: ".swiper-pagination", 24985 a11y: {
24986 type: 'bullets', 24986 prevSlideMessage: 'Previous slide',
24987 clickable: "true" 24987 nextSlideMessage: 'Next slide'
24988 }, 24988 },
24989 navigation: { 24989 keyboard: {
24990 nextEl: '.swiper-button-next[data-id="' + _id + '"]', 24990 enabled: true,
24991 prevEl: '.swiper-button-prev[data-id="' + _id + '"]' 24991 onlyInViewport: false
24992 }, 24992 },
24993 a11y: { 24993 allowSlidePrev: true,
24994 prevSlideMessage: 'Previous slide', 24994 allowSlideNext: true
24995 nextSlideMessage: 'Next slide'
24996 },
24997 keyboard: {
24998 enabled: true,
24999 onlyInViewport: false
25000 }
25001 };
25002 new Swiper(this, swiper_params);
25003 }); 24995 });
25004 text_change(); 24996 text_change();
25005 function text_change() { 24997 function text_change() {
......
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.
...@@ -13,34 +13,24 @@ import Swiper, { ...@@ -13,34 +13,24 @@ import Swiper, {
13 13
14 jQuery(document).ready(function($) { 14 jQuery(document).ready(function($) {
15 15
16 $('.carousel-items').each(function() { 16
17
18 var offset = 0,
19 PerView = 3,
20 space = 30,
21 SlidesPerGroup = 1,
22 offsetAfter = 0,
23 _id = $(this).attr('id');
24
25 17
26 var swiper_params = { 18 var mySwiper = new Swiper ('.swiper-container', {
27 modules: [Navigation, Pagination, A11y, Keyboard], 19 modules: [Navigation, Pagination, A11y, Keyboard],
28 slidesPerView: PerView, 20 direction: 'horizontal',
29 slidesOffsetAfter: offsetAfter, 21 loop: true,
30 slidesOffsetBefore: offset, 22 loopedSlides: 8,
31 spaceBetween: space, 23 slidesPerView: 'auto',
32 slidesPerGroup: SlidesPerGroup , 24 spaceBetween: 4,
25
33 pagination: { 26 pagination: {
34 el: ".swiper-pagination", 27 el: '.swiper-pagination',
35 type: 'bullets', 28 clickable: true,
36 clickable: "true",
37 }, 29 },
38
39 navigation: { 30 navigation: {
40 nextEl: '.swiper-button-next[data-id="' + _id + '"]', 31 nextEl: '.swiper-button-next',
41 prevEl: '.swiper-button-prev[data-id="' + _id + '"]', 32 prevEl: '.swiper-button-prev',
42 }, 33 },
43
44 a11y: { 34 a11y: {
45 prevSlideMessage: 'Previous slide', 35 prevSlideMessage: 'Previous slide',
46 nextSlideMessage: 'Next slide', 36 nextSlideMessage: 'Next slide',
...@@ -49,12 +39,12 @@ jQuery(document).ready(function($) { ...@@ -49,12 +39,12 @@ jQuery(document).ready(function($) {
49 enabled: true, 39 enabled: true,
50 onlyInViewport: false, 40 onlyInViewport: false,
51 }, 41 },
52 42 allowSlidePrev: true,
53 }; 43 allowSlideNext: true,
44 })
45
54 46
55 47
56 new Swiper(this, swiper_params);
57 });
58 48
59 text_change(); 49 text_change();
60 function text_change(){ 50 function text_change(){
......
1 jQuery(document).ready(function($) {
2
3
4 text_change();
5 function text_change(){
6 var words = [ 'Dance', 'Smile','Party','Sing',''];
7 $.each(words, function( index, value ) {
8 setTimeout( function(){
9 $(".like-you strong").text(value);
10 if( (words.length - 1) == index){
11 // text_change();
12 }
13 }, index * 1000 );
14
15 });
16 }
17
18 });
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 .is-layout-constrained.wp-block-group{ 2 .is-layout-constrained.wp-block-group{
3 box-shadow: 0px 3px 6px #00000029; 3 box-shadow: 0px 3px 6px #00000029;
4 padding: 40px 32px; 4 padding: 40px 32px;
5 margin-bottom: 40px;
5 } 6 }
6 } 7 }
7 8
......
...@@ -172,3 +172,4 @@ p{ ...@@ -172,3 +172,4 @@ p{
172 } 172 }
173 } 173 }
174 174
175
......