Hướng dẫn làm slide tự động chạy js năm 2024

Nếu các bạn hay lên các trang website thường mạng điện tử bán hàng, doanh nghiệp... thì các bạn hay thấy phần đầu trang web thường có một khoảng show hình ảnh, video, gif được thay đổi liên tục, đây được gọi là những slider. Việc sử dụng slider có tác dụng rất lớn là thu hút sự chú ý của khách hàng. Người quản trị trang web thường hay đặt các nội dung quan trọng trong một slider ở ngay đầu website giúp cho người dùng nhanh chóng nhìn thấy điểm nổi bật của website.

Slider thì thường thay đổi trong một khoảng thời gian nhất định (thường là 4 đến 5s). Người dùng cũng có thể thao tác trực tiếp trên website là bấm chuột hay vuốt để xem các slide tiếp theo hoặc prev về slide trước đó.

Đối với một lập trình viên thì chắc không còn xa lạ gì với chức năng này nhỉ. Ngày hôm nay thì mình sẽ hướng dẫn vài cách để tạo một slide nhanh, đơn giản nhé

2. Những cách tạo một slider

2.1 Sử dụng bootstrap

Cách 1: Ở đây mình muốn giới thiệu với các bạn slider mà bootstrap hỗ trợ chúng ta.

Các bạn muốn sử dụng slider có sẵn của boostrap thì các bạn cần lên trang https://getbootstrap.com tải boostrap về hoặc có thể dùng link trực tiếp trên đến trang bootstrap để lấy js, css dán vào trang web là chúng ta có thể sử dụng slider mà ko phải code css hay js nhé.

  

    

      

        

        

        

      
      

        

          

        
        

          

        
        

          

        
      
      
        
        Previous
      
      
        
        Next
      
    
  

Ở đây mình giải thích sơ qua các phần để show ra 1 slider:

• .carousel-inner đây là phần bao bọc các div chứa item hình ảnh, caption từng ảnh mà chúng ta muốn hiển thị.
• .carousel-indicators đây là phần chứa những link điều hướng mà chúng ta muốn kích đền slide show hình ảnh muốn đến. Thường thường ở đây là hiện những icon chấm chòn hoặc icon chỉ số slide.
• .carousel-control-prev . carousel-control-next đây là phần chứa link prev hoặc next qua lại các slide.

Ngoài ra các bạn muốn thêm caption cho mỗi hình ảnh thì chúng ta thêm một div có nội dung vào sau mỗi thẻ img.

 

    
Tiêu đề caption
    
Nội dung caption
 

Rất đơn giản phải không nào, tiếp tục đến cách thứ 2 mình sẽ hướng dẫn các bạn sử dụng css, js thuần để code ra một slider, ở cách này đòi hỏi các bạn có kiến thức cơ bản về html,css,js nhé. Không khó đâu hãy tiếp tục theo dõi nhé!

2.2 Sử dụng html, css, js thuần

Ở cách thứ 2 chúng ta tự code ra slider chạy, các bạn tạo cho mình 3 file index.html, style.css,

 

    
Tiêu đề caption
    
Nội dung caption
 

0:

• File style.css các bạn sử dụng css để căn chỉnh kích thước slider cũng như vị trí các ảnh, nút next, prev:

{
  box-sizing: border-box
}
body {
  font-family: Verdana, sans-serif; margin:0
}
.mySlides {
  display: none
}
img {
  vertical-align: middle;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.text {
  color: 
# f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: 
# f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.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;
}
.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}
}
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

• File`index.html` nơi chứa code html tĩnh, ở đây các bạn dẫn dẫn link hình ảnh đến image...

  

    

    
Caption Text
  
  

    

    
Caption Two
  
  

    

    
Caption Three
  
  &
# 10094;
  &
# 10095;


  
  
  

• File

  Tiêu đề caption
    
  Nội dung caption
    
  

  0 nơi chúng ta tạo ra các sự kiện next ảnh, prev ảnh:

var slideIndex = 1;
showSlider(slideIndex);
function plusSlider(n) {
  showSlider(slideIndex += n);
}
function currentSlider(n) {
  showSlider(slideIndex = n);
}
function showSlider(n) {
  var i;
  var slider = document.getElementsByClassName("mySlider");
  var dots = document.getElementsByClassName("dot");
  if (n > slider.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slider.length}
  for (i = 0; i < slider.length; i++) {
      slider[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slider[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

Ok rất dài dòng đúng không bạn. Với cách này thì các bạn có thể dễ dàng tạo slider, hiệu ứng theo ý muốn của mình

2.3 Sử dụng gem

Tại sao ở đây mình lại nói sử dụng gem nhỉ? Ở đây mình cũng giới thiệu với các bạn là mình là một backend Ruby(Ruby on Rails) nhé. Mình khuyên các bạn là chúng ta nên thử sức với ngôn ngữ này nhé, nó rất dễ học tập, sử dụng. Khi chúng ta muốn làm một chức năng nào đó thì framework của Ruby là Ruby on Rails có rất nhiều các gem hỗ trợ khi chúng ta muốn lập trình.

Ví dụ một số gem hỗ trợ như: Phân trang(gem "kaminari"), đăng nhập(gem "devise", "omniauth", "omniauth-google-oauth2"), phân quyền(gem "cancancan")...Và còn vô vàn những gem khác nhé, bài hôm nay mình muốn chia sẻ về một gem hỗ trợ tạo slide là gem "lex-slider-rails".

Muốn sử dụng gem này thì project ruby on rails của các bạn các bạn add gem bên dưới và chạy lệnh bundle install để cài đặt gem.

gem 'bootstrap-sass', '~> 3.4.1'
gem 'jquery-rails'
gem 'flex-slider-rails'

Để

 

    
Tiêu đề caption
    
Nội dung caption
 

4 hoạt động được thì chúng ta cũng cần phải chạy các

 

    
Tiêu đề caption
    
Nội dung caption
 

5,

 

    
Tiêu đề caption
    
Nội dung caption
 

6để add bootstrap và jquery vào project nhé.

Ở thư mục

 

    
Tiêu đề caption
    
Nội dung caption
 

7 các bạn thêm cho mình dòng

 

    
Tiêu đề caption
    
Nội dung caption
 

8

Ở thư mục

 

    
Tiêu đề caption
    
Nội dung caption
 

9 các bạn thêm cho mình dòng

{
  box-sizing: border-box
}
body {
  font-family: Verdana, sans-serif; margin:0
}
.mySlides {
  display: none
}
img {
  vertical-align: middle;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
.text {
  color: 
# f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
.numbertext {
  color: 
# f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.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;
}
.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}
}
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

0 và một đoạn code js như ở dưới nhé.

$(document).on("turbolinks:load", function() {
  $('.flexslider').flexslider();
});

Ok đến đây cơ bản là đã hoàn thành bước cài đặt rùi các bạn muốn sử dụng slider ở đâu thì chỉ cần thêm đoạn code html như ở dưới là chúng ta có 1 slider để sử dụng.

Kết quả của 3 cách trên đều là chúng ta tạo được một slider hoạt động. Rất đơn giản phải không nào và dưới đây là thành quả của mình.