Slideshow là một component giống như carousel hay slider với nhiệm vụ chính là giảm bớt không gian hiển thị nội dung cũng như mang lại cảm giác hiện đại thiết kế đẹp mắt cho trang web của bạn. Và để hiểu rõ chúng ta hãy cùng nhau đi vào tìm hiểu cách tạo slideshow bằng HTML, CSS và Javascript nhé!
Trong phần này chúng ta sẽ xây dựng slideshow dựa trên thuộc tính -webkit-animation trong CSS nhé!
Tạo slideshow bằng HTML Và CSS
body {
padding: 2%;
text-align: center;
}
#slideshow {
overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}
.slide-wrapper {
width: 2912px;
-webkit-animation: slide 14s ease infinite;
}
.slide {
float: left;
height: 510px;
width: 728px;
}
@-webkit-keyframes slide {
20% {margin-left: 0px;}
30% {margin-left: -728px;}
50% {margin-left: -728px;}
60% {margin-left: -1456px;}
80% {margin-left: -1456px;}
}
Và kết quả cuối cùng bạn xem ở bên dưới nhé [Bạn nên chuyển sang chế độ screen 0.5x để thấy rõ hơn nha]:
See the Pen gOrgogK by haycuoilennao19 [@haycuoilennao19] on CodePen.
Bây giờ chúng ta sẽ nâng cấp slideshow bằng cách thêm các nút điều khiển cũng như hiển thị responsive trên nhiều màn hình thiết bị nhé!
1 / 3
Nội Dung 1
2 / 3
Nội Dung 2
3 / 3
Nội Dung 3
❮
❯
* {box-sizing:border-box}
/* thiết lập style cho slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* ẩn hình ảnh cho phần tử slideshow */
.mySlides {
display: none;
}
/* thiết kế nút mũi tên*/
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* thiết kế nút mũi tên next nằm phía bên phải */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* hiệu ứng thay đổi background khi hover vào nút mũi tên*/
.prev:hover, .next:hover {
background-color: rgba[0,0,0,0.8];
}
/* Thiết lập style cho nội dung của mỗi phần tử slideshow */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Thiết lập style cho số hiển thị của phần tử */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* thiết lập style nút tròn điều khiển*/
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* tạo hiệu ứng chuyển động fade */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
var slideIndex = 1;
showSlides[slideIndex];
function plusSlides[n] {
showSlides[slideIndex += n];
}
function currentSlide[n] {
showSlides[slideIndex = n];
}
function showSlides[n] {
var i;
var slides = document.getElementsByClassName["mySlides"];
var dots = document.getElementsByClassName["dot"];
if [n > slides.length] {slideIndex = 1}
if [n
Chủ Đề