Effcet Overflow Loop
codes you should have for slider working
HtML Code
<div class="freshWrapperEffectOverflowLp rounded-3xl mt-10">
<!-- btn right -->
<img
id="btnRightEffectOverflowLp"
class="btnRightEffectOverflowLp"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftEffectOverflowLp"
class="btnLeftEffectOverflowLp"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperEffectOverflowLp effectLp1"
data-tartib="1"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperEffectOverflowLp effectLp2 duration-500"
data-tartib="2"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperEffectOverflowLp effectLp3 duration-500"
data-tartib="3"
>
<img src="docs/images/slide3.png " alt="" />
</div>
</div>
css Code
.wraperEffectOverflowLp {
width: 85%;
height: 500px;
margin: 0 auto;
border: 1px solid #ffffff1a;
background-color: rgba(255, 255, 255, 0.089);
display: flex;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
transform-style: preserve-3d;
display: flex;
align-items: center;
padding-inline: 5%;
}
.btnRightCssEffectOverflowLp {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: 0.7s all;
&:hover {
transform: translateY(-50%) scale(1.2);
}
}
.btnLeftCssEffectOverflowLp {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
transition: 0.7s all;
&:hover {
transform: translateY(-50%) scale(1.2);
}
}
.imagesCssEffectOverflowLp {
width: 35%;
height: 40%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 700px) {
.effectLp2 {
height: 50% !important;
}
}
.effectLp1 {
transform: perspective(900px) rotateY(40deg);
position: absolute;
left: 2%;
transition: 2s all;
z-index: 5;
}
.effectLp2 {
transform: perspective(900px) scale(1.2);
z-index: 3;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 2s all;
z-index: 20;
height: 80%;
}
.effectLp3 {
transform: perspective(900px) rotateY(-40deg);
position: absolute;
left: 63%;
transition: 2s all;
z-index: 3;
}
js Code
let _imagesWrapperEffectOverflowLp = document.querySelectorAll(
".freshSwiperEffectOverflowLp"
);
let freshWrapperEffectOverflowLp = document.querySelector(
".freshWrapperEffectOverflowLp"
);
const btnRightEffectOverflowLp = document.getElementById(
"btnRightEffectOverflowLp"
);
const btnLeftEffectOverflowLp = document.getElementById(
"btnLeftEffectOverflowLp"
);
const TimeSpeedEffectOverflowLp = 2500;
btnRightEffectOverflowLp.classList.add("btnRightCssEffectOverflowLp");
btnLeftEffectOverflowLp.classList.add("btnLeftCssEffectOverflowLp");
freshWrapperEffectOverflowLp.classList.add("wraperEffectOverflowLp");
_imagesWrapperEffectOverflowLp.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssEffectOverflowLp");
});
let flagRightEffectOverflowLp = 0;
let transRightNumbEffectOverflowLp = 0;
let flagRightClickEffectOverflowLp = 0;
btnRightEffectOverflowLp.addEventListener("click", () => {
let imgEffLp1 = document.querySelector(".effectLp1");
let imgEffLp2 = document.querySelector(".effectLp2");
let imgEffLp3 = document.querySelector(".effectLp3");
let dataTartibLp1 = imgEffLp1.getAttribute("data-tartib");
let dataTartibLp2 = imgEffLp2.getAttribute("data-tartib");
let dataTartibLp3 = imgEffLp3.getAttribute("data-tartib");
if (dataTartibLp2 == 2) {
imgEffLp2.classList.remove("effectLp2");
imgEffLp2.classList.add("effectLp1");
imgEffLp2.setAttribute("data-tartib", "1");
}
if (dataTartibLp3 == 3) {
imgEffLp3.classList.remove("effectLp3");
imgEffLp3.classList.add("effectLp2");
imgEffLp3.setAttribute("data-tartib", "2");
}
if (dataTartibLp1 == 1) {
imgEffLp1.classList.remove("effectLp1");
imgEffLp1.classList.add("effectLp3");
imgEffLp1.setAttribute("data-tartib", "3");
}
});
btnLeftEffectOverflowLp.addEventListener("click", () => {
let imgEffLp1 = document.querySelector(".effectLp1");
let imgEffLp2 = document.querySelector(".effectLp2");
let imgEffLp3 = document.querySelector(".effectLp3");
let dataTartibLp1 = imgEffLp1.getAttribute("data-tartib");
let dataTartibLp2 = imgEffLp2.getAttribute("data-tartib");
let dataTartibLp3 = imgEffLp3.getAttribute("data-tartib");
if (dataTartibLp2 == 2) {
imgEffLp2.classList.remove("effectLp2");
imgEffLp2.classList.add("effectLp3");
imgEffLp2.setAttribute("data-tartib", "3");
}
if (dataTartibLp3 == 3) {
imgEffLp3.classList.remove("effectLp3");
imgEffLp3.classList.add("effectLp1");
imgEffLp3.setAttribute("data-tartib", "1");
}
if (dataTartibLp1 == 1) {
imgEffLp1.classList.remove("effectLp1");
imgEffLp1.classList.add("effectLp2");
imgEffLp1.setAttribute("data-tartib", "2");
}
});
// loop
setInterval(() => {
btnRightEffectOverflowLp.click();
}, TimeSpeedEffectOverflowLp);