Slider Curved Background

Lien d’origine: https://codepen.io/mrspok407/pen/NRxBWa

HTML:

<section class="sliderBackground2">
<div class="cont">
<div class="app initial">
<div class="app__bgimg">
<div class="app__bgimg-image app__bgimg-image--1"></div>
</div>
<div class="app__img">
<img
onmousedown="return false"
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png"
alt="city"
/>
</div>
<div class="app__text app__text--1">
<div class="app__text-line app__text-line--4">imperdiet</div>
<div class="app__text-line app__text-line--3">ut le</div>
<div class="app__text-line app__text-line--2">non tincidunt</div>
<div class="app__text-line app__text-line--1">
<img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png"
alt=""
/>
</div>
</div>
<div class="app__text app__text--2">
<div class="app__text-line app__text-line--4">habitant</div>
<div class="app__text-line app__text-line--3">ut eget</div>
<div class="app__text-line app__text-line--2">Nam imperdiet</div>
<div class="app__text-line app__text-line--1">
<img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png"
alt=""
/>
</div>
</div>
</div>
<div class="pages">
<ul class="pages__list">
<li
data-target="1"
class="pages__item pages__item--1 page__item-active"
></li>
<li data-target="2" class="pages__item pages__item--2"></li>
</ul>
</div>
</div>
<a
href="https://dribbble.com/shots/2936160-Opus-Animation"
target="_blank"
class="icon-link"
>
</div>
</a>
<a
href="https://twitter.com/mrspok407"
target="_blank"
class="icon-link icon-link--twitter"
>
</a>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://localhost/wordpress/wp-content/themes/theme-bulma-v4.1.2/js/Curved_background.js"></script> 
</section>

CSS:

@keyframes scroll {
100% {
transform: translate(-50%, 15px);
}
}
.sliderBackground2 .pages {
margin-left: 20px;
}
.sliderBackground2 .pages__list {
list-style-type: none;
}
.sliderBackground2 .pages__item {
position: relative;
margin-bottom: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 3px solid #fff;
cursor: pointer;
}
.sliderBackground2 .pages__item:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0, 0);
width: 75%;
height: 75%;
border-radius: 50%;
background-color: #fff;
opacity: 0;
transition: 500ms;
}
.sliderBackground2 .pages__item:hover:after {
transform: translate(-50%, -50%) scale(1, 1);
opacity: 1;
}
.sliderBackground2 .page__item-active:after {
transform: translate(-50%, -50%) scale(1, 1);
opacity: 1;
}
.sliderBackground2 .icon-link {
position: absolute;
left: 5px;
bottom: 5px;
width: 50px;
}
.sliderBackground2 .icon-link img {
width: 100%;
vertical-align: top;
}
.sliderBackground2 .icon-link--twitter {
left: auto;
right: 5px;
}

JS:

$(document).ready(function () {
const $app = $(".app");
const $img = $(".app__img");
const $pageNav1 = $(".pages__item--1");
const $pageNav2 = $(".pages__item--2");
let animation = true;
let curSlide = 1;
let scrolledUp, nextSlide;
let pagination = function (slide, target) {
animation = true;
if (target === undefined) {
nextSlide = scrolledUp ? slide - 1 : slide + 1;
} else {
nextSlide = target;
}
$(".pages__item--" + nextSlide).addClass("page__item-active");
$(".pages__item--" + slide).removeClass("page__item-active");

$app.toggleClass("active");
setTimeout(function () {
animation = false;
}, 3000);
};
let navigateDown = function () {
if (curSlide > 1) return;
scrolledUp = false;
pagination(curSlide);
curSlide++;
};
let navigateUp = function () {
if (curSlide === 1) return;
scrolledUp = true;
pagination(curSlide);
curSlide--;
};
setTimeout(function () {
$app.addClass("initial");
}, 1500);
setTimeout(function () {
animation = false;
}, 4500);
$(document).on("mousewheel DOMMouseScroll", function (e) {
var delta = e.originalEvent.wheelDelta;
if (animation) return;
if (delta > 0 || e.originalEvent.detail < 0) {
navigateUp();
} else {
navigateDown();
}
});
$(document).on(
"click",
".pages__item:not(.page__item-active)",
function () {
if (animation) return;
let target = +$(this).attr("data-target");
pagination(curSlide, target);
curSlide = target;
}
);
});