Необычная карусель для сайта 001

Карусель разрабатывалась для сайта "СОИК" по желанию клиента. Полностью мой код. Разработана с использованием библиотеки Owl Carousel.

HTML

	<div class="container-001" style="background-image: url(assets/images/mainbackground.jpeg);">
		<div class="container-001-content">

			<div id="block01" class="container-001__upblock visible">
				<div class="container-001__upblock-left">
				<div class="container-001__upblock-mainblock">
					<p class="container-001__upblock-mainblock-text">
						Разработка технологических цепочек1
					</p>
					<img class="container-001__upblock-mainblock-img" src="assets/images/mainicon001.png" alt="">
				</div>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
				<div class="container-001__upblock-mainblock-button">
					<a class="container-001__upblock-mainblock-button-link" href="">К УСЛУГЕ</a>
				</div>
				</div>
				<div class="container-001__upblock-right">
					
				</div>
			</div>

			<div id="block02" class="container-001__upblock notvisible">
				<div class="container-001__upblock-left">
				<div class="container-001__upblock-mainblock">
					<p class="container-001__upblock-mainblock-text">
						Разработка технологических цепочек2
					</p>
					<img class="container-001__upblock-mainblock-img" src="assets/images/mainicon001.png" alt="">
				</div>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
				<div class="container-001__upblock-mainblock-button">
					<a class="container-001__upblock-mainblock-button-link" href="">К УСЛУГЕ</a>
				</div>
				</div>
				<div class="container-001__upblock-right">
					
				</div>
			</div>

			<div id="block03" class="container-001__upblock notvisible">
				<div class="container-001__upblock-left">
				<div class="container-001__upblock-mainblock">
					<p class="container-001__upblock-mainblock-text">
						Разработка технологических цепочек3
					</p>
					<img class="container-001__upblock-mainblock-img" src="assets/images/mainicon001.png" alt="">
				</div>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
				<div class="container-001__upblock-mainblock-button">
					<a class="container-001__upblock-mainblock-button-link" href="">К УСЛУГЕ</a>
				</div>
				</div>
				<div class="container-001__upblock-right">
					
				</div>
			</div>

			<div id="block04" class="container-001__upblock notvisible">
				<div class="container-001__upblock-left">
				<div class="container-001__upblock-mainblock">
					<p class="container-001__upblock-mainblock-text">
						Разработка технологических цепочек4
					</p>
					<img class="container-001__upblock-mainblock-img" src="assets/images/mainicon001.png" alt="">
				</div>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p class="container-001__upblock-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
				<div class="container-001__upblock-mainblock-button">
					<a class="container-001__upblock-mainblock-button-link" href="">К УСЛУГЕ</a>
				</div>
				</div>
				<div class="container-001__upblock-right">
					
				</div>
			</div>

			<div class="container-001__downblock">
				<div id="carousel-one" class="container-001__downblock-items owl-carousel owl-theme">
					
					<div id="pre01" class="container-001__downblock-items-itm">
						<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек1</p>
						<div class="container-001__downblock-items-itm-info">
							<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
						</div>
					</div>

					<div id="pre02" class="container-001__downblock-items-itm">
						<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек2</p>
						<div class="container-001__downblock-items-itm-info">
							<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
						</div>
					</div>

					<div id="pre03" class="container-001__downblock-items-itm">
						<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек3</p>
						<div class="container-001__downblock-items-itm-info">
							<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
						</div>
					</div>

					<div id="pre04" class="container-001__downblock-items-itm">
						<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек4</p>
						<div class="container-001__downblock-items-itm-info">
							<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
						</div>
					</div>

				</div>
			</div>

		</div>
	</div>

CSS

.container-001 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 120px 0 0 0;}
.container-001-content {
    position: relative;
    /*height: calc(100vh - 100px);*/
    height: 500px;
    width: 1200px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 15px 10px 15px 10px;}
.container-001__upblock {
    position: absolute;
    top: 10px;
    width: 100%;}
