Effcet Overflow
codes you should have for slider working
HtML Code
<div
class="freshWrapperEffectOverflow"
>
<!-- btn right -->
<img
id="btnRightEffectOverflow"
class="btnRightEffectOverflow"
src="docs/images/btnRight.png"
alt="#"
/>
<!-- btn left -->
<img
id="btnLeftEffectOverflow"
class="btnLeftEffectOverflow"
src="docs/images/btnLeft.png"
alt="#"
/>
<!------------------ slide 1 ------------------>
<div
class="freshSwiperEffectOverflow effect1 duration-500"
data-tartib="1"
>
<img src="docs/images/slide1.png" alt="" />
</div>
<!------------------ slide 2 ------------------>
<div
class="freshSwiperEffectOverflow effect2 duration-500"
data-tartib="2"
>
<img src="docs/images/slide2.jpg" alt="" />
</div>
<!------------------ slide 3 ------------------>
<div
class="freshSwiperEffectOverflow effect3 duration-500"
data-tartib="3"
>
<img src="docs/images/slide3.png " alt="" />
</div>
</div>
css Code
.wraperEffectOverflow {
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%;
}
.btnRightCssEffectOverflow {
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);
}
}
.btnLeftCssEffectOverflow {
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);
}
}
.imagesCssEffectOverflow {
width: 35%;
height: 40%;
display: flex;
flex-shrink: 0;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@media screen and (max-width: 700px) {
.effect2 {
height: 50% !important;
}
}
.effect1 {
transform: perspective(900px) rotateY(40deg);
position: absolute;
left: 2%;
transition: 2s all;
z-index: 5;
}
.effect2 {
transform: perspective(900px) scale(1.2);
z-index: 3;
position: absolute;
left: 50%;
transform: translateX(-50%);
transition: 2s all;
z-index: 20;
height: 80%;
}
.effect3 {
transform: perspective(900px) rotateY(-40deg);
position: absolute;
left: 63%;
transition: 2s all;
z-index: 3;
}
js Code
let _imagesWrapperEffectOverflow = document.querySelectorAll(
".freshSwiperEffectOverflow"
);
let freshWrapperEffectOverflow = document.querySelector(
".freshWrapperEffectOverflow"
);
const btnRightEffectOverflow = document.getElementById(
"btnRightEffectOverflow"
);
const btnLeftEffectOverflow = document.getElementById("btnLeftEffectOverflow");
const TimeSpeedEffectOverflow = 1500;
btnRightEffectOverflow.classList.add("btnRightCssEffectOverflow");
btnLeftEffectOverflow.classList.add("btnLeftCssEffectOverflow");
freshWrapperEffectOverflow.classList.add("wraperEffectOverflow");
_imagesWrapperEffectOverflow.forEach((imageWrap) => {
imageWrap.classList.add("imagesCssEffectOverflow");
});
let flagRightEffectOverflow = 0;
let transRightNumbEffectOverflow = 0;
let flagRightClickEffectOverflow = 0;
btnRightEffectOverflow.addEventListener("click", () => {
let imgEff1 = document.querySelector(".effect1");
let imgEff2 = document.querySelector(".effect2");
let imgEff3 = document.querySelector(".effect3");
let dataTartib1 = imgEff1.getAttribute("data-tartib");
let dataTartib2 = imgEff2.getAttribute("data-tartib");
let dataTartib3 = imgEff3.getAttribute("data-tartib");
if (dataTartib2 == 2) {
imgEff2.classList.remove("effect2");
imgEff2.classList.add("effect1");
imgEff2.setAttribute("data-tartib", "1");
}
if (dataTartib3 == 3) {
imgEff3.classList.remove("effect3");
imgEff3.classList.add("effect2");
imgEff3.setAttribute("data-tartib", "2");
}
if (dataTartib1 == 1) {
imgEff1.classList.remove("effect1");
imgEff1.classList.add("effect3");
imgEff1.setAttribute("data-tartib", "3");
}
});
btnLeftEffectOverflow.addEventListener("click", () => {
let imgEff1 = document.querySelector(".effect1");
let imgEff2 = document.querySelector(".effect2");
let imgEff3 = document.querySelector(".effect3");
let dataTartib1 = imgEff1.getAttribute("data-tartib");
let dataTartib2 = imgEff2.getAttribute("data-tartib");
let dataTartib3 = imgEff3.getAttribute("data-tartib");
if (dataTartib2 == 2) {
imgEff2.classList.remove("effect2");
imgEff2.classList.add("effect3");
imgEff2.setAttribute("data-tartib", "3");
}
if (dataTartib3 == 3) {
imgEff3.classList.remove("effect3");
imgEff3.classList.add("effect1");
imgEff3.setAttribute("data-tartib", "1");
}
if (dataTartib1 == 1) {
imgEff1.classList.remove("effect1");
imgEff1.classList.add("effect2");
imgEff1.setAttribute("data-tartib", "2");
}
});