Если вы хотите создать простой, но эффективный слайдер изображений на своем сайте или в блоге, то этот слайдер для вас! Вы сможете посмотреть видео демонстрацию самого слайдера, скопировать код или скачать архив с готовым кодом. Если вы новичок в HTML, CSS и JavaScript, то данный слайдер отличное начало для обучения.
-min.png)
HTML КОД:
<div class="container">
<div id="slide">
<div class="item" style="background-image: url(images/01.jpg);">
<div class="content">
<div class="name">Озеро Рица</div>
<div class="des">Горное озеро ледниково тектонического происхождения на Западном Кавказе, в Абхазии, в Гудаутском районе.</div>
<button>Подробнее</button>
</div>
</div>
<div class="item" style="background-image: url(images/03.jpeg);">
<div class="content">
<div class="name"><h3>Торнадо</h3></div>
<div class="des"><p>Атмосферный вихрь, возникающий в кучево-дождевом облаке и распространяющийся вниз, часто до самой поверхности земли, в виде облачного рукава или хобота диаметром в десятки и сотни метров.</p></div>
<button>Подробнее</button>
</div>
</div>
<div class="item" style="background-image: url(images/04.jpg);">
<div class="content">
<div class="name">Плато Бермамыт</div>
<div class="des">Вершина в составе Скалистого хребта на северном склоне системы Большого Кавказа (горная страна Кавказские горы, регион Северный Кавказ).</div>
<button>Подробнее</button>
</div>
</div>
<div class="item" style="background-image: url(images/05.jpg);">
<div class="content">
<div class="name">Йеллоустоун</div>
<div class="des">Один из самых посещаемых в Америке, находится на севере страны, на территории трех штатов — Вайоминга, Монтаны и Айдахо. </div>
<button>Подробнее</button>
</div>
</div>
<div class="item" style="background-image: url(images/02.jpg);">
<div class="content">
<div class="name">Мельбурн</div>
<div class="des">Второй по величине город Австралии после Сиднея, столица штата Виктория, расположившаяся вокруг залива Порт-Филлип.</div>
<button>Подробнее</button>
</div>
</div>
<div class="item" style="background-image: url(images/06.jpg);">
<div class="content">
<div class="name">Красное Море</div>
<div class="des">Внутреннее море Индийского океана, расположенное между Аравийским полуостровом и Африкой в тектонической впадине.</div>
<button>Подробнее</button>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fa-solid fa-angle-left"></i></button>
<button id="next"><i class="fa-solid fa-angle-right"></i></button>
</div>
</div>
CSS КОД:
.container{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
width:1000px;
height:600px;
padding:50px;
background-color: #f5f5f5;
box-shadow: 0 30px 50px #dbdbdb;
border-radius: 10px;
}
#slide{
width:max-content;
margin-top:50px;
}
.item{
width:200px;
height:300px;
background-position: 50% 50%;
display: inline-block;
transition: 0.5s;
background-size: cover;
position: absolute;
z-index: 1;
top:50%;
transform: translate(0,-50%);
border-radius: 20px;
box-shadow: 0 30px 50px #505050;
}
.item:nth-child(1),
.item:nth-child(2){
left:0;
top:0;
transform: translate(0,0);
border-radius: 10px;
width:100%;
height:100%;
box-shadow: none;
}
.item:nth-child(3){
left:50%;
}
.item:nth-child(4){
left:calc(50% + 220px);
}
.item:nth-child(5){
left:calc(50% + 440px);
}
.item:nth-child(n+6){
left:calc(50% + 660px);
opacity: 0;
}
.item .content{
position: absolute;
top:50%;
left:100px;
width:380px;
text-align: left;
padding:0;
color:#eee;
transform: translate(0,-50%);
display: none;
font-family: system-ui;
}
.item:nth-child(2) .content{
display: block;
z-index: 11111;
}
.item .name{
font-size: 40px;
font-weight: bold;
opacity: 0;
animation:showcontent 1s ease-in-out 1 forwards;
}
.item .name h3{
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
margin: 0;
}
.item .des{
margin:20px 0;
opacity: 0;
animation:showcontent 1s ease-in-out 0.3s 1 forwards;
}
.item .des p{
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.item button{
background: #fff;
padding:10px 20px;
border:none;
opacity: 0;
animation:showcontent 1s ease-in-out 0.6s 1 forwards;
cursor: pointer;
border-radius: 8px;
transition: all 0.5s ease-in-out;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.item button:hover{
box-shadow: 0 4px 20px #eaeaea;
}
@keyframes showcontent{
from{
opacity: 0;
transform: translate(0,100px);
filter:blur(33px);
}
to{
opacity: 1;
transform: translate(0,0);
filter:blur(0);
}
}
.buttons{
position: absolute;
bottom:30px;
z-index: 222222;
text-align: center;
width:100%;
}
.buttons button{
background-color: #fff;
width:50px;
height:50px;
border-radius: 25%;
border:1px solid #555;
transition: 0.5s;
cursor: pointer;
}
.buttons button:hover{
background-color: #fff;
box-shadow: 0 4px 20px #eaeaea;
}
JAVASCRIPT КОД:
document.getElementById('next').onclick = function(){
let lists = document.querySelectorAll('.item');
document.getElementById('slide').appendChild(lists[0]);
}
document.getElementById('prev').onclick = function(){
let lists = document.querySelectorAll('.item');
document.getElementById('slide').prepend(lists[lists.length - 1]);
}
0 Комментарии