Hi,
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. In preview mode, when clicking on a thumbnail, the slideshow appears 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. However, in the HTML code (on a page in the browser), everything works fine. 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.
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? 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="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554997/ARCHITECTURAL/PVR%20AURANGABAD/PVR_AURANGABAD_0018x_vctrb8.jpg" class="slideshow-image" alt="Img 1.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554993/ARCHITECTURAL/PVR%20AURANGABAD/PVR_AURANGABAD_0112k_fiaioi.jpg" class="slideshow-image" alt="Img 1.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554988/ARCHITECTURAL/PVR%20AURANGABAD/PVR_AURANGABAD_0099k_flsyrf.jpg" class="slideshow-image" alt="Img 1.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554982/ARCHITECTURAL/PVR%20AURANGABAD/PVR-collage_qoyony.png" class="slideshow-image" alt="Img 1.4">
<!-- Add more images as needed -->
<div class="t">3 SCREENS MULTIPLEX, AURANGABAD</div>
</div>
<!-- Repeat similar structure for Thumbnails 2 and 3 -->
<div class="thumbnail" data-index="2" onclick="toggleEnlarged(2)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554997/ARCHITECTURAL/PVR%20LATUR/PVR_LATUR_pic0001_azhffx.jpg" class="slideshow-image" alt="Img 2.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555045/ARCHITECTURAL/PVR%20LATUR/PVR_LATUR_pic0018_tpxv5r.jpg" class="slideshow-image" alt="Img 2.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555017/ARCHITECTURAL/PVR%20LATUR/PVR_LATUR_pic0111_pca7tf.jpg" class="slideshow-image" alt="Img 2.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554989/ARCHITECTURAL/PVR%20LATUR/PVR_LATUR_pic0133_kximgo.jpg" class="slideshow-image" alt="Img 2.4">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554983/ARCHITECTURAL/PVR%20LATUR/latur-collage_nqekk2.png" class="slideshow-image" alt="Img 2.5">
<!-- Add more images as needed -->
<div class="t">3 SCREENS MULTIPLEX, LATUR</div>
</div>
<div class="thumbnail" data-index="3" onclick="toggleEnlarged(3)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555105/ARCHITECTURAL/SHOPPERS%20STOP%20LATUR%20MAH/SHOPPERS_STOP_LATUR_MAH_DSC0486667_zhou0s.jpg" class="slideshow-image" alt="Img 3.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555110/ARCHITECTURAL/SHOPPERS%20STOP%20LATUR%20MAH/ss-collage_rwvrii.png" class="slideshow-image" alt="Img 3.2">
<!-- Add more images as needed -->
<div class="t">SHOPPERS STOP, LATUR</div>
</div>
</div>
<div class="thumbnail-row">
<div class="thumbnail" data-index="4" onclick="toggleEnlarged(4)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555107/ARCHITECTURAL/RED%20CHILLIES%20FINAL/RED_CHILLIES_FINAL_rc-collage_e1dylq.png" class="slideshow-image" alt="Img 4.1">
<!-- Add more images as needed -->
<div class="t">RED CHILLIES OFFICE, MUMBAI </div>
</div>
<div class="thumbnail" data-index="5" onclick="toggleEnlarged(5)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554988/ARCHITECTURAL/MANAVALI%20RESORT/MANAVALI_RESORT_cam05_airsbp.jpg" class="slideshow-image" alt="Img 5.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554987/ARCHITECTURAL/MANAVALI%20RESORT/MANAVALI_RESORT_cam_03_iagng2.jpg" class="slideshow-image" alt="Img 5.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554987/ARCHITECTURAL/MANAVALI%20RESORT/MANAVALI_RESORT_cam04_copy_e99ggu.jpg" class="slideshow-image" alt="Img 5.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554987/ARCHITECTURAL/MANAVALI%20RESORT/MANAVALI_RESORT_cam_01_copy1_nety5g.jpg" class="slideshow-image" alt="Img 5.4">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554986/ARCHITECTURAL/MANAVALI%20RESORT/MANAVALI_RESORT_cam06_ml4fxk.jpg" class="slideshow-image" alt="Img 5.5">
<!-- Add more images as needed -->
<div class="t">MANAVALI RESORT, MAHARASHTRA </div>
</div>
<div class="thumbnail" data-index="6" onclick="toggleEnlarged(6)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554985/ARCHITECTURAL/KAPOORWALA/KAPOORWALA_1_ijy3i7.jpg" class="slideshow-image" alt="Img 6.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554986/ARCHITECTURAL/KAPOORWALA/KAPOORWALA_2_pdxvrb.jpg" class="slideshow-image" alt="Img 6.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554991/ARCHITECTURAL/KAPOORWALA/KAPOORWALA_4_crolip.jpg" class="slideshow-image" alt="Img 6.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554993/ARCHITECTURAL/KAPOORWALA/KAPOORWALA_VIEW_4_pwhw2f.jpg" class="slideshow-image" alt="Img 6.4">
<!-- Add more images as needed -->
<div class="t">KAPOORWALA, MUMBAI</div>
</div>
</div>
<div class="thumbnail-row">
<div class="thumbnail" data-index="7" onclick="toggleEnlarged(7)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554992/ARCHITECTURAL/PURANDARE%20PARK/PURANDARE_PARK_P1_wu2aba.jpg" class="slideshow-image" alt="Img 7.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554991/ARCHITECTURAL/PURANDARE%20PARK/PURANDARE_PARK_7_a8h3nv.jpg" class="slideshow-image" alt="Img 7.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554990/ARCHITECTURAL/PURANDARE%20PARK/PURANDARE_PARK_NEW_gkoimj.jpg" class="slideshow-image" alt="Img 7.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554989/ARCHITECTURAL/PURANDARE%20PARK/PURANDARE_PARK_11b_wsrhoc.jpg" class="slideshow-image" alt="Img 7.4">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554991/ARCHITECTURAL/PURANDARE%20PARK/PURANDARE_PARK_8_gpcd0w.jpg" class="slideshow-image" alt="Img 7.5">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554990/ARCHITECTURAL/PURANDARE%20PARK/PURANDARE_PARK_12a_bgpmbu.jpg" class="slideshow-image" alt="Img 7.6">
<!-- Add more images as needed -->
<div class="t">PURANDARE PARK, MUMBAI</div>
</div>
<div class="thumbnail" data-index="8" onclick="toggleEnlarged(8)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554958/ARCHITECTURAL/BANER%209%20PUNE/BANER_9_PUNE_BANER_NEW_2_viycxh.jpg" class="slideshow-image" alt="Img 8.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554929/ARCHITECTURAL/BANER%209%20PUNE/BANER_9_PUNE_BANER_NEW_3B_orbcoh.jpg" class="slideshow-image" alt="Img 8.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554960/ARCHITECTURAL/BANER%209%20PUNE/BANER_9_PUNE_BANER_NEW_1_ytrdla.jpg" class="slideshow-image" alt="Img 8.3">
<!-- Add more images as needed -->
<div class="t">BANER 09 COMMERCIAL, PUNE
</div>
</div>
<div class="thumbnail" data-index="9" onclick="toggleEnlarged(9)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554929/ARCHITECTURAL/HINGEWADI%20KASTURI/HINGEWADI_KASTURI_hingewadi_4ca_k8lhnj.jpg" class="slideshow-image" alt="Img 9.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554960/ARCHITECTURAL/HINGEWADI%20KASTURI/HINGEWADI_KASTURI_hingewadi_1a_nn1rwr.jpg" class="slideshow-image" alt="Img 9.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554960/ARCHITECTURAL/HINGEWADI%20KASTURI/HINGEWADI_KASTURI_19a_qdyumt.jpg" class="slideshow-image" alt="Img 9.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554927/ARCHITECTURAL/HINGEWADI%20KASTURI/HINGEWADI_KASTURI_13F_s13ppp.jpg" class="slideshow-image" alt="Img 9.4">
<!-- Add more images as needed -->
<div class="t">HINGEWADI KASTURI, PUNE</div>
</div>
</div>
<div class="thumbnail-row">
<div class="thumbnail" data-index="10" onclick="toggleEnlarged(10)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555170/ARCHITECTURAL/VIKAS/vikas-collage_bb2vyw.png" class="slideshow-image" alt="Img 11.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555169/ARCHITECTURAL/VIKAS/VIKAS_2_ky7ny6.jpg" class="slideshow-image" alt="Img 11.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555172/ARCHITECTURAL/VIKAS/VIKAS_5_pjxmhe.jpg" class="slideshow-image" alt="Img 11.3">
<!-- Add more images as needed -->
<div class="t">VIKAS BUILDING, MUMBAI</div>
</div>
<div class="thumbnail" data-index="11" onclick="toggleEnlarged(11)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555196/ARCHITECTURAL/SUGEE%20PARK/collage_jjvsbl.png" class="slideshow-image" alt="Img 12.1">
<!-- Add more images as needed -->
<div class="t">SUGEE PARK, MUMBAI
</div>
</div>
<div class="thumbnail-row">
<div class="thumbnail" data-index="12" onclick="toggleEnlarged(12)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697629845/ARCHITECTURAL/RESIDENTIAL%20M/m_collage_o1kdrr.jpg" class="slideshow-image" alt="Img 13.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555134/ARCHITECTURAL/RESIDENTIAL%20M/RESIDENTIAL_M_VIEW_3_xzevha.jpg" class="slideshow-image" alt="Img 13.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555138/ARCHITECTURAL/RESIDENTIAL%20M/RESIDENTIAL_M_VIEW_2_gwd84k.jpg" class="slideshow-image" alt="Img 13.3">
<!-- Add more images as needed -->
<div class="t">MATUNGA ESTATE, MUMBAI</div>
</div>
</div>
</div>
<div class="thumbnail-row">
<div class="thumbnail" data-index="13" onclick="toggleEnlarged(13)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555172/ARCHITECTURAL/WAHAN%20FARM%20HOUSE/WAHAN_FARM_HOUSE_1_6_-_Photo_tf7z2d.jpg" class="slideshow-image" alt="Img 15.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555172/ARCHITECTURAL/WAHAN%20FARM%20HOUSE/WAHAN_FARM_HOUSE_1_2_-_Photo_pnv0wq.jpg" class="slideshow-image" alt="Img 15.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555176/ARCHITECTURAL/WAHAN%20FARM%20HOUSE/WAHAN_FARM_HOUSE_1_8_-_Photo_nyxtwj.jpg" class="slideshow-image" alt="Img 15.3">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555194/ARCHITECTURAL/WAHAN%20FARM%20HOUSE/WAHAN_FARM_HOUSE_3_21_-_Photo_crywwj.jpg" class="slideshow-image" alt="Img 15.4">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555175/ARCHITECTURAL/WAHAN%20FARM%20HOUSE/WAHAN_FARM_HOUSE_2_14_-_Photo_qbq6ze.jpg" class="slideshow-image" alt="Img 15.5">
<!-- Add more images as needed -->
<div class="t">WAHAN FARM HOUSE, KASHGAON</div>
</div>
<div class="thumbnail" data-index="14" onclick="toggleEnlarged(14)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554959/ARCHITECTURAL/CRU/CRU_1_rqzyvv.jpg" class="slideshow-image" alt="Img 16.1">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554958/ARCHITECTURAL/CRU/CRU_3_knu5f9.jpg" class="slideshow-image" alt="Img 16.2">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697554955/ARCHITECTURAL/CRU/CRU_2_rgxlpa.jpg" class="slideshow-image" alt="Img 16.3">
<!-- Add more images as needed -->
<div class="t">CRU FOR CAMERON, EDMONTON, CANADA</div>
</div>
<div class="thumbnail" data-index="15" onclick="toggleEnlarged(15)">
<img src="https://res.cloudinary.com/dcwoapdty/image/upload/w_396,c_scale/v1697555109/ARCHITECTURAL/SANJAY%20DUTT%20PRODUCTIONS%20OFFICE/SANJAY_DUTT_PRODUCTIONS_OFFICE_sdp-final-view_sb1x8k.png" class="slideshow-image" alt="Img 10.1">
<!-- Add more images as needed -->
<div class="t">SDP OFFICE, MUMBAI</div>
</div>
</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>
<!-- Continue adding rows until you reach Thumbnail 19 -->
<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();
});
// 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>