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é!
Nếu bạn muốn tìm hiểu và khám phá cách tạo slideshow ( carousel ) bằng Bootstrap 4 thì hoàn toàn có thể tìm hiểu thêm bài viết ở đây nhé !
Tóm Tắt
Cách Tạo Slideshow Bằng HTML, CSS
Bạn đang đọc: Cách Tạo Slideshow Cho Trang Web(2022)
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é!
HTML
Tạo slideshow bằng HTML Và CSS
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à tác dụng sau cuối bạn xem ở bên dưới nhé ( Bạn nên chuyển sang chính sách màn hình hiển thị 0.5 x để thấy rõ hơn nha ) :See the Pen gOrgogK by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .
Cách Tạo Slideshow Bằng HTML, CSS Và Javascript
Bây giờ tất cả chúng ta sẽ tăng cấp slideshow bằng cách thêm những nút tinh chỉnh và điều khiển cũng như hiển thị responsive trên nhiều màn hình hiển thị thiết bị nhé !
HTML
1 / 3
CSS
* {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}
}
Javascript
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 < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Và hiệu quả ở đầu cuối bạn xem ở bên dưới nhé :See the Pen zYqNpjo by haycuoilennao19 ( @ haycuoilennao19 ) on CodePen .Nguồn W3School
Một Số Thư Viện Tạo Slideshow
Nếu bạn muốn thiết kế xây dựng slideshow một cách đơn thuần và thuận tiện hơn thì hoàn toàn có thể tìm hiểu thêm thêm một số ít thư viện javascript ở đây nhé !
Một Số Ví Dụ Về Slideshow
Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.
Slideshow CSS only
Kết quả bạn xem bên dưới nha .See the Pen CSS3 Fullscreen Background Slideshow by Chris ( @ leetech ) on CodePen .
Slideshow JavaScript with buttons
Kết quả bạn xem bên dưới nha .See the Pen Slideshow Parallax with TweenMax by Bruno Carvalho ( @ bcarvalho ) on CodePen .
Angular image slider example
Kết quả bạn xem bên dưới nha .See the Pen Dual Slideshow Demo by Jacob Davidson ( @ Reklino ) on CodePen .
jQuery slideshow
Kết quả bạn xem bên dưới nha .See the Pen Slick Slideshow with blur effect by Fabio Ottaviani ( @ supah ) on CodePen .
Parallax slideshow codepen
Kết quả bạn xem bên dưới nha .See the Pen Parallax Slideshow by Bruno Carvalho ( @ bcarvalho ) on CodePen .
Slick slider jQuery
Kết quả bạn xem bên dưới nha .See the Pen Slick Slider Fade Zoom by Fabio Ottaviani ( @ supah ) on CodePen .
PURE CSS SLIDESHOW
Kết quả bạn xem bên dưới nha .See the Pen Pure CSS Slideshow Gallery by Roko C. Buljan ( @ rokobuljan ) on CodePen .
Automatic slideshow JavaScript
Kết quả bạn xem bên dưới nha .See the Pen Slider boomerang effect by Grandvincent Marion ( @ GrandvincentMarion ) on CodePen .
Automatic image slider in HTML CSS JavaScript
Kết quả bạn xem bên dưới nha .See the Pen Greensock animated slideshow [ wip ] by Arden ( @ aderaaij ) on CodePen .
Vanilla javascript slideshow
Kết quả bạn xem bên dưới nha .See the Pen Slideshow Vanilla JS w / CSS Transition by Riley Adair ( @ RileyAdair ) on CodePen .
Javascript slideshow code with buttons
Kết quả bạn xem bên dưới nha .See the Pen A better simple slideshow by Mark Lee ( @ leemark ) on CodePen .
GSAP carousel slider
Kết quả bạn xem bên dưới nha .See the Pen Full Slider Prototype by Glauber Sampaio ( @ glaubersampaio ) on CodePen .
Slideshow animation JavaScript
Kết quả bạn xem bên dưới nha .See the Pen Custom GSAP slider by Zoran Završki ( @ zzavrski ) on CodePen .
SlideShow Animated
Kết quả bạn xem bên dưới nha .See the Pen SlideShow Animated by Manu K ( @ manukn ) on CodePen .
JavaScript split screen slider
Kết quả bạn xem bên dưới nha .See the Pen Split Slick Slideshow by Fabio Ottaviani ( @ supah ) on CodePen .
Automatic slideshow html
Kết quả bạn xem bên dưới nha .
See the Pen Slick Slider Slice by Fabio Ottaviani (@supah) on CodePen.
OwlCarousel Slideshow
Kết quả bạn xem bên dưới nha .See the Pen OwlCarousel Slideshow by Nathan Schmidt ( @ mrnathan8 ) on CodePen .
Simple html javascript slideshow
Kết quả bạn xem bên dưới nha .See the Pen Simple Image Slider by André Cortellini ( @ AndreCortellini ) on CodePen .
Transition images slideshow javascript
Kết quả bạn xem bên dưới nha .See the Pen Page Transition Carousel by alphardex ( @ alphardex ) on CodePen .
Slideshow gallery HTML
Kết quả bạn xem bên dưới nha .See the Pen Image Slider – responsive, modular, autoplay by Eric Porter ( @ EricPorter ) on CodePen .
CSS slideshow automatic
Kết quả bạn xem bên dưới nha .See the Pen Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman ( @ tovic ) on CodePen .
Slideshow HTML CSS
Kết quả bạn xem bên dưới nha .See the Pen Stylish One Page Webdesign by Igor Milenkovic ( @ imilenig ) on CodePen .
Responsive image slideshow css
Kết quả bạn xem bên dưới nha .See the Pen Slendr by Jose Quintana ( @ joseluisq ) on CodePen .
Fullscreen Slideshow
Kết quả bạn xem bên dưới nha .See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi ( @ ibanez182 ) on CodePen .
CSS Slideshow text
Kết quả bạn xem bên dưới nha .See the Pen CSS Slideshow text by Joan Leon ( @ nucliweb ) on CodePen .
Simple jQuery Slideshow
Kết quả bạn xem bên dưới nha .See the Pen Simple jQuery Slideshow by Chris Coyier ( @ chriscoyier ) on CodePen .
Infinite Slideshow
Kết quả bạn xem bên dưới nha .See the Pen Infinite Slideshow by Chris Coyier ( @ chriscoyier ) on CodePen .
Tweenmax slideshow
Kết quả bạn xem bên dưới nha .See the Pen Tweenmax slideshow by Matheus Verissimo ( @ astrixsz ) on CodePen .
Prism Effect Slider
Kết quả bạn xem bên dưới nha .See the Pen Prism Effect Slider by victor ( @ vkanet ) on CodePen .
Vue.js Simple Image Carousel
Kết quả bạn xem bên dưới nha .See the Pen Vue. js Simple Image Carousel / Slider ( ES 5 ) by Paulo Elias ( @ pauloelias ) on CodePen .
Responsive Slideshow
Kết quả bạn xem bên dưới nha .See the Pen Responsive Slideshow / Carousel with only HTML5 và CSS3 by Trung Vo ( @ trungk18 ) on CodePen .
Sailor Slide
Kết quả bạn xem bên dưới nha .See the Pen Sailor Slide by Bryan Stoner ( @ mimoduo ) on CodePen .
Slideshow presentation
Kết quả bạn xem bên dưới nha .See the Pen Slideshow presentation by Something Strange ( @ something-strange ) on CodePen .
Slideshow Owl Carousel With Youtube
Kết quả bạn xem bên dưới nha .See the Pen Slideshow Owl Carousel + YouTube by Pierre Vion ( @ pierrinho ) on CodePen .
React Product Slides
Kết quả bạn xem bên dưới nha .See the Pen React Product Slides by Mike Quinn ( @ mprquinn ) on CodePen .
React Slideshow
Kết quả bạn xem bên dưới nha .See the Pen React Slideshow by Gabriele Corti ( @ borntofrappe ) on CodePen .
Nautilus Slideshow
Kết quả bạn xem bên dưới nha .See the Pen Nautilus Slideshow by Nikolas Payne ( @ npayne ) on CodePen .
Tổng kết:
Qua đây mình mong bài viết sẽ cung ứng thêm cho bạn những slideshow hữu dụng dành cho việc tăng trưởng, phong cách thiết kế web và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !
Source: https://final-blade.com
Category: Kiến thức Internet
