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
<?php
/**
* Carousel Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
// Create id attribute allowing for custom "anchor" value.
$id = 'carousel-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'carousel';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
if( $is_preview ) {
$className .= ' is-admin';
}
$carousel_style = get_field('carousel_style');
?>
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
<?php switch($carousel_style){
case 'count-up-infographic':
?>
<?php if( have_rows('count_up_infographic_items') ): ?>
<div class="count-info carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
<?php while( the_repeater_field('count_up_infographic_items') ):
?>
<div class="swiper-slide">
<?php
ob_start();
include __DIR__."./../card/styles/count-up-infographic.php";
echo ob_get_clean();
?>
</div>
<?php endwhile; ?>
</div></div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
case 'testimonials': ?>
<?php if( have_rows('testimonials_items') ): ?>
<div class="testimonials-carousel carousel-items "><div class='swiper-wrapper'>
<?php while( the_repeater_field('testimonials_items') ):
?>
<div class="swiper-slide">
<?php
ob_start();
include __DIR__."./../card/styles/testimonials.php";
echo ob_get_clean();
?>
</div>
<?php endwhile; ?>
</div></div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
case 'story': ?>
<?php if( have_rows('story_items') ): ?>
<div class="stories carousel-items "><div class='swiper-wrapper'>
<?php while( the_repeater_field('story_items') ):
?>
<div class="swiper-slide">
<?php
ob_start();
include __DIR__."./../card/styles/story.php";
echo ob_get_clean();
?>
</div>
<?php endwhile; ?>
</div></div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
case 'download': ?>
<?php if( have_rows('download_items') ): ?>
<div class="download carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
<?php while( the_repeater_field('download_items') ):
?>
<div class="swiper-slide">
<?php
ob_start();
include __DIR__."./../card/styles/download.php";
echo ob_get_clean();
?>
</div>
<?php endwhile; ?>
</div></div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
case 'staff-diaries': ?>
<?php if( have_rows('staff_diaries_items') ): ?>
<div class="staff carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
<?php while( the_repeater_field('staff_diaries_items') ):
?>
<div class="swiper-slide">
<?php
ob_start();
include __DIR__."./../card/styles/staff-diaries.php";
echo ob_get_clean();
?>
</div>
<?php endwhile; ?>
</div> </div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
case 'book-club': ?>
<?php if( have_rows('book_club_items') ): ?>
<div class="books carousel-items"><div class='swiper-wrapper'>
<?php while( the_repeater_field('book_club_items') ):
?>
<div class="swiper-slide">
<?php
ob_start();
include __DIR__."./../card/styles/book-club.php";
echo ob_get_clean();
?>
</div>
<?php endwhile; ?>
</div> </div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
default: ?>
<p>Please select style.</p>
<?php }; ?>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="7" viewBox="0 0 29 7">
<g id="Group_985" data-name="Group 985" transform="translate(-672 105)">
<circle id="Ellipse_16" data-name="Ellipse 16" cx="3.5" cy="3.5" r="3.5" transform="translate(672 -105)" fill="#699"/>
<circle id="Ellipse_24" data-name="Ellipse 24" cx="3.5" cy="3.5" r="3.5" transform="translate(683 -105)" fill="#699"/>
<circle id="Ellipse_25" data-name="Ellipse 25" cx="3.5" cy="3.5" r="3.5" transform="translate(694 -105)" fill="#699"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="29" height="7" viewBox="0 0 29 7">
<g id="Group_985" data-name="Group 985" transform="translate(-672 105)">
<circle id="Ellipse_16" data-name="Ellipse 16" cx="3.5" cy="3.5" r="3.5" transform="translate(672 -105)" fill="#e00"/>
<circle id="Ellipse_24" data-name="Ellipse 24" cx="3.5" cy="3.5" r="3.5" transform="translate(683 -105)" fill="#e00"/>
<circle id="Ellipse_25" data-name="Ellipse 25" cx="3.5" cy="3.5" r="3.5" transform="translate(694 -105)" fill="#e00"/>
</g>
</svg>
<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">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_151" data-name="Rectangle 151" width="20.935" height="20.915" fill="#699"/>
</clipPath>
</defs>
<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"/>
<g id="Group_1023" data-name="Group 1023" transform="translate(0 0)">
<g id="Group_1022" data-name="Group 1022" clip-path="url(#clip-path)">
<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"/>
</g>
</g>
</svg>
<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">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_151" data-name="Rectangle 151" width="20.935" height="20.915" fill="none"/>
</clipPath>
</defs>
<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"/>
<g id="Group_1023" data-name="Group 1023" transform="translate(0 0)">
<g id="Group_1022" data-name="Group 1022" clip-path="url(#clip-path)">
<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"/>
</g>
</g>
</svg>
<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">
<defs>
<clipPath id="clip-path">
<rect id="Rectangle_217" data-name="Rectangle 217" width="19.488" height="22" fill="#fff"/>
</clipPath>
</defs>
<g id="Group_1435" data-name="Group 1435" clip-path="url(#clip-path)">
<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"/>
<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"/>
<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"/>
</g>
</svg>
(function($){
/**
* initializeBlock
*
* Adds custom JavaScript to the block HTML.
*
* @date 15/4/19
* @since 1.0.0
*
* @param object $block The block jQuery element.
* @param object attributes The block attributes (only available when editing).
* @return void
*/
var initializeBlock = function( $block ) {
// $block.find('.carousel-items:not(.large)').slick({
// dots: false,
// infinite: true,
// speed: 300,
// slidesToShow: 4,
// adaptiveHeight: false,
// arrows:true,
// variableWidth: true,
// responsive: [
// {
// breakpoint: 1024,
// settings: {
// slidesToShow: 3,
// slidesToScroll: 1,
// }
// },
// {
// breakpoint: 600,
// settings: {
// slidesToShow: 2,
// slidesToScroll: 1
// }
// },
// {
// breakpoint: 480,
// settings: {
// slidesToShow: 1,
// slidesToScroll: 1
// }
// }
// // You can unslick at a given breakpoint now by adding:
// // settings: "unslick"
// // instead of a settings object
// ]
// });
// $block.find('.carousel-items.large').slick({
// dots: false,
// centerMode:true,
// infinite: true,
// speed: 300,
// slidesToShow: 2,
// adaptiveHeight: false,
// arrows:true,
// variableWidth: true,
// responsive: [
// {
// breakpoint: 1024,
// settings: {
// slidesToShow: 2,
// slidesToScroll: 1,
// }
// },
// {
// breakpoint: 600,
// settings: {
// slidesToShow: 2,
// slidesToScroll: 1
// }
// },
// {
// breakpoint: 480,
// settings: {
// slidesToShow: 1,
// slidesToScroll: 1
// }
// }
// // You can unslick at a given breakpoint now by adding:
// // settings: "unslick"
// // instead of a settings object
// ]
// });
// $('.slick-list').css('margin-left', $('.entry-content').css('margin-left'));
$($block).css('margin-left',"-"+$('.entry-content').css('margin-left'));
}
// Initialize each block on page load (front end).
// $(document).ready(function(){
// $('.carousel').each(function(){
// initializeBlock( $(this) );
// });
// });
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=quote', initializeBlock );
}
})(jQuery);
// (function( $ ) {
// // the sameHeight functions makes all the selected elements of the same height
// $.fn.sameHeight = function() {
// var selector = this;
// var heights = [];
// // Save the heights of every element into an array
// selector.each(function(){
// var height = $(this).height();
// heights.push(height);
// });
// // Get the biggest height
// var maxHeight = Math.max.apply(null, heights);
// // Show in the console to verify
// // console.log(heights,maxHeight);
// // Set the maxHeight to every selected element
// selector.each(function(){
// $(this).height(maxHeight);
// });
// };
// }( jQuery ));
\ No newline at end of file
.carousel:not(.is-admin){
background-color: transparent !important;
left: -20px;
width: 100vw;
margin-top: 30px;
margin-bottom: 30px;
}
.carousel-items{
list-style: none;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 20px;
background-color: transparent !important;
}
.slick-list{
margin: auto;
margin-right: -20vw;
}
.slick-next{
right: 15px;
z-index: 9999;
top: calc(50% - 17.5px);
}
.slick-prev {
left: 0px;
z-index: 9999;
top: calc(50% - 17.5px);
}
.slick-next:before{
content: " ";
background-image: url(next-arrow.png);
background-size: cover;
width: 35px !important;
height: 35px !important;
display: block;
background-repeat: no-repeat;
opacity: 1;
}
.slick-prev:before,.slick-prev:before{
content: " ";
background-image: url(previous-arrow.png);
background-size: cover;
width: 35px !important;
height: 35px !important;
display: block;
background-repeat: no-repeat;
opacity: 1;
}
.slick-prev:hover:before{
background-image: url(previous-arrow-hover.png);
}
.slick-next:hover:before{
background-image: url(next-arrow-hover.png);
}
.count-up-infographic-block {
clear: both;
margin-right: 5px;
}
.count-up-infographic-block.vertical {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.count-up-infographic-block .infographic{
text-align: center;
}
.count-up-infographic-block .infographic img{
margin: auto;
margin-top: 10px;
width: 50px;
}
.count-up-infographic-block.vertical .infographic img{
width: 100px;
}
.count-up-infographic-block p {
font-size: 16px;
line-height: 20px;
color:#4D4D4D;
}
.count-up-infographic-block .countup{
font-size:35px;
line-height: 42px;
font-weight: bold;
}
.count-up-infographic-block.vertical .countup{
display: block;
margin: 10px 0px;
}
.count-up-infographic-block.vertical .column{
width: 100% !important;
}
.carousel-items li .count-up-infographic-block{
background-color: #F0F0F0;
width: 342px;
height: 342px;
}
.testimonials{
background-color:#D6EAF9;
}
.testimonial-text{
padding: 30px 50px;
}
.container.testimonials .row {
margin-right: -15px !important;
margin-left: -15px !important;
}
.container.testimonials p{
font-size: 16px !important;
line-height:21px !important;
font-style: italic;
}
.testimonials_image{
width: 100%;
}
.carousel-items li .testimonials{
background-color: #F0F0F0;
width: 683px;
}
.story{
width: 342px;
margin-right:30px;
background-color: #F0F0F0;
display: flex;
align-items: baseline;
align-content: center;
justify-content: left;
flex-direction: column;
margin-right:20px;
}
.story .row {
overflow: hidden;
}
.story .story-image{
min-height: 181px;
background-size: cover;
background-position: center;
transition: transform 0.3s ease-in;
-moz-transition: transform 0.3s ease-in;
-ms-transition: transform 0.3s ease-in;
-o-transition: transform 0.3s ease-in;
-webkit-transition: transform 0.3s ease-in;
}
.story h3{
font-size: 20px;
line-height: 25px;
margin-bottom: 20px;
}
.story a:hover .story-image{
transform:scale(1.05);
filter:brightness(1.075);
}
.story a:hover h3{
text-decoration: underline;
}
.story .story-content{
padding: 30px 40px 0px 40px;
}
.story .story-content p{
font-size: 16px;
line-height: 20px;
color:#4D4D4D;
}
.story .more-link {
background-image: url("more.svg");
background-repeat: no-repeat;
text-indent: -999px;
text-align: left;
overflow: hidden;
display: block;
height: 10px;
width: 100%;
align-items: flex-end;
margin:0px 40px 30px 40px;
}
.story a {
text-decoration: none;
color: inherit;
}
.story a:hover{
color: inherit;
}
.story a:hover .more-link {
background-image: url("more-hover.svg");
}
.carousel-items li .download {
width:449px;
margin-right:20px;
}
.download a{
text-decoration:none;
}
.download .row {
overflow: hidden;
}
.download .download-image{
min-height: 235px;
background-size: cover;
background-position: center;
transition: transform 0.3s ease-in;
-moz-transition: transform 0.3s ease-in;
-ms-transition: transform 0.3s ease-in;
-o-transition: transform 0.3s ease-in;
-webkit-transition: transform 0.3s ease-in;
}
.download .download-bar{
background-color:#EE0000;
position: relative;
}
.download a:hover .download-bar{
background-color:#669999;
}
.download a:hover .download-image {
transform:scale(1.05);
filter:brightness(1.075);
}
.download .download-text{
text-align:center;
padding:15px;
color:#fff;
text-transform: uppercase;
margin:auto;
width: 200px;
}
.download .download-text:after{
display:inline-block;
content: "";
background: url("pdf-icon.svg") no-repeat;
width: 20px;
height: 22px;
margin-left:10px;
position: absolute;
}
.staff-diaries {
width: 200px;
margin-right:20px;
}
.staff-diaries .staff-image{
min-height: 200px;
background-size: cover;
background-position: center;
transition: transform 0.3s ease-in;
-moz-transition: transform 0.3s ease-in;
-ms-transition: transform 0.3s ease-in;
-o-transition: transform 0.3s ease-in;
-webkit-transition: transform 0.3s ease-in;
}
.staff-diaries .row {
overflow: hidden;
}
.staff-diaries a:hover .staff-image {
transform:scale(1.05);
filter:brightness(1.075);
}
.staff-diaries .staff-content{
margin-top:10px;
font-size: 16px;
line-height: 20px;
color:#4D4D4D;
}
.staff-diaries .staff-content strong{
color:#000;
}
.book-club {
width: 200px;
margin-right:20px;
}
.book-club a{
text-decoration: none;
color: inherit;
}
.book-club .book-image{
min-height: 200px;
background-size: cover;
background-position: center;
position: relative;
transition: transform 0.3s ease-in;
-moz-transition: transform 0.3s ease-in;
-ms-transition: transform 0.3s ease-in;
-o-transition: transform 0.3s ease-in;
-webkit-transition: transform 0.3s ease-in;
}
.book-club .book-content p:first-of-type {
position: relative;
}
.book-club .book-content p:first-of-type::before{
display: inline-block;
content: "";
background: url("new-window.svg") no-repeat;
width: 21px;
height: 22px;
margin-left: 10px;
position: absolute;
top: 0;
right: 1px;
}
.book-club .row {
overflow: hidden;
}
.book-club a:hover .book-image {
transform:scale(1.05);
filter:brightness(1.075);
}
.book-club a:hover .book-content p:first-of-type::before{
background: url("new-window-hover.svg") no-repeat;
}
.book-club .book-content{
margin-top:10px;
font-size: 16px;
line-height: 20px;
color:#4D4D4D;
}
.book-club .book-content strong{
color:#000;
}
.book-club a:hover .book-content strong{
text-decoration: underline;
}
\ No newline at end of file
......@@ -14876,6 +14876,7 @@ h1 + p, .h1 + p {
.entry-content .is-layout-constrained.wp-block-group {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
padding: 40px 32px;
margin-bottom: 40px;
}
.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(){
$custom_args = array(
'post_type' => 'nf_sub',
'posts_per_page' => 3,
'posts_per_page' => -1,
'paged' => 1,
'post_status' => 'any',
'order' => 'DESC',
'orderby' => 'rand',
// 'meta_query' => array(
// 'relation' => 'AND',
// array(
// 'key' => '_form_id',
// 'value' => '2',
// 'compare' => '=',
// ),
// ),
'meta_query' => array(
'relation' => 'AND',
array(
'key' => '_form_id',
'value' => '2',
'compare' => '=',
),
),
);
$custom_query = new \WP_Query($custom_args);
ob_start();
$uniqid = uniqid();
if ($custom_query->have_posts()): ?>
<div id="<?php echo esc_attr($uniqid); ?>" class="<?php echo esc_attr($className); ?> ">
<div class="content-item carousel-items <?php echo $size; ?>">
<div class='swiper-wrapper'>
<?php while ($custom_query->have_posts()): $custom_query->the_post(); ?>
<div class="swiper-slide">
<?php $image = get_post_meta(get_the_ID(), '_field_11', true );
$num = get_post_meta(get_the_ID(), '_seq_num', true );
$cap = get_post_meta(get_the_ID(), '_field_8', true );
?>
<img src="<?php echo $image[$num];?>" alt="<?php echo $cap;?>">
<div class="contest_cap"><?php echo $cap;?></div>
</div>
<?php endwhile; ?>
</div>
</div>
<div class="swiper-button-prev" data-id="<?= $uniqid ?>"></div>
<div class="swiper-button-next" data-id="<?= $uniqid ?>"></div>
</div>
<div class="swiper-container">
<div class='swiper-wrapper'>
<?php while ($custom_query->have_posts()): $custom_query->the_post(); ?>
<div class="swiper-slide">
<?php $image = get_post_meta(get_the_ID(), '_field_9', true );
$num = get_post_meta(get_the_ID(), '_seq_num', true );
$cap = get_post_meta(get_the_ID(), '_field_7', true );
?>
<img src="<?php echo $image[$num];?>" alt="<?php echo $cap;?>">
<div class="contest_cap"><?php echo $cap;?></div>
</div>
<?php endwhile; ?>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<style>
.swiper-container{
width: 100%;
position: relative;
overflow: hidden;
height: 250px;
margin-right: 0px;
padding-right: 0px;
}
.swiper-wrapper {
width: 100%;
}
.swiper-slide {
text-align: left;
width: auto;
}
.swiper-slide img{
height: 185px;
width: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev{
z-index: 9999;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: unset;
right: 32px;
bottom: 0px;
top: unset;
width: 32px;
height: 32px;
font-size: 26px;
background-color:#1A3668;
margin-right:6px;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev{
left: unset;
right: 0px;
bottom: 0px;
top: unset;
width: 32px;
height: 32px;
background-color:#1A3668;
}
.swiper-button-prev:hover,
.swiper-button-next:hover{
background-color:#132C55;
}
.swiper-button-prev:after,
.swiper-button-next:after{
font-size: 20px;
color:#fff;
}
.contest_cap{
color:#000;
font-size:20px;
margin-top:-40px;
margin-left:20px;
}
</style>
<?php endif;
wp_reset_query();
......
......@@ -24967,39 +24967,31 @@
styleInject(css_248z);
jQuery(document).ready(function ($) {
$('.carousel-items').each(function () {
var offset = 0,
PerView = 3,
space = 30,
SlidesPerGroup = 1,
offsetAfter = 0,
_id = $(this).attr('id');
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
slidesOffsetAfter: offsetAfter,
slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup,
pagination: {
el: ".swiper-pagination",
type: 'bullets',
clickable: "true"
},
navigation: {
nextEl: '.swiper-button-next[data-id="' + _id + '"]',
prevEl: '.swiper-button-prev[data-id="' + _id + '"]'
},
a11y: {
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide'
},
keyboard: {
enabled: true,
onlyInViewport: false
}
};
new Swiper(this, swiper_params);
new Swiper('.swiper-container', {
modules: [Navigation, Pagination, A11y, Keyboard],
direction: 'horizontal',
loop: true,
loopedSlides: 8,
slidesPerView: 'auto',
spaceBetween: 4,
pagination: {
el: '.swiper-pagination',
clickable: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
a11y: {
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide'
},
keyboard: {
enabled: true,
onlyInViewport: false
},
allowSlidePrev: true,
allowSlideNext: true
});
text_change();
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, {
jQuery(document).ready(function($) {
$('.carousel-items').each(function() {
var offset = 0,
PerView = 3,
space = 30,
SlidesPerGroup = 1,
offsetAfter = 0,
_id = $(this).attr('id');
var swiper_params = {
var mySwiper = new Swiper ('.swiper-container', {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
slidesOffsetAfter: offsetAfter,
slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup ,
direction: 'horizontal',
loop: true,
loopedSlides: 8,
slidesPerView: 'auto',
spaceBetween: 4,
pagination: {
el: ".swiper-pagination",
type: 'bullets',
clickable: "true",
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next[data-id="' + _id + '"]',
prevEl: '.swiper-button-prev[data-id="' + _id + '"]',
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
a11y: {
prevSlideMessage: 'Previous slide',
nextSlideMessage: 'Next slide',
......@@ -49,12 +39,12 @@ jQuery(document).ready(function($) {
enabled: true,
onlyInViewport: false,
},
};
allowSlidePrev: true,
allowSlideNext: true,
})
new Swiper(this, swiper_params);
});
text_change();
function text_change(){
......
jQuery(document).ready(function($) {
text_change();
function text_change(){
var words = [ 'Dance', 'Smile','Party','Sing',''];
$.each(words, function( index, value ) {
setTimeout( function(){
$(".like-you strong").text(value);
if( (words.length - 1) == index){
// text_change();
}
}, index * 1000 );
});
}
});
\ No newline at end of file
......@@ -2,6 +2,7 @@
.is-layout-constrained.wp-block-group{
box-shadow: 0px 3px 6px #00000029;
padding: 40px 32px;
margin-bottom: 40px;
}
}
......