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.

Ví Dụ 1

See the Pen CSS3 Fullscreen Background Slideshow by Chris (@leetech) on CodePen.

Ví Dụ 2

See the Pen Slideshow Parallax with TweenMax by Bruno Carvalho (@bcarvalho) on CodePen.

Ví Dụ 3

See the Pen Dual Slideshow Demo by Jacob Davidson (@Reklino) on CodePen.

Ví Dụ 4

See the Pen Slick Slideshow with blur effect by Fabio Ottaviani (@supah) on CodePen.

Ví Dụ 5

See the Pen Parallax Slideshow by Bruno Carvalho (@bcarvalho) on CodePen.

Ví Dụ 6

See the Pen Slick Slider Fade Zoom by Fabio Ottaviani (@supah) on CodePen.

Ví Dụ 7

See the Pen Pure CSS Slideshow Gallery by Roko C. Buljan (@rokobuljan) on CodePen.

Ví Dụ 8

See the Pen A slideshow with a blinds transition by Stathis (@stathisg) on CodePen.

Ví Dụ 9

See the Pen Slider boomerang effect by Grandvincent Marion (@GrandvincentMarion) on CodePen.

Ví Dụ 10

See the Pen Greensock animated slideshow [wip] by Arden (@aderaaij) on CodePen.

Ví Dụ 11

See the Pen Slideshow Vanilla JS w/ CSS Transition by Riley Adair (@RileyAdair) on CodePen.

Ví Dụ 12

See the Pen A better simple slideshow by Mark Lee (@leemark) on CodePen.

Ví Dụ 13

See the Pen Full Slider Prototype by Glauber Sampaio (@glaubersampaio) on CodePen.

Ví Dụ 14

See the Pen Custom GSAP slider by Zoran Završki (@zzavrski) on CodePen.

Ví Dụ 15

See the Pen SlideShow Animated by Manu K (@manukn) on CodePen.

Ví Dụ 16

See the Pen Split Slick Slideshow by Fabio Ottaviani (@supah) on CodePen.

Ví Dụ 17

See the Pen Slick Slider Slice by Fabio Ottaviani (@supah) on CodePen.

Ví Dụ 18

See the Pen OwlCarousel Slideshow by Nathan Schmidt (@mrnathan8) on CodePen.

Ví Dụ 19

See the Pen Simple Image Slider by André Cortellini (@AndreCortellini) on CodePen.

Ví Dụ 20

See the Pen Page Transition Carousel by alphardex (@alphardex) on CodePen.

Ví Dụ 21

See the Pen Image Slider - responsive, modular, autoplay by Eric Porter (@EricPorter) on CodePen.

Ví Dụ 22

See the Pen Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman (@tovic) on CodePen.

Ví Dụ 23

See the Pen Stylish One Page Webdesign by Igor Milenkovic (@imilenig) on CodePen.

Ví Dụ 24

See the Pen Slendr by Jose Quintana (@joseluisq) on CodePen.

Ví Dụ 25

See the Pen Simple CSS3 slideshow by ihzh (@ihzh) 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ẻ!

Load WooCommerce Stores in 249ms!