can someone help me with this code the zoom funcion is not working on mobile , when i click on an image to expand it nothing happens
{% comment %}
:root {
--carousel-bg: {{ section.settings.background_color | default: '#0a0a0a' }};
--btn-primary: {{ section.settings.button_color | default: '#00ff88' }};
--btn-primary-text: {{ section.settings.button_text_color | default: '#000000' }};
--btn-secondary: {{ section.settings.button_secondary_color | default: '#ff3366' }};
--btn-secondary-text: {{ section.settings.button_secondary_text_color | default: '#ffffff' }};
}
.carousel-{{ section.id }} {
position: relative;
height: 80vh;
min-height: 600px;
overflow: hidden;
background: var(--carousel-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 1200px;
padding-bottom: 80px;
}
.carousel-{{ section.id }} .slides-container {
position: relative;
width: 100%;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
transform-style: preserve-3d;
}
.carousel-{{ section.id }} .slide {
position: absolute;
width: 600px;
height: 400px;
border-radius: 20px;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.carousel-{{ section.id }} .slide.center {
z-index: 3;
transform: translateX(0) scale(1) rotateY(0deg);
opacity: 1;
filter: brightness(1);
}
.carousel-{{ section.id }} .slide.left {
z-index: 2;
transform: translateX(-80%) scale(0.8) rotateY(25deg);
opacity: 0.7;
filter: brightness(0.6);
}
.carousel-{{ section.id }} .slide.right {
z-index: 2;
transform: translateX(80%) scale(0.8) rotateY(-25deg);
opacity: 0.7;
filter: brightness(0.6);
}
.carousel-{{ section.id }} .slide.hidden {
z-index: 1;
transform: scale(0.5);
opacity: 0;
pointer-events: none;
}
.carousel-{{ section.id }} .slide-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-{{ section.id }} .slide-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
background: transparent;
color: white;
z-index: 2;
transform: translateY(20px);
opacity: 0;
transition: all 0.6s ease;
}
.carousel-{{ section.id }} .slide.center .slide-content {
transform: translateY(0);
opacity: 1;
}
.carousel-{{ section.id }} .slide-title {
font-size: clamp(1.25rem, 2.5vw, 2rem);
font-weight: 800;
line-height: 1.2;
margin-bottom: 0.75rem;
background: linear-gradient(135deg, #fff 0%, #00ff88 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.carousel-{{ section.id }} .slide-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 0;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.carousel-{{ section.id }} .nav-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 10;
}
.carousel-{{ section.id }} .nav-button {
width: 50px;
height: 50px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
}
.carousel-{{ section.id }} .nav-button:hover {
background: rgba(0, 255, 136, 0.2);
border-color: #00ff88;
transform: scale(1.1);
box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
}
/* Zoom Overlay */
.carousel-{{ section.id }} .zoom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.carousel-{{ section.id }} .zoom-overlay.active {
display: flex;
opacity: 1;
}
.carousel-{{ section.id }} .zoom-container {
position: relative;
width: 90vw;
height: 90vh;
max-width: 90%;
max-height: 90%;
}
.carousel-{{ section.id }} .zoom-image {
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
}
.carousel-{{ section.id }} .zoom-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
color: #000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1001;
transition: all 0.3s ease;
}
.carousel-{{ section.id }} .zoom-close:hover {
background: rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
.carousel-{{ section.id }} .zoom-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1001;
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
color: #000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.carousel-{{ section.id }} .zoom-button:hover {
background: rgba(0, 0, 0, 0.2);
transform: translateY(-50%) scale(1.1);
}
.carousel-{{ section.id }} .zoom-button.prev {
left: 20px;
}
.carousel-{{ section.id }} .zoom-button.next {
right: 20px;
}
.carousel-{{ section.id }} .zoom-counter {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.1);
color: #000;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.9rem;
z-index: 1001;
}
@media screen and (max-width: 768px) {
.carousel-{{ section.id }} {
height: 60vh;
min-height: 400px;
perspective: 800px;
padding-bottom: 70px;
}
.carousel-{{ section.id }} .slide {
width: 90%;
max-width: 350px;
height: 250px;
}
.carousel-{{ section.id }} .slide.left {
transform: translateX(-110%) scale(0.65) rotateY(45deg);
}
.carousel-{{ section.id }} .slide.right {
transform: translateX(110%) scale(0.65) rotateY(-45deg);
}
.carousel-{{ section.id }} .slide-content {
padding: 1.5rem;
}
.carousel-{{ section.id }} .slide-title {
font-size: 1.25rem;
}
.carousel-{{ section.id }} .slide-description {
font-size: 0.9rem;
}
.carousel-{{ section.id }} .nav-controls {
bottom: 15px;
}
.carousel-{{ section.id }} .nav-button {
width: 45px;
height: 45px;
}
}
@media screen and (max-width: 480px) {
.carousel-{{ section.id }} {
height: 50vh;
min-height: 350px;
padding-bottom: 60px;
}
.carousel-{{ section.id }} .slide {
width: 95%;
max-width: 300px;
height: 200px;
}
.carousel-{{ section.id }} .nav-button {
width: 40px;
height: 40px;
}
}
@media (prefers-reduced-motion: reduce) {
.carousel-{{ section.id }} .slide {
transition: opacity 0.3s ease;
}
}
{%- for block in section.blocks -%}
{% if block.settings.image %}
{% else %}
{% endif %}
{% if block.settings.heading %}
{{ block.settings.heading }}
{% endif %}
{% if block.settings.subheading %}
{{ block.settings.subheading }}
{% endif %}
{%- endfor -%}
{% if section.blocks.size > 1 %}
{% endif %}
{% if section.blocks.size > 1 %}
1 / {{ section.blocks.size }}
{% endif %}
ith Zoom”,#0a0a0a ”#00ff88 ”#000000 ”#ff3366 ”#ffffff ”
{% if section.blocks.size > 1 %}
