Cách Tạo Slider với CSS và JavaScript

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

Graphical user interface

Description automatically generated

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ế

A picture containing icon

Description automatically generated

Bước 3: Tạo trang web có tên album.html có cấu trúc như sau:

Graphical user interface, text, application

Description automatically generated

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=”images/VM2.jpeg”>

</div>

<div class=”slide-text”>

<p>

Học Công Nghệ Thông Tin Tại Việt Mỹ 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=”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()”>&#10094</button>

<button type=”button” class=”btn-slide-next” onclick=”nextSlide()”>&#10095</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

Tác giả: Thy Đào Quốc - Ngày viết: 23/03/2023

Danh mục: Chương trình đào tạo, CNTT - Thiết kế Website, CNTT - Ứng dụng phần mềm, Ngành Công nghệ thông tin - Ứng dụng phần mềm, NHÓM NGÀNH CÔNG NGHỆ THÔNG TIN

ĐỂ LẠI CÂU HỎI NẾU BẠN CÓ THẮC MẮC

GỬI BÌNH LUẬN

Hãy bình luận/đặt câu hỏi cùng Cao Đẳng Việt Mỹ ngay nhé.
Thông tin của bạn sẽ không được hiển thị công khai.
Các trường bắt buộc được đánh dấu *