Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
12 Ví Dụ Về Slider Cho Website

12 Ví Dụ Về Slider Cho Website


Ngày 23 Tháng 4 Năm 2020

Hôm nay chúng ta sẽ đi tìm hiểu cách thiết kế slider bằng cách kết hợp HTML, CSS, Javascript nhé.

Slider Là Gì?

Slider được sử dụng rộng rãi trong tất cả các loại trang web ngày nay nhưng phổ biến nhất có lẻ là trang web kinh doanh thương mại điện tử. Nó giúp bạn có thể đặt những nội dung quan trọng để thu hút sự chú ý của khách hàng và thường xuất hiện sau thanh điều hướng(navigation) trong trang web. Điểm mạnh của nó là có thể tự động hiển thị hình ảnh nội dung khác nhau theo khoảng thời gian cố định và có các nút điều chỉnh giúp khách hàng có thể xem lại nội dung hay tương tác với bài viết. Ngoài ra nó cũng giúp tiết kiệm không gian trang, giúp bạn dễ dàng cập nhật tự động các nội dung mới(như bài viết sản phẩm mới) và tăng trải nghiệm của người dùng đối với trang web.Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Ví Dụ Slider Trong Trang Web

Việc đặt nội dung cho từng slide(trang) rất quan trọng nhé theo mình tìm hiểu thì slide đầu tiên thì sẽ được nhấn(click) nhiều nhất và số lượng nhấn(click) sẽ giảm tỉ lệ thuận với vị trí của slide. Do đó trang slider bạn nên chỉ sử dụng từ 5 slide trở xuống.

Mình cũng có một số lưu ý thêm khi bạn thiết kế slider cho trang web là nó có thể làm chậm trang web vì cần tải thêm javascript do đó bạn nên sử dụng thư viện nhẹ để tạo component này còn nếu tốt hơn bạn có thể viết bằng javascript thuần. Thứ hai là bạn chăm chút nội dung cho từng slide để có thể gây sự thích thú đối đa với khách hàng. Thứ ba là bạn xem nó có thân thiện với thiết bị di động chưa, responsive được trên nhiều màn hình thiết bị không nhé.

Sau khi hiểu sơ lược về slider thì sau đây mình sẽ giới thiệu một số component này giúp bạn có sự lựa chọn tốt nhất để phù hợp với mục đích cũng như thiết kế, bố cục trang web của bạn.

Các Ví Dụ Về Slider

Trong phần này chúng ta sẽ đi vào tìm hiểu các ví dụ về slider để thiết kế và phát triển web nhé!

Cách Tạo Slider Với Thư Viện GSAP

Slider Với Thư Viện GSAP

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen GSAP slider by Goran Vrban (@gvrban) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Và 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.

Nguồn

Thiết Kế Slider Jquery:

Thiết Kế Slider Jquery

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Blend Mode Slider - Double Exposure by Sullivan Nolan (@nolakat) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Cách Tạo Carousel Slider Jquery

Carousel Slider Jquery

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Exploring UI Animation #2 by mario s maselli (@mariosmaselli) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Thiết Kế Jquery Slider Responsive

Jquery Slider Responsive

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Exploring UI Animation #4 by mario s maselli (@mariosmaselli) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Cách Tạo Swiper Slider:

Cách Tạo Swiper Slider

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Slider transitions by Mirko Zorić (@fluxus) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Và 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.

Nguồn

Cách Tạo Slider Bằng Javascript:

Cách Tạo Slider Bằng Javascript

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Slice Slider by Stephen Scaff (@StephenScaff) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Cách Tạo Slick Slider

Cách Tạo Slick Slider

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Motion blur effect using SVG filters by Damián Muti (@damianmuti) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Thiết Kế Jquery Image Slider:

Thiết Kế Jquery Image Slider

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Flexslider with simple CSS animated layers by Komeyl (@Komeyl94) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Và 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.

Nguồn

Thiết Kế Responsive Slider:

Responsive Slider

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS và HTML thì có thể xem tại đây nha : SCSS to CSSPug to HTML. Và 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.

Nguồn

Slider Đẹp Bằng CSS Javascript:

Slider Đẹp Bằng CSS Javascript

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

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

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Tạo Hiệu Ứng Chuyển Động Slider Với SVG:

Tạo Hiệu Ứng Chuyển Động Slider Với SVG

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Image Overlay Slider by Yugam (@pizza3) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Thiết Kế Carousel Slider Responsive:

Thiết Kế Carousel Slider Responsive

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Clip-Path Revealing Slider by Nikolay Talanov (@suez) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Cách Tạo Background Slider Image:

Background Slider Image

Đây là đoạn code và khi hiển thị trên web của component slider này nhé:

See the Pen Popout Slider by Nathan Taylor (@nathantaylor) on CodePen.

Để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x và 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é. Do đây sử dụng SCSS nếu bạn muốn sử dụng CSS thì có thể xem tại đây nha : SCSS to CSS. Và 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.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian thiết kế slider trong việc phát triển trang 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ẻ!