.container-001__upblock-left {
    width: 700px;
    background-color: #ffffffb3;
    padding: 20px;
    border: 2px solid #ffffff;}
.container-001__upblock-mainblock {
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;}
.container-001__upblock-mainblock p.container-001__upblock-mainblock-text {
    margin: 0;
    font-family: 'Alaskan';
    line-height: 1;
    font-size: 27px;
    font-weight: 700;
    color: #000000;}
.container-001__upblock-mainblock img.container-001__upblock-mainblock-img {
    width: 90px;
    height: auto;}
.container-001__upblock-left p.container-001__upblock-text {
    margin: 0 0 10px 0;
    font-family: 'Alaskan';
    line-height: 1;
    font-size: 18px;
    color: #000000;}
.container-001__upblock-mainblock-button a.container-001__upblock-mainblock-button-link {
    text-decoration: none;
    background-color: #4a85ad;
    padding: 7px 30px;
    color: #ffffff;
    font-family: 'Alaskan';
    line-height: 1;
    font-size: 12px;
    border-radius: 5px;
    transition: 0.5s;}
.container-001__upblock-mainblock-button a.container-001__upblock-mainblock-button-link:hover {
    background-color: #3f5f74;
    transition: 0.5s;}
.container-001__downblock-items {
    display: flex;
    justify-content: space-around;}
.container-001__downblock-items-itm {
    width: 300px;
    background-color: #ffffffb3;
    padding: 20px;
    border: 2px solid #ffffff;
    margin: auto;}
.container-001__downblock-items-itm p.container-001__downblock-items-itm-maintext {
    height: 50px;
    margin: 0;
    font-family: 'Alaskan';
    line-height: 1;
    font-size: 17px;
    font-weight: 700;
    color: #000000;}
.container-001__downblock-items-itm-info {
    display: flex;
    justify-content: space-between;
    align-items: center;}
.container-001__downblock-items-itm-info p.container-001__downblock-items-itm-info-text {
    width: 180px;
    height: 70px;
    margin: 0;
    font-family: 'Alaskan';
    line-height: 1;
    font-size: 14px;
    color: #000000;}
.container-001__downblock-items-itm-info img.container-001__downblock-items-itm-info-img {
    width: 60px;
    height: auto;}
#carousel-one .owl-item img {
    display: block;
    width: 70px;}

.visible {
    opacity: 1;
    top: 10px;
    transition: 2s;}
.notvisible {
    opacity: 0;
    top: -300px;
    transition: 2s;}
.off-element {
    width: 0!important;
    display: none;}

JS

$(document).ready(function() {
	console.log ('страница загружена')
});





$('#pre01').click(function() {
	console.log ('кликнули по 1 элементу');
    $('#block01').removeClass('notvisible');
    $('#block01').addClass('visible');

    $('#block02').removeClass('visible');
    $('#block02').addClass('notvisible');
    $('#block03').removeClass('visible');
    $('#block03').addClass('notvisible');
    $('#block04').removeClass('visible');
    $('#block04').addClass('notvisible');

    $('#pre01').parent().addClass('off-element');
    $('#pre02').parent().removeClass('off-element');
    $('#pre03').parent().removeClass('off-element');
    $('#pre04').parent().removeClass('off-element');
});

$('#pre02').click(function() {
	console.log ('кликнули по 2 элементу');
    $('#block02').removeClass('notvisible');
    $('#block02').addClass('visible');

    $('#block01').removeClass('visible');
    $('#block01').addClass('notvisible');
    $('#block03').removeClass('visible');
    $('#block03').addClass('notvisible');
    $('#block04').removeClass('visible');
    $('#block04').addClass('notvisible');

    $('#pre02').parent().addClass('off-element');
    $('#pre01').parent().removeClass('off-element');
    $('#pre03').parent().removeClass('off-element');
    $('#pre04').parent().removeClass('off-element');
});

$('#pre03').click(function() {
	console.log ('кликнули по 3 элементу');
    $('#block03').removeClass('notvisible');
    $('#block03').addClass('visible');

    $('#block01').removeClass('visible');
    $('#block01').addClass('notvisible');
    $('#block02').removeClass('visible');
    $('#block02').addClass('notvisible');
    $('#block04').removeClass('visible');
    $('#block04').addClass('notvisible');

    $('#pre03').parent().addClass('off-element');
    $('#pre01').parent().removeClass('off-element');
    $('#pre02').parent().removeClass('off-element');
    $('#pre04').parent().removeClass('off-element');
});

$('#pre04').click(function() {
	console.log ('кликнули по 4 элементу');
    $('#block04').removeClass('notvisible');
    $('#block04').addClass('visible');

    $('#block01').removeClass('visible');
    $('#block01').addClass('notvisible');
    $('#block02').removeClass('visible');
    $('#block02').addClass('notvisible');
    $('#block03').removeClass('visible');
    $('#block03').addClass('notvisible');

    $('#pre04').parent().addClass('off-element');
    $('#pre01').parent().removeClass('off-element');
    $('#pre02').parent().removeClass('off-element');
    $('#pre03').parent().removeClass('off-element');
});