Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Slideshow Cho Trang Web(2020)

Cách Tạo Slideshow Cho Trang Web(2020)


Ngày 24 Tháng 8 Năm 2020

Cách Tạo Slideshow Cho Trang Web(2020)

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 cách tạo slideshow (carousel) bằng Bootstrap 4 thì có thể tham khảo bài viết ở đây nhé!

Cách Tạo Slideshow Bằng HTML, CSS

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

<h3>Tạo slideshow bằng HTML Và CSS</h3>
<div id="slideshow">
  <div class="slide-wrapper">
    <div class="slide"><img src="https://images.pexels.com/photos/2382325/pexels-photo-2382325.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
    <div class="slide"><img src="https://images.pexels.com/photos/3578393/pexels-photo-3578393.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
    <div class="slide"><img src="https://images.pexels.com/photos/4484184/pexels-photo-4484184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>
  </div>
</div>

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.

Cách Tạo Slideshow Bằng HTML, CSS Và Javascript

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é!

HTML

<!-- Thẻ Chứa Slideshow -->
<div class="slideshow-container">
  <!-- Kết hợp hình ảnh và nội dung cho mội phần tử trong slideshow-->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="https://images.pexels.com/photos/1632790/pexels-photo-1632790.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
    <div class="text">Nội Dung 1</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="https://images.pexels.com/photos/1581026/pexels-photo-1581026.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
    <div class="text">Nội Dung 2</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="https://images.pexels.com/photos/2582546/pexels-photo-2582546.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" style="width:100%">
    <div class="text">Nội Dung 3</div>
  </div>
  <!-- Nút điều khiển mũi tên-->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- Nút tròn điều khiển slideshow-->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

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à kết quả cuối cùng 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 xây dựng slideshow một cách đơn giản và dễ dàng hơn thì có thể tham khảo thêm một số 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

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

Slideshow CSS only

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

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

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

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

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

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

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

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

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

 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

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

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

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

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

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

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

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

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

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

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

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

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.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những slideshow hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!