I have coded a grid of thumbnails where when the user clicks a thumbnail, a slideshow of photos open depending on the thumbnail clicked. The user can also close the slideshow to open another slideshow. This is done using the swiper-js library, and is made to be used as a code widget in an online website building tool called Readymag.
In the preview mode of Readymag, when clicking on a thumbnail, the slideshow and navigation arrows appear but the arrow buttons on the left and right of the slideshow are not working unless I change an image by dragging it. Once I make a drag move, then the arrow buttons work properly. I have also noticed that the autoplay of 10 seconds doesn’t work until I make a drag move. It’s like the slideshow is stuck/frozen until I drag an image. However, in the HTML code (on a page in the browser), everything works perfectly fine. The arrowws are working as well as the autoplay works as epxected. Attached is my source code:
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<div class="thumbnails-container">
<div class="thumbnail-row">
<div class="thumbnail" data-index="1" onclick="toggleEnlarged(1)">
<img src="Img1.1" class="slideshow-image">
<img src="Img1.2" class="slideshow-image">
<img src="Img1.3" class="slideshow-image">
<div class="t">3 SCREENS MULTIPLEX, AURANGABAD</div>
</div>
<div class="thumbnail" data-index="2" onclick="toggleEnlarged(2)">
<img src="Img2.1" class="slideshow-image">
<img src="Img2.2" class="slideshow-image">
<img src="Img2.3" class="slideshow-image">
<div class="t">3 SCREENS MULTIPLEX, LATUR</div>
</div>
<div class="thumbnail" data-index="3" onclick="toggleEnlarged(3)">
<img src="Img3.1" class="slideshow-image">
<img src="Img3.2" class="slideshow-image">
<div class="t">SHOPPERS STOP, LATUR</div>
</div>
</div>
</div>
<!-- ...and so on -->
</div>
<div id="overlay"></div> <!-- New overlay element -->
<div id="enlargedCarousel" class="enlarged-carousel">
<div class="close-button" onclick="closeEnlarge()">✖</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Additional wrapper required for navigation -->
</div>
<!-- Add Pagination -->
<!-- Add Navigation -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="project-name">TEXT</div>
</div>
</div>
</div>
<style>
/* Your existing styles here */
.thumbnails-container {
display: grid;
grid-template-columns: repeat(1, 3fr);
gap: 11px; /* Adjusted the vertical spacing between elements */
}
.thumbnail-row {
display: flex;
flex-direction: row;
gap: 10px; /* Adjusted the horizontal spacing between elements */
}
.thumbnail {
position: relative; /* Ensure relative positioning for absolute overlay */
width: 198px;
height: 123px;
overflow: hidden;
cursor: pointer;
}
.thumbnail .slideshow-image {
position: relative; /* Ensure relative positioning for the pseudo-element */
transition: transform 0.5s ease-in-out; /* Adjust the duration and easing as needed */
}
.thumbnail:hover .slideshow-image {
transform: scale(1.2); /* Adjust the scale factor as needed */
}
.slideshow-image {
width: 100%;
height: auto;
display: block;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Dark translucent background */
z-index: 0;
display: none;
}
.t {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #E9E9E9;
color: #6D6D6D;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: medium;
font-size: 9px;
line-height: 22px;
letter-spacing: 0.5px;
text-transform: uppercase; /* Make all letters uppercase */
}
.thumbnail:hover .t {
color: #FFFFFF;
background-color: #454545;
transition: 0.5s ease-in-out;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide img {
width: 100%;
height:88%;
object-fit: cover; /* Ensure the image covers the whole slide, cropping if needed */
}
/*
/* Styling for navigation arrows */
.swiper-button-next,
.swiper-button-prev {
color: #ffffff;
opacity: 70%;
font-size: 24px; /* Adjust as needed for thickness */
width: calc(var(--swiper-navigation-size)/ 44 * 27);
height: var(--swiper-navigation-size);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0px 30px;
}
.enlarged-carousel {
opacity: 0;
pointer-events: all;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: calc(198px * 3 + 10px * 2);
/* Width of 3 thumbnails with 10px spacing in between */
height: calc(127px * 3 + 13px * 2);
/* Height of 3 thumbnails with 13px spacing in between */
background-color: rgba(0, 0, 0, 0.7);
overflow: hidden;
transition: opacity 1s ease-in-out;
}
.project-name {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
background-color: #E9E9E9;
color: #6D6D6D;
text-align: center;
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 600; /* Change to semi bold */
font-size: 24px;
line-height: 50px;
letter-spacing: 0.5px;
text-transform: uppercase; /* Make all letters uppercase */
}
.close-button {
position: absolute;
top: 15px;
right: 15px;
color: black;
background-color: rgba(233, 233, 233, 0.5);
font-size: 20px;
line-height: 20px;
letter-spacing: 0.5px;
text-transform: uppercase;
padding-left: 13px;
padding-right: 13px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
z-index: 2;
}
</style>
<script>
$(document).ready(function () {
var swiper; // Declare swiper variable
var thumbnailRows = $('.thumbnail-row');
var carouselHeight = $('.enlarged-carousel').height();
// Attach click event handlers to thumbnails
$('.thumbnail').click(function () {
var index = $(this).data('index');
toggleEnlarged(index);
});
// Attach click event handler to close button
$('.close-button').click(function () {
closeEnlarge();
});
// Attach click event handlers to next and previous buttons
$('.swiper-button-next').click(function () {
swiper.slideNext();
});
$('.swiper-button-prev').click(function () {
swiper.slidePrev();
});
// Initialize Swiper
swiper = new Swiper('.swiper-container', {
slidesPerView: 1,
spaceBetween: 0,
loop: true, // Enable looping by default
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
speed: 1000,
});
function toggleEnlarged(thumbnailIndex) {
swiper.autoplay.stop();
$('.swiper-slide').remove();
var $thumbnail = $('.thumbnail[data-index="' + thumbnailIndex + '"]');
var $images = $thumbnail.find('.slideshow-image');
var textContent = $thumbnail.find('.t').text();
$images.each(function () {
var imageUrl = $(this).attr('src').replace(/\/w_396,c_scale\//, '/');
var slide = '<div class="swiper-slide">' +
'<img src="' + imageUrl + '" class="slideshow-image">' +
'</div>';
swiper.appendSlide(slide);
});
// Update the text content inside the carousel
$('.project-name').text(textContent);
var thumbnailRow = Math.ceil(thumbnailIndex / 3);
var thumbnailRowTop = thumbnailRows.eq(thumbnailRow - 1).position().top;
var carouselTop;
if (thumbnailRow <= 3) {
carouselTop = 0;
} else {
carouselTop = thumbnailRows.eq(thumbnailRow - 3).position().top;
}
$('.enlarged-carousel').css('top', carouselTop);
// Show the overlay
$('#overlay').fadeIn(1000);
// Open the enlarged carousel
$('.enlarged-carousel').css('z-index', '1').animate({ opacity: 1 }, 300);
var numSlides = $images.length;
if (numSlides === 1) {
swiper.params.loop = false;
$('.swiper-button-next, .swiper-button-prev').hide();
} else {
swiper.params.loop = true;
$('.swiper-button-next, .swiper-button-prev').show();
}
swiper.autoplay.start();
}
function closeEnlarge() {
swiper.autoplay.stop();
// Hide the overlay
$('#overlay').fadeOut(1000);
let enlargedCarousel = document.getElementById('enlargedCarousel');
enlargedCarousel.style.opacity = (enlargedCarousel.style.opacity === '1') ? '0' : '1';
setTimeout(() => {
enlargedCarousel.style.zIndex = (enlargedCarousel.style.zIndex === '1') ? '-1' : '1';
}, 1000);
}
});
</script>
I tried enabling the use iframe parameter on the code widget. That seems to solve the problem but I don’t want to use an iframe since it causes an issue while zooming in and out of the page. Any idea why this works properly on plain HTML but not on Readymag? Is there some element name that is clashing with the way Readymag elements are named?