$(document).ready(function() {
$('div.left').show("slow")
})
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
body {
margin:0;
padding:0;
font-family: "Montserrat", sans-serif;
font-size: 25px;
}
#backjs {
position: fixed;
height: 100%;
width: 100%;
display:flex;
flex-direction:column;
}
.inner__block {
display: none;
background-image: linear-gradient(rgba(17,17,17,0.69),rgba(17,17,17,0.69));
width: 40%;
height: 450px;
margin-left: 50px;
margin-right: 50px;
border-radius: 20px;
}
.inner__block:first-child { display: block; }
.inner {
display: flex;
justify-content:center;
width:100%;
margin-bottom:auto;
}
.heading {
margin-top:auto;
display:flex;
justify-content:center;
padding-bottom:15px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<section id="backjs">
<div class="heading"><H1>Heading</H1></div>
<div class="inner">
<div class="inner__block">1</div>
<div class="inner__block">2</div>
<div class="inner__block">3</div>
<div class="inner__block">4</div>
<div class="inner__block">5</div>
<div class="inner__block">6</div>
<div class="inner__block">7</div>
<div class="inner__block">8</div>
<div class="inner__block">9</div>
<div class="inner__block">10</div>
</div>
</section>
<script type="text/javascript">
"use strict";
const selectorNameBl = ".inner__block";
const drTime = 1000;
$(selectorNameBl).on("click", function() {
let that = $(this);
let next = $(this).next();
that.fadeOut(drTime, function () {
if (next.length !== 0) next.fadeIn(drTime);
else $(`${selectorNameBl}:first-child`).fadeIn(drTime);
});
});
</script>
</body>
</html>
Средний
Простой