В этом видео вы узнаете, как создать целевую страницу веб-сайта с современным перетаскиваемым слайдером изображений с просмотром в виде большого пальца с использованием HTML, CSS и Javascript.
HTML КОД:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website Landing Page With Full Screen Draggable Image Slider - Html, Css & Javascript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<header>
<div class="nav-bar">
<a href="" class="logo">Logo</a>
<div class="navigation">
<div class="nav-items">
<i class="uil uil-times nav-close-btn"></i>
<a href="#"><i class="uil uil-home"></i> Home</a>
<a href="#"><i class="uil uil-compass"></i> Explore</a>
<a href="#"><i class="uil uil-info-circle"></i> About</a>
<a href="#"><i class="uil uil-document-layout-left"></i> Blog</a>
<a href="#"><i class="uil uil-envelope"></i> Contact</a>
</div>
</div>
<i class="uil uil-apps nav-menu-btn"></i>
</div>
</header>
<section class="home">
<div class="media-icons">
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-twitter"></i></a>
</div>
<div class="swiper bg-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/bg1.jpg" alt="">
<div class="text-content">
<h2 class="title">Autumn <span>Season</span></h2>
<p>Autumn, also known as fall in North American English, is one of the four temperate
seasons. Outside the tropics, autumn marks the transition from summer to winter,
in September or March. Autumn is the season when the duration of daylight becomes
noticeably shorter and the temperature cools considerably.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="swiper-slide dark-layer">
<img src="images/bg2.jpg" alt="">
<div class="text-content">
<h2 class="title">Winter <span>Season</span></h2>
<p>Winter is the coldest season of the year in polar and temperate zones. It occurs
between autumn and spring.The tilt of Earth's axis causes seasons; winter occurs
when a hemisphere is oriented away from the Sun. Different cultures define different
dates as the start of winter, and some use a definition based on weather.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="swiper-slide dark-layer">
<img src="images/bg3.jpg" alt="">
<div class="text-content">
<h2 class="title">Summer <span>Season</span></h2>
<p>Summer is the hottest of the four temperate seasons, occurring after spring and
before autumn. At or aroundthe summer solstice, the earliest sunrise and latest
sunset occurs, daylight hours are longest and dark hours are shortest, with day
length decreasing as the season progresses after the solstice.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
<div class="swiper-slide">
<img src="images/bg4.jpg" alt="">
<div class="text-content">
<h2 class="title">Spring <span>Season</span></h2>
<p>Spring, also known as springtime, is one of the four temperate seasons, succeeding
winter and preceding summer. There are various technical definitions of spring, but
local usage of the term varies according to local climate, cultures and customs. When
it is spring in the Northern Hemisphere, it is autumn in the Southern Hemisphere and
vice versa.</p>
<button class="read-btn">Read More <i class="uil uil-arrow-right"></i></button>
</div>
</div>
</div>
</div>
<div class="bg-slider-thumbs">
<div class="swiper-wrapper thumbs-container">
<img src="images/bg1.jpg" class="swiper-slide" alt="">
<img src="images/bg2.jpg" class="swiper-slide" alt="">
<img src="images/bg3.jpg" class="swiper-slide" alt="">
<img src="images/bg4.jpg" class="swiper-slide" alt="">
</div>
</div>
</section>
<section class="about section">
<h2>Seasons of the year</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS КОД:
/*============ Google fonts ============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*======= CSS variables =======*/
:root{
--white-color: #fff;
--dark-color: #222;
--body-bg-color: #fff;
--section-bg-color: #202834;
--navigation-item-hover-color: #3b5378;
--text-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
--box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
--scroll-bar-color: #fff;
--scroll-thumb-color: #282f4e;
--scroll-thumb-hover-color: #454f6b;
}
/*======= Scroll bar =======*/
::-webkit-scrollbar{
width: 11px;
background: var(--scroll-bar-color);
}
::-webkit-scrollbar-thumb{
width: 100%;
background: var(--scroll-thumb-color);
border-radius: 2em;
}
::-webkit-scrollbar-thumb:hover{
background: var(--scroll-thumb-hover-color);
}
/*======= Main CSS =======*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background: var(--body-bg-color);
}
section{
position: relative;
}
.section{
color: var(--white-color);
background: var(--section-bg-color);
padding: 35px 200px;
transition: 0.3s ease;
}
/*======= Header =======*/
header{
z-index: 999;
position: fixed;
width: 100%;
height: calc(5rem + 1rem);
top: 0;
left: 0;
display: flex;
justify-content: center;
transition: 0.5s ease;
transition-property: height, background;
}
header.sticky{
height: calc(2.5rem + 1rem);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
header .nav-bar{
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 200px;
transition: 0.3s ease;
}
.nav-close-btn, .nav-menu-btn{
display: none;
}
.nav-bar .logo{
color: var(--white-color);
font-size: 1.8em;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
text-shadow: var(--text-shadow);
}
.navigation .nav-items a{
color: var(--white-color);
font-size: 1em;
text-decoration: none;
text-shadow: var(--text-shadow);
}
.navigation .nav-items a i{
display: none;
}
.navigation .nav-items a:not(:last-child){
margin-right: 45px;
}
/*======= Home =======*/
.home{
min-height: 100vh;
}
.home:before{
z-index: 888;
content: '';
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
left: 0;
background: linear-gradient(transparent, var(--section-bg-color));
}
/*======= Background slider =======*/
.bg-slider{
z-index: 777;
position: relative;
width: 100%;
min-height: 100vh;
}
.bg-slider .swiper-slide{
position: relative;
width: 100%;
height: 100vh;
}
.bg-slider .swiper-slide img{
width: 100%;
height: 100vh;
object-fit: cover;
background-position: center;
background-size: cover;
pointer-events: none;
}
.swiper-slide .text-content{
position: absolute;
top: 25%;
color: var(--white-color);
margin: 0 200px;
transition: 0.3s ease;
}
.swiper-slide .text-content .title{
font-size: 4em;
font-weight: 700;
text-shadow: var(--text-shadow);
margin-bottom: 20px;
transform: translateY(-50px);
opacity: 0;
}
.swiper-slide-active .text-content .title{
transform: translateY(0);
opacity: 1;
transition: 1s ease;
transition-delay: 0.3s;
transition-property: transform, opacity;
}
.swiper-slide .text-content .title span{
font-size: 0.3em;
font-weight: 300;
}
.swiper-slide .text-content p{
max-width: 700px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
text-shadow: var(--text-shadow);
padding: 20px;
border-radius: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--box-shadow);
transform: translateX(-80px);
opacity: 0;
}
.swiper-slide-active .text-content p{
transform: translateX(0);
opacity: 1;
transition: 1s ease;
transition-delay: 0.3s;
transition-property: transform, opacity;
}
.swiper-slide .text-content .read-btn{
border: none;
outline: none;
background: var(--white-color);
color: var(--dark-color);
font-size: 1em;
font-weight: 500;
padding: 8px 25px;
display: flex;
align-items: center;
margin-top: 40px;
border-radius: 10px;
cursor: pointer;
transform: translateX(50px);
opacity: 0;
}
.swiper-slide-active .text-content .read-btn{
transform: translateX(0);
opacity: 1;
transition: 1s ease;
transition-delay: 0.3s;
transition-property: transform, opacity;
}
.swiper-slide .text-content .read-btn i{
font-size: 1.6em;
transition: 0.3s ease;
}
.swiper-slide .text-content .read-btn:hover i{
transform: translateX(5px);
}
.dark-layer:before{
content: '';
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
}
.bg-slider-thumbs{
z-index: 777;
position: absolute;
bottom: 7em;
left: 50%;
transform: translateX(-50%);
transition: 0.3s ease;
}
.thumbs-container{
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 10px 3px;
border-radius: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--box-shadow);
}
.thumbs-container img{
width: 50px;
height: 35px;
margin: 0 5px;
border-radius: 5px;
cursor: pointer;
}
.swiper-slide-thumb-active{
border: 1px solid var(--white-color);
}
/*======= Media icons =======*/
.media-icons{
z-index: 999;
position: absolute;
display: flex;
flex-direction: column;
top: 50%;
transform: translateY(-50%);
margin-left: 90px;
}
.media-icons a{
color: var(--white-color);
font-size: 1.7em;
margin: 10px 0;
}
/*======= About section =======*/
.about h2{
font-size: 3em;
font-weight: 600;
}
.about p{
margin: 25px 0;
}
/*======= Media queries (max-width: 1100px) =======*/
@media screen and (max-width: 1100px){
header .nav-bar{
padding: 0 50px;
}
.section{
padding: 25px 50px;
}
.media-icons{
right: 0;
margin-right: 50px;
}
.swiper-slide .text-content{
margin: 0 120px 0 50px;
}
.bg-slider-thumbs{
bottom: 3em;
}
}
/*======= Media queries (max-width: 785px) =======*/
@media screen and (max-width: 785px){
header .nav-bar{
padding: 25px 20px;
}
.section{
padding: 25px 20px;
}
.media-icons{
margin-right: 20px;
}
.media-icons a{
font-size: 1.5em;
}
.swiper-slide .text-content{
margin: 0 70px 0 20px;
}
.swiper-slide .text-content .title{
font-size: 3em;
}
.swiper-slide .text-content .title span{
font-size: 0.35em;
}
.swiper-slide .text-content p{
font-size: 0.9em;
}
/*======= Navigation menu =======*/
.nav-menu-btn{
display: block;
color: var(--white-color);
font-size: 1.5em;
cursor: pointer;
}
.nav-close-btn{
display: block;
color: var(--dark-color);
position: absolute;
top: 0;
right: 0;
font-size: 1.3em;
margin: 10px;
cursor: pointer;
transition: 0.3s ease;
}
.navigation{
z-index: 99999;
position: fixed;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.25);
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
}
.navigation.active{
visibility: visible;
opacity: 1;
}
.navigation .nav-items{
position: relative;
background: var(--white-color);
width: 400px;
max-width: 400px;
display: grid;
place-content: center;
margin: 20px;
padding: 40px;
border-radius: 20px;
box-shadow: var(--box-shadow);
transform: translateY(-200px);
transition: 0.3s ease;
}
.navigation.active .nav-items{
transform: translateY(0);
}
.navigation .nav-items a{
color: var(--dark-color);
font-size: 1em;
margin: 15px 50px;
transition: 0.3s ease;
}
.navigation .nav-items a:hover{
color: var(--navigation-item-hover-color);
}
.navigation .nav-items > a > i{
display: inline-block;
font-size: 1.3em;
margin-right: 5px;
}
.swiper-slide .text-content .read-btn{
font-size: 0.9em;
padding: 5px 15px;
}
/*======= About section =======*/
.about h2{
font-size: 2.5em;
}
.about p{
font-size: 0.9em;
}
}
JAVASCRIPT КОД:
//Swiper slider
var swiper = new Swiper(".bg-slider-thumbs", {
loop: true,
spaceBetween: 0,
slidesPerView: 0,
});
var swiper2 = new Swiper(".bg-slider", {
loop: true,
spaceBetween: 0,
thumbs: {
swiper: swiper,
},
});
//Navigation bar effects on scroll
//Responsive navigation menu toggle