Skip to content

Jeff Balicki / imagination_library

Go to a project
Toggle navigation
Toggle navigation pinning
90d3fc9a by Jeff Balicki
Options

slider 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent a36070e1
Inline Side-by-side
Showing 22 changed files with 572 additions and 3 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
$args = array(
'post_type' => 'testimonial', // Replace 'testimonial' with your custom post type
'posts_per_page' => -1
);
$testimonial_query = new WP_Query($args);
if ($testimonial_query->have_posts()): ?>
<div class="testimonials-carousel carousel-items <?php echo $size; ?>"><div class='swiper-wrapper'>
<?php while ($testimonial_query->have_posts()): $testimonial_query->the_post(); ?>
<div class="swiper-slide">
<div class="testimonials">
<div class="row">
<div class="col-md-12">
<div class="testimonial-text">
<div class="testimonial-copy">
<?php the_content(); ?>
<div class="testimonial-author"><?php the_title(); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev" data-id="<?php echo esc_attr($id); ?>"></div>
<div class="swiper-button-next" data-id="<?php echo esc_attr($id); ?>"></div>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
</div>
\ No newline at end of file
......@@ -15249,6 +15249,41 @@ ol li ol {
}
}
.color-box {
border-radius: 30px;
padding: 37px 25px;
}
.color-box .wp-block-separator {
border-top-color: #fff;
}
.color-box h3, .color-box .h3 {
color: #231F20;
font-size: 3.56rem;
line-height: 4.56rem;
font-family: "Chalkduster", sans-serif;
}
.color-box p {
color: #231F20;
font-size: 1.13rem;
line-height: 1.5rem;
}
.gray-box {
background-color: #DAD9D7;
}
.green-box {
background-color: #A3D55F;
}
.blue-box {
background-color: #3EB5E6;
}
.orange-box {
background-color: #FF9119;
}
.join-callout {
background-color: #a3d55f;
margin: 0px -25% 0px -25%;
......@@ -15324,6 +15359,19 @@ ol li ol {
}
}
.join-callout.blue {
background-color: #3DB5E6;
}
.join-callout.blue::before {
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1369.39 118.32"><defs><style> .cls-1 { fill: %233DB5E6; stroke-width: 0px; } </style></defs><path id="Subtraction_3" data-name="Subtraction 3" class="cls-1" d="M1369.39,118.28L0,118.32C0,57.99,0,60.48,0,59.76l1.78-1.57c9.81-7.27,20.38-13.46,31.52-18.46,12.26-5.54,24.88-10.24,37.78-14.05,23.89-7.2,51.85-13.01,83.11-17.27C193.3,3.23,232.69.53,272.13.35c1.34,0,2.55,0,3.61.02h.06c9.46-.24,19.03-.36,28.43-.36,14.1,0,28.39.28,42.48.82,13.43.52,27.11,1.3,40.67,2.32,25.04,1.88,50.2,4.59,76.92,8.27,50.22,6.92,97.44,16.16,143.1,25.1h0l1.67.33h0c45.52,8.91,92.59,18.12,141.28,24.89,26.2,3.65,50.81,6.32,75.22,8.18,27.39,2.09,53.84,3.1,80.87,3.1,21.49,0,43.44-.67,65.24-2,82.01-5,158.29-7.53,226.7-7.53,26.88,0,52.6.4,76.43,1.18,19.07.62,36.99,1.5,53.25,2.59,27.46,1.85,40.14,3.6,40.69,3.68l.61,47.35Z"/></svg>');
}
.page-template-no-title .join-callout::before {
width: 120vw;
margin: 180px 0 0% 0%;
}
.nav-container {
position: sticky;
top: 0;
......@@ -15579,6 +15627,140 @@ ol li ol {
vertical-align: baseline;
}
.swiper-pagination-bullet {
background: #fff !important;
border: 2px solid #2c2c2c !important;
height: 13px !important;
width: 13px !important;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background: #3f9c35 !important;
border: 2px solid #3f9c35 !important;
}
.carousel:not(.is-admin) {
background-color: transparent !important;
width: 100vw;
}
.carousel-items {
list-style: none;
-webkit-margin-before: 0em;
margin-block-start: 0em;
-webkit-margin-after: 0em;
margin-block-end: 0em;
-webkit-margin-start: 0px;
margin-inline-start: 0px;
-webkit-margin-end: 0px;
margin-inline-end: 0px;
-webkit-padding-start: 20px;
padding-inline-start: 20px;
background-color: transparent !important;
}
@media only screen and (max-width: 768px) {
.carousel-items {
-webkit-padding-start: 0px;
padding-inline-start: 0px;
}
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
pointer-events: all !important;
}
.carousel-items.slick-initialized.slick-slider {
margin-right: 15px;
}
.carousel {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
margin-right: calc((100% - 100vw) / 2);
left: 0 !important;
min-height: 340px !important;
}
.carousel .swiper-pagination {
bottom: 70px !important;
}
.carousel .swiper-wrapper {
gap: 1rem;
}
.testimonials-carousel {
background-image: url("/wp-content/themes/understrap-child/images/orange-background.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 337px;
}
@media only screen and (max-width: 768px) {
.testimonials-carousel {
width: calc(100% - 2rem) !important;
margin-left: auto !important;
margin-ight: auto !important;
}
}
.testimonials-carousel .swiper-slide {
width: 100%;
}
.testimonials-carousel .swiper-slide .testimonials {
background: transparent;
margin-right: 20px;
}
.testimonials-carousel .swiper-slide .testimonials .row {
margin-right: 0rem !important;
margin-left: -15px !important;
min-height: 316px !important;
}
.testimonials-carousel .swiper-slide .testimonials .col-md-1 {
background-size: cover;
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-text {
padding: 30px 50px;
width: 80%;
margin: auto;
margin-top: 50px;
background-color: #fff;
border-radius: 25px;
min-height: 230px;
max-width: 1068px;
position: relative;
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-copy::after {
position: absolute;
top: 0px;
left: 69px;
background-repeat: no-repeat;
background-size: contain;
width: 94px;
height: 150px;
content: "";
display: block;
background-image: url("/wp-content/themes/understrap-child/images/qu.png");
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-copy {
margin-left: 15%;
margin-right: 7%;
}
.testimonials-carousel .swiper-slide .testimonials p {
font-size: 1.13rem !important;
line-height: 1.5rem !important;
color: #63656B;
font-family: "PT Sans", sans-serif;
}
.testimonials-carousel .swiper-slide .testimonials .testimonial-author {
font-size: 1.13rem !important;
line-height: 1.5rem !important;
font-weight: 700;
color: #007299;
margin-top: 20px;
margin-bottom: 0;
font-family: "Chalkduster", sans-serif;
}
.has-blue-color,
.has-blue-color:visited {
color: #0d6efd;
......
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,7 +8,7 @@
// Exit if accessed directly.
defined('ABSPATH') || exit;
include 'inc/blocks.php';
/**
* Removes the parent themes stylesheet and scripts from inc/enqueue.php
......
......@@ -24,6 +24,7 @@ $navbar_type = get_theme_mod( 'understrap_navbar_type', 'collapse' );
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/chalkduster" rel="stylesheet">
</head>
......
<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {
// Check function exists.
if( function_exists('acf_register_block_type') ) {
acf_register_block_type( array(
'title' => __( 'Carousel', 'client_textdomain' ),
'name' => 'carousel',
'render_template' => 'blocks/carousel/carousel.php',
'mode' => 'edit',
'supports' => [
'align' => false,
'anchor' => true,
'customClassName' => true
]
));
wp_enqueue_style('call-out-block', get_stylesheet_directory_uri() . '/blocks/call-out-block/style.css', array(), '1.0.1' );
}
}
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.
This diff could not be displayed because it is too large.
......@@ -41,7 +41,10 @@
"url": "https://github.com/understrap/understrap-child/issues"
},
"homepage": "https://understrap.com",
"dependencies": {},
"dependencies": {
"rollup-plugin-postcss": "^4.0.2",
"swiper": "^11.1.14"
},
"devDependencies": {
"@babel/core": "^7.19.6",
"@babel/preset-env": "^7.19.4",
......
......@@ -9,7 +9,7 @@ const { nodeResolve } = require( '@rollup/plugin-node-resolve' );
const commonjs = require( '@rollup/plugin-commonjs' );
const multi = require( '@rollup/plugin-multi-entry' );
const replace = require( '@rollup/plugin-replace' );
const postcss = require('rollup-plugin-postcss');
/**
* Internal dependencies
*/
......@@ -39,6 +39,9 @@ const plugins = [
nodeResolve(),
commonjs(),
multi(),
postcss({
plugins: []
})
];
module.exports = {
......
import Swiper from 'swiper';
import {
Navigation,
Pagination,
A11y,
Keyboard
} from 'swiper/modules'
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/keyboard';
import 'swiper/css/a11y';
jQuery(document).ready(function($) {
jQuery('.carousel-items').each(function() {
var offset = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var offsetAfter = ((window.innerWidth - $('.entry-content').width()) / 2) - 28;
var PerView = 'auto';
var space = 20;
var SlidesPerGroup= 1;
var _id = jQuery(this).parent().attr('id');
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
}
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);
console.log(swiper_params);
});
});
\ No newline at end of file
// Add your custom JS here.
import "./_carousels";
\ No newline at end of file
......
......@@ -12,6 +12,7 @@
@import "theme/header";
@import "theme/footer";
@import "theme/accordion";
@import "theme/carousel";
@import "assets/understrap/theme/colors"; // <-------- This creates the necessary bootstrap color classes.
@import "assets/understrap/theme/blocks"; // <-------- This adds Bootstrap styles to blocks.
@import "assets/understrap/theme/contact-form7"; // <-------- Contact Form 7 - Bootstrap 4 support
......
.swiper-pagination-bullet {
background: #fff !important;
border: 2px solid #2c2c2c !important;
height: 13px !important;
width: 13px !important;
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background: #3f9c35 !important;
border: 2px solid #3f9c35 !important;
}
// carousel css
.carousel:not(.is-admin) {
background-color: transparent !important;
width: 100vw;
}
.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;
@media only screen and (max-width: 768px) {
padding-inline-start: 0px;
}
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
pointer-events: all !important;
}
.carousel-items.slick-initialized.slick-slider {
margin-right: 15px; //for the scroll bar
}
.carousel {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
margin-right: calc((100% - 100vw) / 2);
left: 0 !important;
min-height: 340px !important;
.swiper-button-next {
//right: 15% !important;
}
.swiper-button-prev {
//left: 11% !important;
}
.swiper-pagination {
bottom: 70px !important;
}
.carousel-items {
}
.swiper-wrapper {
gap: 1rem;
}
}
// testimonials carousel css
.testimonials-carousel {
background-image:url("/wp-content/themes/understrap-child/images/orange-background.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 337px;
@media only screen and (max-width: 768px) {
width: calc(100% - 2rem) !important;
margin-left: auto !important;
margin-ight: auto !important;
}
.swiper-slide {
width: 100%;
.testimonials {
background: transparent;
margin-right: 20px;
.row {
margin-right: 0rem !important;
margin-left: -15px !important;
min-height: 316px !important;
}
.col-md-1 {
background-size: cover;
}
.testimonial-text {
padding: 30px 50px;
width: 80%;
margin: auto;
margin-top:50px ;
background-color: #fff;
border-radius: 25px;
min-height: 230px;
max-width: 1068px;
position: relative;
}
.testimonial-copy::after{
position: absolute;
top: 0px;
left: 69px;
background-repeat: no-repeat;
background-size: contain;
width:94px;
height:150px;
content:"";
display: block;
background-image:url("/wp-content/themes/understrap-child/images/qu.png");
}
.testimonial-copy{
margin-left:15%;
margin-right:7%;
}
p {
font-size: 1.13rem !important;
line-height: 1.5rem !important;
color: #63656B;
font-family: "PT Sans", sans-serif;
}
.testimonial-author{
font-size: 1.13rem !important;
line-height: 1.5rem !important;
font-weight: 700;
color: #007299;
margin-top: 20px;
margin-bottom: 0;
font-family: 'Chalkduster', sans-serif;
}
}
}
}
......@@ -276,6 +276,39 @@ ul:not(.navbar-nav):not(.menu){
}
}
.color-box{
border-radius: 30px;
padding: 37px 25px;
.wp-block-separator{
border-top-color: #fff;
}
h3{
color: #231F20;
font-size: 3.56rem;
line-height: 4.56rem;
font-family: 'Chalkduster', sans-serif;
}
p{
color:#231F20;
font-size: 1.13rem;
line-height: 1.5rem;
}
}
.gray-box{
background-color: #DAD9D7;
}
.green-box{
background-color: #A3D55F;
}
.blue-box{
background-color: #3EB5E6;
}
.orange-box{
background-color: #FF9119;
}
......@@ -344,3 +377,20 @@ ul:not(.navbar-nav):not(.menu){
}
}
.join-callout.blue{
background-color: #3DB5E6;
}
.join-callout.blue::before{
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1369.39 118.32"><defs><style> .cls-1 { fill: %233DB5E6; stroke-width: 0px; } </style></defs><path id="Subtraction_3" data-name="Subtraction 3" class="cls-1" d="M1369.39,118.28L0,118.32C0,57.99,0,60.48,0,59.76l1.78-1.57c9.81-7.27,20.38-13.46,31.52-18.46,12.26-5.54,24.88-10.24,37.78-14.05,23.89-7.2,51.85-13.01,83.11-17.27C193.3,3.23,232.69.53,272.13.35c1.34,0,2.55,0,3.61.02h.06c9.46-.24,19.03-.36,28.43-.36,14.1,0,28.39.28,42.48.82,13.43.52,27.11,1.3,40.67,2.32,25.04,1.88,50.2,4.59,76.92,8.27,50.22,6.92,97.44,16.16,143.1,25.1h0l1.67.33h0c45.52,8.91,92.59,18.12,141.28,24.89,26.2,3.65,50.81,6.32,75.22,8.18,27.39,2.09,53.84,3.1,80.87,3.1,21.49,0,43.44-.67,65.24-2,82.01-5,158.29-7.53,226.7-7.53,26.88,0,52.6.4,76.43,1.18,19.07.62,36.99,1.5,53.25,2.59,27.46,1.85,40.14,3.6,40.69,3.68l.61,47.35Z"/></svg>');
}
.page-template-no-title{
.join-callout::before{
width: 120vw;
margin: 180px 0 0% 0%;
}
}
\ No newline at end of file
......