Ngôn ngữ Css và Javascript là ngôn ngữ giúp chúng ta thiết kế page nhẹ nhàng nhưng đầy sự quyến rũ. Với những dạng slider như thế này thì việc giúp người truy cập vào trang web sẽ tập trung hơn so với các giao diện khác.
Để tạo slider, các bạn theo dõi những hướng dẫn dưới đây.
Bước 1: Tạo cấu trúc Website
Bước 2: Dùng công cụ thiết kế web bất kỳ, ví dụ như visual studio code. Sau đó mở website MyAlbum để bắt đầu thiết kế
Bước 3: Tạo trang web có tên album.html có cấu trúc như sau:
Bước 4: Trình bày nội dung cho trang web, hiển thị các hình ảnh lên web
<div class=”slider”>
<div class=”slide slide-1″>
<div class=”slide-bg”></div>
<div class=”slide-content”>
<div class=”slide-image”>
<img src=”images/VM1.jpeg”>
</div>
<div class=”slide-text”>
<p>
Thật Tuyệt Vời!
</p>
</div>
</div>
</div>
<div class=”slide slide-2″>
<div class=”slide-bg”></div>
<div class=”slide-content”>
<div class=”slide-image”>
<!– <img src=”https://i.ibb.co/MkSbTjV/juul-monster-0.jpg”> –>
<img src=”images/VM2.jpeg”>
</div>
<div class=”slide-text”>
<p>
Học Công Nghệ Thông Tin Tại Việt Mỹ Cần Thơ Thật Dễ
</p>
</div>
</div>
</div>
<div class=”slide slide-3″>
<div class=”slide-bg”></div>
<div class=”slide-content”>
<div class=”slide-image”>
<!– <img src=”https://i.ibb.co/FwnvDsz/maxresdefault.jpg”> –>
<img src=”images/VM3.jpeg”>
</div>
<div class=”slide-text”>
<p>
Okay Chọn Công Nghệ Thông Tin Để Thoả Đam Mê Nào!
</p>
</div>
</div>
</div>
</div>
<div class=”slider-controls”>
<button type=”button” class=”btn-slide-previous” onclick=”previousSlide()”>❮</button>
<button type=”button” class=”btn-slide-next” onclick=”nextSlide()”>❯</button>
</div>
Bước 5: Làm đẹp trang bằng css tại muc style
* {
font-family: sans-serif;
}
body {
margin: 0;
}
.slider {
width: 100%;
height: 100vh;
}
.slide {
width: 100%;
height: 0;
display: flex;
visibility: hidden;
overflow: hidden;
}
.slide.active {
display: flex;
height: 100%;
visibility: visible
}
.slide-bg {
height: 100%;
clip-path: polygon(0 0, 0 90%, 150% 0%);
z-index: 1;
position: absolute;
top: -100%;
width: 100%;
}
.slide.active>.slide-bg {
top: 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.slide-image>img {
z-index: 2;
opacity: 0;
}
.slide.active .slide-image>img {
opacity: 1;
-webkit-transition: opacity 2ss ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
.slide-image>img {
max-height: 100%;
max-width: 100%;
z-index: 1;
}
.slide-content {
max-width: 900px;
max-height: 90%;
margin: auto;
z-index: 2;
position: relative;
padding-left: 150px;
}
.slide-image-bg {
width: 0;
height: 100%;
position: absolute;
top: 0;
z-index: 1
}
.slide.active .slide-image-bg {
width: 100%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.slide-text {
background-color: #fff;
padding: 1em 2em;
position: absolute;
top: 40%;
left: -100%;
z-index: 3;
width: 250px;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.2);
text-align: justify;
}
.slide.active .slide-text {
left: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.slide-1 .slide-text {
border-left: 10px solid darkslategray;
}
.slide-1 .slide-bg {
background-color: cadetblue;
}
.slide-2 .slide-text {
border-left: 10px solid burlywood;
}
.slide-2 .slide-bg {
background-color: antiquewhite;
}
.slide-3 .slide-text {
border-left: 10px solid darkslateblue;
}
.slide-3 .slide-bg {
background-color: deepskyblue;
}
.slider-controls {
position: absolute;
z-index: 5;
bottom: 25px;
right: 25px;
}
.btn-slide-next,
.btn-slide-previous {
cursor: pointer;
width: 60px;
height: 50px;
color: #000;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
user-select: none;
background-color: #fff;
border: 1px solid #000;
}
.btn-slide-previous:hover,
.btn-slide-next:hover {
background-color: #000;
border: 1px solid #fff;
color: #fff;
}
Bước 6: Bước cuối cùng sử dụng javascript làm cho trang có sự tương tác với người dùng – Nghĩa là khi người dùng click chuột vào các nút mũi tên thì hình sẽ thay đổi
document.addEventListener(“DOMContentLoaded”, function() {
setTimeout(function() {
document.querySelector(“.slide”).classList.add(“active”);
}, 500)
});
function nextSlide() {
let currSlide = document.querySelector(“.slide.active”),
nextSlide = currSlide.nextElementSibling;
currSlide.classList.remove(“active”);
if (nextSlide) {
nextSlide.classList.add(“active”);
} else {
document.querySelectorAll(“.slide”)[0].classList.add(“active”);
}
}
function previousSlide() {
let currSlide = document.querySelector(“.slide.active”),
prevSlide = currSlide.previousElementSibling,
slideCount = document.querySelectorAll(“.slide”).length;
currSlide.classList.remove(“active”);
if (prevSlide) {
prevSlide.classList.add(“active”);
} else {
document.querySelectorAll(“.slide”)[slideCount – 1].classList.add(“active”);
}
}
Kết Luận: Sau hướng dẫn trên các bạn đã tạo ra được một album ảnh dưới dạng slider thật đẹp. Từ đây, các bạn sẽ có thêm nhiều sự lựa chọn trong việc đi tìm những ý tưởng về slider
Bạn có thể tham khảo thêm chi tiết ngành Công nghệ thông tin – Ứng dụng phần mềm tại đây
Cao đẳng Việt Mỹ Cần Thơ thông báo chính thức tuyển sinh ngành CNTT – Ứng dụng phần mềm
Hệ đào tạo: Cao đẳng phổ thông (tuyển sinh tốt nghiệp THCS); Cao đẳng chính quy (Tuyển sinh tốt nghiệp THPT)
Hình thức tuyển sinh: 100% xét tuyển
Thời gian học: Cao đẳng phổ thông (3 năm – 3.5 năm) – Cao đẳng chính quy (2 năm 4 tháng)
Đăng ký nhanh tại:
- Hệ Cao đẳng phổ thông: https://cdpt.caodangvietmycantho.edu.vn/
- Hệ Cao đẳng chính quy: https://cdcq.caodangvietmycantho.edu.vn/
Hotline/ Zalo: 0292 3824 234 | 0903 858 380 | 0937 910 212 | 0939 431 436 | 0907 031 018 | 0939 679 911 | 0939 184 111
Liên hệ trực tiếp facebook/ Tiktok: Cao đẳng Việt Mỹ Cần Thơ
Liên hệ trực tiếp với nhà trường để được hướng dẫn cách tuyển sinh và các hồ sơ, thủ tục cần thiết.