I have a Flickity carousel on my website which is populated by a PHP block. It all renders correctly, but I can't figure out why the links are not working. You can see a live demo here: https://sc.apexl.io/swimming-lessons/adult-and-child-swimming-lessons/ (scroll down to the section headed "From tot to titan..."). I suspect it's something to do with the clickability/draggability of the cards. Thanks in advance!
HTML:
<div class="container card-carousel-header"<?php if (get_field('remove_top_margin')): ?> style="margin-top:0;"<?php endif; ?>>
<div class="row">
<h2 class="animated-underline-effect">
<span class="animated-underline"><?php the_field('heading'); ?></span>
</h2>
</div>
</div>
<?php endif; ?>
<?php
$start_index = get_field('default_slide');
$start_index = is_numeric($start_index) ? intval($start_index) : 1;
$start_index = $start_index - 1;
?>
<div class="carousel-course-card" data-flickity='{ "freescroll": false, "pageDots": false, "wrapAround": false, "initialIndex": <?php echo $start_index; ?> }'<?php if (get_field('remove_bottom_margin')): ?> style="margin-bottom:0;"<?php endif; ?>>
<?php $counter = 0; // Initialize a counter for unique IDs ?>
<?php while (have_rows('carousel_repeater')): the_row(); ?>
<div class="carousel-course-card-cell">
<div class="card-cell-content">
<div class="card-cell-text">
<h3>
<?php the_sub_field('name'); ?>
</h3>
<p class="card-subtitle">
<?php the_sub_field('subtitle'); ?>
</p>
</div>
</div>
<div class="card-cell-thumbnail">
<img src="<?php the_sub_field('image'); ?>" alt=""/>
</div>
<div class="card-cell-button" id="button-<?php echo $counter; ?>">
<?php
$cta = get_sub_field('call_to_action');
?>
<?php if ($cta == 'book'): ?>
<a href="https://mightysplash-bookings.swimphony.io/" target="_blank">Click here to book your lesson</a>
<?php elseif ($cta == 'learn'): ?>
<a href="<?php the_sub_field('card_link'); ?>">Click here to learn more</a>
<?php endif; ?>
</div>
</div>
<?php $counter++; // Increment the counter ?>
<?php endwhile; ?>
</div>
CSS:
margin-top: 6rem;
margin-bottom: -6rem;
text-align: center;
color: @msorange;
}
.carousel-course-card:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to top, white 0%, white 30%, #e17122 30%, #e17122 70%, white 70%, white 100%);
background-repeat: repeat-x;
transform: skewY(1deg);
transform-origin: bottom;
will-change: transform;
z-index: -1;
}
.carousel-course-card {
padding: 3rem 0;
margin: 2rem auto;
position: relative;
background-image: url('/wp-content/uploads/mighty-splash/ms-orange-dots-down.svg');
background-repeat: repeat-x;
background-position: 0 90%;
background-size: 100%;
.carousel-course-card-cell {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 450px;
height: 500px;
margin: 50px 20px 50px 20px;
background: #fff;
border-radius: 2px;
text-align: center;
counter-increment: carousel-cell;
opacity: 0.5;
transition: box-shadow 0.8s, opacity 0.5s;
}
.carousel-course-card-cell.is-selected {
box-shadow: 5px 5px 5px rgba(0,0,0,.2), 10px 10px 30px rgba(0,0,0,.3);
opacity: 1;
}
.carousel-course-card-cell {
.card-cell-content {
width: 100%;
padding: 20px;
align-content: center;
.card-cell-text {
width: 90%;
margin: 0 auto;
h3 {
margin: 0 auto;
color: @msdarkblue;
}
p.card-subtitle {
font-family: Action-Man;
margin: 0 auto;
color: @mspink;
}
}
}
.card-cell-info-container {
width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
.card-cell-info {
margin-bottom: 30px;
display: flex;
flex-direction: row;
text-align: left;
h4 {
margin: 0;
font-size: 16px;
font-weight: 500;
}
i {
font-size: 25px;
margin-right: 20px;
color: #ff4e00
}
}
.card-cell-info:last-of-type {
margin: 0;
}
}
.card-cell-thumbnail {
width: 100%;
height: auto;
padding: 1px;
img {
width: 100%;
max-height: auto;
padding: 0;
margin: 0;
}
}
.card-cell-button {
width: 100%;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
a {
font-family: Action-Man;
text-decoration: none;
color: @msdarkblue;
}
}
}
}
.flickity-prev-next-button.next {
right: 25vw !important;
}
.flickity-prev-next-button.previous {
left: 25vw !important
}
.flickity-button {
transition: filter 0.5s;
}
.flickity-button, .flickity-button:hover {
background: #ddd !important;
color: #fff !important;
}
.flickity-button:hover .flickity-button-icon {
fill: white !important;
}
.flickity-button:hover {
filter: drop-shadow(0px 0px 30px rgba(255,78,0,0.5));
}
@media only screen and (max-width: @mediaBreakMedium) {
.flickity-prev-next-button.next {
right: 5vw !important;
}
.flickity-prev-next-button.previous {
left: 5vw !important;
}
}
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.75);
.modal-content {
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
width: 80% !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 75vh;
overflow: scroll;
.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-button:hover, .close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
}
}
It looks like you problem related to JS Check this file https://sc.apexl.io/wp-content/themes/swim-central-child/scripts/main.js?ver=1.0
$('.card-cell-button').click(function(event) {
event.preventDefault();
var buttonId = $(this).attr('id');
var infoId = 'info-' + buttonId.split('-')[1];
var infoContent = $('#' + infoId).html();
$('#modal-info-content').html(infoContent);
$('#fullscreen-modal').show();
$('body').css('overflow', 'hidden'); //prevent scrolling
});