Bài viết được dẫn từ clip hướng dẫn: 3D Responsive Slider.
Giới thiệu
Bài viết lần này mình sẽ hướng dẫn các bạn tạo 3D slider cực đẹp, siêu ngầu sử dụng plugin Swiper.js. Plugin này mình đã giới thiệu với các bạn trong bài Share một số plugin cho Front End. Đây là một plugin rất được ưa thích để tạo hiệu ứng trình bày các nội dung liên tiếp nhau theo kiểu vuốt từ bên này qua bên kia để xem nội dung tiếp theo.
Hướng dẫn thực hiện:
Nếu hướng dẫn cụ thể tại đây thì rất là dài dòng, các bước không cụ thể, do đó mình xin được đưa video hướng dẫn vào bài viết. Các bạn có thể xem chi tiết từ phần cài đặt, chỉnh sửa, cho đến công dụng của từng thuộc tính.
https://www.youtube.com/watch?v=kw1wnvWjgCw
Một số chỉnh sửa nhỏ:
Dưới đây là phần mà quyết định hiệu ứng cho phần nội dung được trình bày. Đây là hiệu ứng của phần 3D Coverflow Effect, các bạn có thể xem đầy đủ tại đây:
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
Trong đó bao gồm các thuộc tính: rotate, stretch, depth, modifier, slideShadows. Các bạn có thể chỉnh sửa giá trị của các thuộc tính này, kết quả như sau:
- Mặc định:
- rotate = 0:
- depth = 500:
- modifier = 5;
Trên đây là hướng dẫn cách tạo 3D Responsive Slider bằng thư viện Swiper.js, hy vọng các bạn có thể tự tạo cho mình một slider đẹp mắt và phù hợp với trang web của mình.
Các bạn có thể xem demo và download tại đây: