Today, we’re making a Star Wars-themed mega slider.
As usual, we will use Elementor free version. No Elementor Pro. No extra plugins. Just clean HTML with CSS and JavaScript. No worries about bloating your site due to heavy loads.
It is also fully responsive. So feel free to use it on your landing page.
The slider features fade transitions and slide-in effects for product images, creating a seamless and engaging experience. Staggered animations bring content to life. These overlapping actions keep visitors hooked, leaving a bold impression of your Star Wars products.
Perfect for e-commerce hero sections to showcase featured items with dynamic motion.
Use it on landing pages to highlight special collections or in product galleries to boost interactivity. Its responsive design ensures it looks stunning on any device.
Here are the steps to use it on your Elementor website:
Create three HTML blocks in Elementor.
Paste the HTML, CSS, and JavaScript codes separately into each block.
HTML
<!-- Star Wars Product Slider Module -->
<div class="wputopia-wrapper">
<div class="wputopia-content">
<div class="wputopia-bg-shape">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405214/starwars/logo.webp" alt="">
</div>
<div class="wputopia-product-img">
<div class="wputopia-product-img__item" id="wputopia-img1">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-1.webp" alt="star wars" class="wputopia-product-img__img">
</div>
<div class="wputopia-product-img__item" id="wputopia-img2">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-2.webp" alt="star wars" class="wputopia-product-img__img">
</div>
<div class="wputopia-product-img__item" id="wputopia-img3">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405218/starwars/item-3.webp" alt="star wars" class="wputopia-product-img__img">
</div>
<div class="wputopia-product-img__item" id="wputopia-img4">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-4.webp" alt="star wars" class="wputopia-product-img__img">
</div>
</div>
<div class="wputopia-product-slider">
<button class="wputopia-prev wputopia-disabled">
<span class="wputopia-icon">
<svg class="wputopia-icon-arrow-left" viewBox="0 0 32 32">
<path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
</svg>
</span>
</button>
<button class="wputopia-next">
<span class="wputopia-icon">
<svg class="wputopia-icon-arrow-right" viewBox="0 0 32 32">
<path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
</svg>
</span>
</button>
<div class="wputopia-product-slider__wrp">
<div class="wputopia-product-slider__item" data-target="wputopia-img1">
<div class="wputopia-product-slider__card">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405222/starwars/item-1-bg.webp" alt="star wars" class="wputopia-product-slider__cover">
<div class="wputopia-product-slider__content">
<h1 class="wputopia-product-slider__title">
IMPERIAL ARMY'S <br> TIE FIGHTER
</h1>
<span class="wputopia-product-slider__price">$9.999,<sup>99</sup></span>
<div class="wputopia-product-ctr">
<div class="wputopia-product-labels">
<div class="wputopia-product-labels__title">ENGINE UNIT</div>
<div class="wputopia-product-labels__group">
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type1" checked>
<span class="wputopia-product-labels__txt">P-S4 TWIN</span>
</label>
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type1">
<span class="wputopia-product-labels__txt">P-W401</span>
</label>
</div>
</div>
<span class="wputopia-hr-vertical"></span>
<div class="wputopia-product-inf">
<div class="wputopia-product-inf__percent">
<div class="wputopia-product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="47" stroke-dasharray="225, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
</svg>
</div>
<div class="wputopia-product-inf__percent-txt">75%</div>
</div>
<span class="wputopia-product-inf__title">DURABILITY</span>
</div>
</div>
<div class="wputopia-product-slider__bottom">
<button class="wputopia-product-slider__cart">ADD TO CART</button>
<button class="wputopia-product-slider__fav"><span class="wputopia-heart"></span> ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
<div class="wputopia-product-slider__item" data-target="wputopia-img2">
<div class="wputopia-product-slider__card">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405222/starwars/item-2-bg.webp" alt="star wars" class="wputopia-product-slider__cover">
<div class="wputopia-product-slider__content">
<h1 class="wputopia-product-slider__title">
KYLO REN'S <br> LIGHTSABER
</h1>
<span class="wputopia-product-slider__price">$1.699,<sup>99</sup></span>
<div class="wputopia-product-ctr">
<div class="wputopia-product-labels">
<div class="wputopia-product-labels__title">VOLTAGE RANGE</div>
<div class="wputopia-product-labels__group">
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type3" checked>
<span class="wputopia-product-labels__txt">2000 <sup>WATT</sup></span>
</label>
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type3">
<span class="wputopia-product-labels__txt">2800 <sup>WATT</sup></span>
</label>
</div>
</div>
<span class="wputopia-hr-vertical"></span>
<div class="wputopia-product-inf">
<div class="wputopia-product-inf__percent">
<div class="wputopia-product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
</svg>
</div>
<div class="wputopia-product-inf__percent-txt">80%</div>
</div>
<span class="wputopia-product-inf__title">DURABILITY</span>
</div>
</div>
<div class="wputopia-product-slider__bottom">
<button class="wputopia-product-slider__cart">ADD TO CART</button>
<button class="wputopia-product-slider__fav"><span class="wputopia-heart"></span> ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
<div class="wputopia-product-slider__item" data-target="wputopia-img3">
<div class="wputopia-product-slider__card">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-3-bg.webp" alt="star wars" class="wputopia-product-slider__cover">
<div class="wputopia-product-slider__content">
<h1 class="wputopia-product-slider__title">
IMPERIAL ARMY'S <br>
DEATH STAR
</h1>
<span class="wputopia-product-slider__price">$9.999,<sup>99</sup></span>
<div class="wputopia-product-ctr">
<div class="wputopia-product-labels">
<div class="wputopia-product-labels__title">HYPERDRIVE RATING</div>
<div class="wputopia-product-labels__group">
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type6" checked>
<span class="wputopia-product-labels__txt">CLASS 4</span>
</label>
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type6">
<span class="wputopia-product-labels__txt">CLASS 20</span>
</label>
</div>
</div>
<span class="wputopia-hr-vertical"></span>
<div class="wputopia-product-inf">
<div class="wputopia-product-inf__percent">
<div class="wputopia-product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
</svg>
</div>
<div class="wputopia-product-inf__percent-txt">80%</div>
</div>
<span class="wputopia-product-inf__title">DURABILITY RATE</span>
</div>
</div>
<div class="wputopia-product-slider__bottom">
<button class="wputopia-product-slider__cart">ADD TO CART</button>
<button class="wputopia-product-slider__fav"><span class="wputopia-heart"></span> ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
<div class="wputopia-product-slider__item" data-target="wputopia-img4">
<div class="wputopia-product-slider__card">
<img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="wputopia-product-slider__cover">
<div class="wputopia-product-slider__content">
<h1 class="wputopia-product-slider__title">
STORMTROPER <br>
HELMET
</h1>
<span class="wputopia-product-slider__price">$1.299,<sup>99</sup></span>
<div class="wputopia-product-ctr">
<div class="wputopia-product-labels">
<div class="wputopia-product-labels__title">HELMET SIZE</div>
<div class="wputopia-product-labels__group">
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type5">
<span class="wputopia-product-labels__txt">S</span>
</label>
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type5" checked>
<span class="wputopia-product-labels__txt">M</span>
</label>
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type5">
<span class="wputopia-product-labels__txt">L</span>
</label>
<label class="wputopia-product-labels__item">
<input type="radio" class="wputopia-product-labels__checkbox" name="type5">
<span class="wputopia-product-labels__txt">XL</span>
</label>
</div>
</div>
<span class="wputopia-hr-vertical"></span>
<div class="wputopia-product-inf">
<div class="wputopia-product-inf__percent">
<div class="wputopia-product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
</svg>
</div>
<div class="wputopia-product-inf__percent-txt">80%</div>
</div>
<span class="wputopia-product-inf__title">DURABILITY RATE</span>
</div>
</div>
<div class="wputopia-product-slider__bottom">
<button class="wputopia-product-slider__cart">ADD TO CART</button>
<button class="wputopia-product-slider__fav"><span class="wputopia-heart"></span> ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<svg class="wputopia-hidden" hidden>
<symbol id="wputopia-icon-arrow-left" viewBox="0 0 32 32">
<path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
</symbol>
<symbol id="wputopia-icon-arrow-right" viewBox="0 0 32 32">
<path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
</symbol>
</svg>CSS
<style>
@font-face {
font-family: 'Uni Sans';
src: url('https://res.cloudinary.com/muhammederdem/raw/upload/v1536168547/unisans-font/UniSansHeavyCAPS.woff2') format('woff2'),
url('https://res.cloudinary.com/muhammederdem/raw/upload/v1536168547/unisans-font/UniSansHeavyCAPS.woff') format('woff'),
url('https://res.cloudinary.com/muhammederdem/raw/upload/v1536168548/unisans-font/UniSansHeavyCAPS.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Uni Sans';
src: url('https://res.cloudinary.com/muhammederdem/raw/upload/v1536168545/unisans-font/UniSansThinCAPS.woff2') format('woff2'),
url('https://res.cloudinary.com/muhammederdem/raw/upload/v1536168545/unisans-font/UniSansThinCAPS.woff') format('woff'),
url('https://res.cloudinary.com/muhammederdem/raw/upload/v1536168548/unisans-font/UniSansThinCAPS.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@import url('https://fonts.googleapis.com/css?family=Dosis:400,600,700,800');
.wputopia-wrapper {
width: 100%;
height: 100vh;
min-height: 750px;
background: url(https://res.cloudinary.com/muhammederdem/image/upload/v1536405234/starwars/death_star.jpg) center no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
display: flex;
padding: 10px 60px;
container-type: inline-size;
}
.wputopia-content {
height: 600px;
margin: auto;
width: 100%;
max-width: 1050px;
display: flex;
align-items: center;
position: relative;
}
.wputopia-bg-shape {
height: 100%;
background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
box-shadow: 0px 30px 139px 0px rgba(10, 22, 31, 0.26);
border-radius: 30px;
padding: 45px 40px;
width: 50%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
z-index: 1;
}
.wputopia-bg-shape img {
object-fit: contain;
width: 510px;
display: block;
object-position: left center;
opacity: .2;
transform: rotate(-90deg) translateY(-50%);
max-width: inherit;
left: 10px;
position: absolute;
}
.wputopia-product-img {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 4;
}
.wputopia-product-img__item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
transform: translateX(-100px);
}
.wputopia-product-img__item.active {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
.wputopia-product-img__img {
width: 100%;
height: 100%;
object-fit: contain;
}
.wputopia-product-slider {
width: 75%;
height: 85%;
border-radius: 30px;
box-shadow: 0 28px 79px 0 rgba(10, 22, 31, 0.35);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 2;
}
.wputopia-next, .wputopia-prev {
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
width: 61px;
height: 61px;
border-radius: 50%;
position: absolute;
top: 50%;
outline: none;
cursor: pointer;
background: #fff;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.15);
transition: all 0.3s ease;
color: #333;
padding: 0;
}
.wputopia-next:hover, .wputopia-prev:hover {
background: #cc3743;
color: #fff;
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.25);
}
.wputopia-prev {
left: -30%;
transform: translate(-100%, -50%);
}
.wputopia-next {
right: 0;
transform: translate(50%, -50%);
}
.wputopia-icon {
display: inline-block;
width: 24px;
height: 24px;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
position: relative;
}
.wputopia-prev .wputopia-icon {
transform: translateX(-2px);
}
.wputopia-next .wputopia-icon {
transform: translateX(2px);
}
.wputopia-icon-arrow-left,
.wputopia-icon-arrow-right {
width: 100%;
height: 100%;
}
.wputopia-icon span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.wputopia-product-slider__wrp {
height: 100%;
}
.wputopia-product-slider__item {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.wputopia-product-slider__item.active {
opacity: 1;
pointer-events: auto;
}
.wputopia-product-slider__card {
height: 100%;
display: flex;
align-items: center;
width: 100%;
transition: all .5s;
overflow: hidden;
position: relative;
border-radius: 30px;
}
.wputopia-product-slider__cover {
border-radius: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.wputopia-product-slider__content {
color: #fff;
padding-top: 1px;
position: relative;
z-index: 3;
width: 100%;
padding-left: 250px;
padding-right: 80px;
}
.wputopia-product-ctr {
display: flex;
align-items: center;
min-height: 150px;
margin-top: 40px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
transition-delay: 0.2s;
}
.wputopia-hr-vertical {
width: 1px;
background: #9fa3a7;
align-self: stretch;
margin: 0 35px;
flex-shrink: 0;
opacity: .5;
}
.wputopia-product-labels {
flex: 1;
}
.wputopia-product-labels__title {
font-family: 'Dosis', sans-serif;
font-weight: 700;
letter-spacing: 3px;
font-size: 16px;
margin-bottom: 10px;
}
.wputopia-product-labels__group {
display: flex;
margin-bottom: 15px;
}
.wputopia-product-labels__item {
margin: 5px;
cursor: pointer;
}
.wputopia-product-labels__checkbox {
display: none;
}
.wputopia-product-labels__checkbox:checked + .wputopia-product-labels__txt {
border-color: #cc3743;
padding: 10px 13px;
}
.wputopia-product-labels__txt {
display: block;
border: 2px solid transparent;
font-size: 14px;
padding: 10px 20px;
padding-left: 0;
border-radius: 50px;
transition: all .3s;
letter-spacing: 2px;
}
.wputopia-product-inf {
text-align: center;
}
.wputopia-product-inf__percent {
font-weight: 700;
font-size: 22px;
letter-spacing: 1px;
margin-bottom: 12px;
font-family: 'Dosis', sans-serif;
position: relative;
}
.wputopia-product-inf__percent-circle {
position: relative;
}
.wputopia-product-inf__percent-circle svg {
transform: rotate(180deg) scaleY(-1);
transform-origin: 50%;
}
.wputopia-product-inf__percent-txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wputopia-product-slider__title {
margin: 0;
margin-bottom: 10px;
font-weight: 900;
font-size: 41px;
line-height: 1.2em;
letter-spacing: 2px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
color:#fff;
}
.wputopia-product-slider__price {
display: block;
font-size: 42px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
transition-delay: 0.1s;
text-align: right;
}
.wputopia-product-slider__bottom {
margin-top: 20px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
transition-delay: 0.3s;
}
.wputopia-product-slider__item.active .wputopia-product-slider__title,
.wputopia-product-slider__item.active .wputopia-product-slider__price,
.wputopia-product-slider__item.active .wputopia-product-ctr,
.wputopia-product-slider__item.active .wputopia-product-slider__bottom {
opacity: 1;
transform: translateY(0);
}
.wputopia-product-slider__cart {
box-shadow: 0 7px 99px 0 rgba(204, 51, 66, 0.6);
background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
border: none;
color: #fff;
padding: 10px 30px;
border-radius: 50px;
min-height: 50px;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
margin-right: 40px;
cursor: pointer;
}
.wputopia-product-slider__fav {
color: #888e94;
background: none;
border: none;
position: relative;
padding-left: 25px;
outline: none;
cursor: pointer;
}
.wputopia-heart {
display: block;
position: absolute;
left: 0;
transform: translate(-50%, -50%) scale(0.7);
top: 50%;
pointer-events: none;
width: 100px;
height: 100px;
background: url("https://res.cloudinary.com/muhammederdem/image/upload/v1536405215/starwars/heart.png") no-repeat;
background-position: 0 0;
cursor: pointer;
transition: background-position 1s steps(28);
transition-duration: 0s;
}
.wputopia-heart.is-active {
transition-duration: 1s;
background-position: -2800px 0;
}
.wputopia-disabled {
opacity: 0.5;
cursor: not-allowed !important;
pointer-events: none;
background: #f5f5f5 !important;
color: #999 !important;
box-shadow: none !important;
}
/* Responsive styles */
@media screen and (max-width: 992px) {
.wputopia-wrapper {
height: auto;
min-height: 100vh;
}
.wputopia-content {
max-width: 920px;
margin-top: 100px;
height: auto;
min-height: 100vh;
}
.wputopia-bg-shape {
width: 90%;
height: 290px;
align-items: flex-start;
padding: 50px;
left: 50%;
transform: translateX(-50%);
}
.wputopia-product-slider {
width: 80%;
left: 50%;
transform: translateX(-50%);
height: auto;
position: relative;
top: 0;
margin-top: 170px;
margin-bottom: 100px;
}
.wputopia-next, .wputopia-prev {
top: 170px;
width: 50px;
height: 50px;
font-size: 20px;
}
.wputopia-prev {
left: 0;
transform: translate(-50%, -50%);
}
.wputopia-next {
right: 0;
transform: translate(50%, -50%);
}
}
@media screen and (max-width: 767px) {
.wputopia-bg-shape {
padding: 30px;
width: 95%;
border-radius: 20px;
}
.wputopia-product-slider {
border-radius: 20px;
}
.wputopia-product-slider__content {
padding: 20px 30px 50px;
padding-top: 300px;
}
.wputopia-product-ctr {
flex-wrap: wrap;
justify-content: center;
margin-bottom: 40px;
}
.wputopia-hr-vertical {
width: 100%;
margin: 35px 0;
height: 1px;
}
.wputopia-product-labels {
width: 100%;
text-align: center;
}
.wputopia-product-labels__group {
justify-content: center;
}
}
@media screen and (max-width: 576px) {
.wputopia-bg-shape {
height: 200px;
padding: 30px;
}
.wputopia-product-slider {
width: 85%;
margin-top: 130px;
}
.wputopia-product-slider__content {
padding-top: 220px;
padding-left: 15px;
padding-right: 15px;
}
.wputopia-product-slider__cart {
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.wputopia-product-slider__fav {
width: 100%;
text-align: center;
}
.wputopia-product-slider__title {
font-size: 24px;
}
.wputopia-product-slider__price {
font-size: 30px;
}
.wputopia-prev {
transform: translate(20%, -50%);
}
.wputopia-next {
transform: translate(-20%, -50%);
}
}
/* Add wrapper width-based responsive styles */
@container (max-width: 750px) {
.wputopia-product-slider__content {
padding: 20px;
}
.wputopia-product-ctr {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.wputopia-product-labels {
order: 2;
}
.wputopia-product-inf {
margin-bottom: 0;
order: 1;
margin-left: 110px;
}
.wputopia-hr-vertical {
display: none;
}
}
</style>JS
<script src="https://unpkg.com/wordpress-dev-necessary/dist/necessary.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener('DOMContentLoaded', function() {
// Initialize variables
let activeSlide = 0;
const productImages = document.querySelectorAll('.wputopia-product-img__item');
const sliderItems = document.querySelectorAll('.wputopia-product-slider__item');
const prevBtn = document.querySelector('.wputopia-prev');
const nextBtn = document.querySelector('.wputopia-next');
const favBtns = document.querySelectorAll('.wputopia-product-slider__fav');
// Show initial slide
showSlide(0);
// Add event listeners for navigation buttons
if (prevBtn) {
prevBtn.addEventListener('click', function() {
if (!this.classList.contains('wputopia-disabled')) {
if (activeSlide > 0) {
activeSlide--;
showSlide(activeSlide);
}
}
});
}
if (nextBtn) {
nextBtn.addEventListener('click', function() {
if (!this.classList.contains('wputopia-disabled')) {
if (activeSlide < productImages.length - 1) {
activeSlide++;
showSlide(activeSlide);
}
}
});
}
// Add event listeners for favorite buttons
favBtns.forEach(function(btn) {
btn.addEventListener('click', function() {
const heart = this.querySelector('.wputopia-heart');
if (heart) {
heart.classList.toggle('is-active');
}
});
});
// Function to show slide
function showSlide(index) {
// Update active states
productImages.forEach(function(img) {
img.classList.remove('active');
});
sliderItems.forEach(function(item) {
item.classList.remove('active');
});
// Show active product image and slider item
if (productImages[index]) {
productImages[index].classList.add('active');
}
if (sliderItems[index]) {
sliderItems[index].classList.add('active');
}
// Update button states
if (prevBtn) {
if (index === 0) {
prevBtn.classList.add('wputopia-disabled');
} else {
prevBtn.classList.remove('wputopia-disabled');
}
}
if (nextBtn) {
if (index === productImages.length - 1) {
nextBtn.classList.add('wputopia-disabled');
} else {
nextBtn.classList.remove('wputopia-disabled');
}
}
// Update active slide index
activeSlide = index;
}
// Add swipe functionality for mobile
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('touchstart', function(event) {
touchStartX = event.touches[0].clientX;
});
document.addEventListener('touchend', function(event) {
touchEndX = event.changedTouches[0].clientX;
handleSwipe();
});
function handleSwipe() {
const swipeThreshold = 50;
const swipeDistance = touchEndX - touchStartX;
if (Math.abs(swipeDistance) > swipeThreshold) {
if (swipeDistance > 0) {
if (activeSlide > 0) {
// Swipe right
showSlide(activeSlide - 1);
}
} else {
if (activeSlide < productImages.length - 1) {
// Swipe left
showSlide(activeSlide + 1);
}
}
}
}
});
/* ]]> */
</script> That’s it. Easy-peasy.
If you like it, don’t forget to like and comment
