Trying to create this image replacement carousel. There is a transform in the x axis and a fade – what is the best approach at making something custom.
Being able to control the transition and duration of the swiper. Have the option of adding arrows and dot navigation later.
https://jsfiddle.net/xezhp6qa/5/
$(document).ready(function() {
console.log("ready")
var myElement = $(".phone-slide");
function setTransform(xPos, el) {
el.style.transform = `transition: all; transform: translateX(${xPos}px); opacity: 1; z-index: 798; visibility: hidden;`;
}
var count = 0;
setInterval(function() {
console.log("interval---")
setTransform(-200*count, myElement[0])
count++;
}, 3000);
});.section.light-blue-bg {
background-color: #f4f8fb;
}
.container.phone-container {
padding-top: 6rem;
padding-bottom: 0rem;
}
.container {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
padding: 3rem 1em;
}
@media screen and (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
.grid-6-col {
width: 100%;
grid-column-gap: 1em;
grid-row-gap: 1em;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
}
#w-node-a136e70e-a0ad-9d01-ec68-2e537ec8b5e7-ac768e33 {
-ms-grid-column: span 3;
grid-column-start: span 3;
-ms-grid-column-span: 3;
grid-column-end: span 3;
-ms-grid-row: span 1;
grid-row-start: span 1;
-ms-grid-row-span: 1;
grid-row-end: span 1;
}
#w-node-_137c2bb4-4509-ee79-0592-7207c42c0509-ac768e33 {
-ms-grid-column: span 3;
grid-column-start: span 3;
-ms-grid-column-span: 3;
grid-column-end: span 3;
-ms-grid-row: span 1;
grid-row-start: span 1;
-ms-grid-row-span: 1;
grid-row-end: span 1;
}
.phone-holder-container {
position: relative;
z-index: 2;
overflow: hidden;
height: 750px;
}
.phone-slider-container {
position: absolute;
left: 75px;
top: 25px;
right: auto;
z-index: -1;
width: 239px;
height: 511px;
background-color: rgba(250, 88, 83, 0.61);
}
img {
display: inline-block;
max-width: 100%;
}
.phone-holder-image {
width: 530px;
min-width: 530px;
}
.w-slider {
position: relative;
height: 300px;
text-align: center;
background: #dddddd;
clear: both;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
}
.phone-slider {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
}
.w-slider-mask {
position: relative;
display: block;
overflow: hidden;
z-index: 1;
left: 0;
right: 0;
height: 100%;
white-space: nowrap;
}
.phone-slider-mask {
width: 100%;
height: 100%;
}
.phone-slide {
position: relative;
}
.phone-slide-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.w-slider-arrow-left, .w-slider-arrow-right {
position: absolute;
width: 80px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
cursor: pointer;
overflow: hidden;
color: white;
font-size: 40px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.w-slider-arrow-left {
z-index: 3;
right: auto;
}
.phone-slider-arrows {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="Download" class="section light-blue-bg" style="will-change: background; background-color: rgb(244, 248, 251);">
<div class="container phone-container">
<div class="w-layout-grid grid-6-col">
<div id="w-node-a136e70e-a0ad-9d01-ec68-2e537ec8b5e7-ac768e33" class="content phone-content-text">
xxx
</div>
<div id="w-node-_137c2bb4-4509-ee79-0592-7207c42c0509-ac768e33" class="content">
<div data-w-id="6bff453a-e257-79ae-5a82-6ee7a87dc6d0" style="opacity: 1;" class="phone-holder-container">
<div class="phone-slider-container">
<div data-delay="3000" data-animation="fade" class="phone-slider w-slider" data-autoplay="true" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true" role="region" aria-label="carousel">
<div class="phone-slider-mask w-slider-mask" id="w-slider-mask-0">
<div class="phone-slide w-slide" aria-label="1 of 3" role="group" style="transition: all; transform: translateX(0px); opacity: 1; z-index: 540;" aria-hidden="true"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White.jpg" loading="lazy" sizes="(max-width: 479px) 158px, 239px" srcset="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White-p-500.jpeg 500w, https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5ee9f5d3561967d646_ChatList-White.jpg 750w" alt="" class="phone-slide-image" aria-hidden="true"></div>
<div class="phone-slide w-slide" aria-label="2 of 3" role="group" style="transition: all, opacity 500ms; transform: translateX(-239px); opacity: 1; z-index: 541;"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5d2582aa2cb7e78d36_Calendar1.png" loading="lazy" sizes="(max-width: 479px) 158px, 239px" srcset="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5d2582aa2cb7e78d36_Calendar1-p-500.png 500w, https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5d2582aa2cb7e78d36_Calendar1.png 1125w" alt="" class="phone-slide-image"></div>
<div class="phone-slide w-slide" aria-label="3 of 3" role="group" style="transition: all; transform: translateX(0px); opacity: 1; z-index: 539; visibility: hidden;" aria-hidden="true"><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5db64f644b318b64f9_Calendar2.png" loading="lazy" sizes="(max-width: 479px) 158px, 239px" srcset="https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5db64f644b318b64f9_Calendar2-p-500.png 500w, https://assets.website-files.com/604b35876a71cbbd84768e36/604d4b5db64f644b318b64f9_Calendar2.png 1125w" alt="" class="phone-slide-image" aria-hidden="true"></div>
<div aria-live="off" aria-atomic="true" class="w-slider-aria-label" data-wf-ignore="">Slide 2 of 3.</div>
</div>
<div class="phone-slider-arrows w-slider-arrow-left" role="button" tabindex="0" aria-controls="w-slider-mask-0" aria-label="previous slide">
<div class="w-icon-slider-left"></div>
</div>
<div class="phone-slider-arrows w-slider-arrow-right" role="button" tabindex="0" aria-controls="w-slider-mask-0" aria-label="next slide" style="">
<div class="w-icon-slider-right"></div>
</div>
<div class="phone-slide-nav w-slider-nav w-round">
<div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 1 of 3" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
<div class="w-slider-dot w-active" data-wf-ignore="" aria-label="Show slide 2 of 3" aria-pressed="true" role="button" tabindex="0" style="margin-left: 3px; margin-right: 3px;"></div>
<div class="w-slider-dot" data-wf-ignore="" aria-label="Show slide 3 of 3" aria-pressed="false" role="button" tabindex="-1" style="margin-left: 3px; margin-right: 3px;"></div>
</div>
</div>
</div><img src="https://assets.website-files.com/604b35876a71cbbd84768e36/604dfffd690126842fd21112_Hand-iPhoneX.png" loading="lazy" alt="" class="phone-holder-image">
</div>
</div>
</div>
</div>
</div>