Слайдер

[html]
<style>
.gallery-container {
max-width: 1000px;
margin: 0 auto;
font-family: sans-serif;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
background: url(https://forumstatic.ru/files/001c/b9/21/67430.jpg) no-repeat center / cover ;
box-sizing: border-box;
}

.gallery-container * {
box-sizing: border-box;
}

.gallery-container h3.gallery-title {
text-align: center;
margin-top: 0;
margin-bottom: 20px;
font-family: 'Poiret One';
font-style: unset;
font-size: 70px;
background: linear-gradient(to right, rgb(88 68 40), rgb(227 203 164), rgb(76 57 30));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.gallery-container .thumbnails-window {
width: 100%;
height: 266px;
padding: 7px;
margin-bottom: 20px;
background: #282828a8;
backdrop-filter: blur(7px);
border-radius: 8px;
position: relative;
background: linear-gradient(45deg, #000000ab, #8b77666b);
}
.gallery-container .thumbnails-window::after {
content:'';
width: 100%;
height: 20px;
position: absolute;
top: -22px;
left: 0px;
background: url(https://forumstatic.ru/files/001c/b9/21/51774.png) no-repeat bottom / contain;
z-index: 5;
}

.gallery-container .thumbnails-window::-webkit-scrollbar {
height: 8px;
}
.gallery-container .thumbnails-window::-webkit-scrollbar-track {
background: #e0e0e0;
border-radius: 4px;
}
.gallery-container .thumbnails-window::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 4px;
}
.gallery-container .thumbnails-window::-webkit-scrollbar-thumb:hover {
background: #888;
}

.gallery-container .thumbnails-grid {
display: flex;
gap: 20px;
flex-wrap: wrap;
height: 100%;
padding: 15px 15px 15px 21px;
overflow: auto;
}

.gallery-container .thumbnail {
width: 126px;
height: 100px;
object-fit: cover;
border-radius: 4px;
cursor: pointer;
position: relative;
z-index: 1;
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.gallery-container .thumbnail.active {
transform: scale(1.2);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
z-index: 2;
}

.gallery-container .display-screen {
display: flex;
gap: 20px;
height: 400px;
margin-bottom: 10px;
}

.gallery-container .screen-image-box {
flex: 0 0 60%;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
overflow: hidden;
position: relative;
backdrop-filter: blur(7px);
cursor: grab;
background: linear-gradient(45deg, #000000ab, #8b77666b);
}

.gallery-container .screen-image-box.grabbing {
cursor: grabbing;
}

.gallery-container .screen-image-box img {
width: 100%;
height: 100%;
object-fit: contain;

transition: transform 0.1s ease-out;
transform-origin: center center;
}

.gallery-container .screen-text-box {
flex: 1;
padding: 26px 30px 32px 26px;
position: relative;
background: linear-gradient(45deg, #000000ab, #8b77666b);
backdrop-filter: blur(7px);
}

.gallery-container .screen-text-box #main-text {
color: #d3b99f;
padding-right: 3px;
font-size: 13px;
line-height: 1.6;
overflow-y: auto;
height: 100%;
}

.gallery-container .nav-btn::before,
.gallery-container .thumbnails-window::before,
.gallery-container .screen-image-box::before,
.gallery-container .screen-text-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: 8px;
padding: 2px;
background: linear-gradient(to right, rgb(189, 163, 128), rgb(251, 218, 165), rgb(201, 168, 123));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 4;
}

.gallery-container .controls-wrapper {
display: flex;
justify-content: center;
gap: 20px;
padding-top: 25px;
background: url(https://forumstatic.ru/files/001c/b9/21/75594.png) no-repeat top / contain;

}

.gallery-container .nav-btn {
background: linear-gradient(45deg, #000000ab, #8b77666b);
color: #f3e8d6;
backdrop-filter: blur(8px);
border: none;
border-radius: 4px;
padding: 8px 33px;
line-height: 1;
cursor: pointer;
position: relative;
font-family: 'Inter Tight';
text-transform: lowercase;
font-size: 15px;
transition: 0.4s ease-in-out;
}

.gallery-container .nav-btn:hover {
filter: brightness(1.2);
}

.gallery-container .nav-btn:active {
filter: brightness(1.4);
}

.gallery-container .zoom-controls {
position: absolute;
top: 15px;
left: 15px;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
padding: 5px;
border-radius: 6px;
z-index: 10;
user-select: none;
}

.gallery-container .zoom-btn {
background: transparent;
color: #fff;
border: none;
font-size: 22px;
line-height: 1;
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: background 0.2s;
}

.gallery-container .zoom-btn:hover {
background: rgba(255, 255, 255, 0.2);
}

.gallery-container .zoom-track {
width: 4px;
height: 60px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
margin: 5px 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

.gallery-container .zoom-fill {
width: 100%;
height: 0%;
background: #007bff;
transition: height 0.1s ease-out;
}
</style>

<div class="gallery-container">
<h3 class="gallery-title">Галерея иллюстраций</h3>

<div class="controls-wrapper">
<button class="nav-btn" id="prev-btn">❮ Назад</button>
<button class="nav-btn" id="next-btn">Вперед ❯</button>
</div>

</div>[/html][hideprofile]