Slider Sản Phẩm Từ Bootstrap Carousel Với Khả Năng Responsive

Trang chủ » Slide Sản Phẩm Chạy Ngang » Slider Sản Phẩm Từ Bootstrap Carousel Với Khả Năng Responsive

Có thể bạn quan tâm

Slider sản phẩm từ Bootstrap Carousel với khả năng responsive 25/07/2017 webmaster

Bootstrap Carousel có thể giúp chúng ta tạo được rất nhiều slider với các hiệu ứng khác nhau, và bài viết mà mình chia sẻ cho các bạn ngày hôm nay là một trong số đó. Qua bài viết này, các bạn cũng sẽ học cách kết hợp giữa jQuery và Boostrap để tạo hiệu ứng theo ý muốn. Tất nhiên là chúng ta cũng cần sử dụng CSS3 để định dạng các sản phẩm phù hợp với khả năng responsive cao – hiển thị tốt trên tất cả kích thước màn hình.

Slider sản phẩm từ Bootstrap Carousel với khả năng responsive

Xem Demo | Download

Đầu tiên, chúng ta sẽ chèn các thư viện file cần thiết vào bên trong  cặp thẻ <head></head>.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

HMTL

Các bạn copy cấu trúc html bên dưới và đặt vào bất kì vị trí nào mà các bạn muốn slider hiển thị.

<!-- Item slider--> <div class="container-fluid"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="carousel carousel-showmanymoveone slide" id="itemslider"> <div class="carousel-inner"> <div class="item active"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="images/item-1.png" class="img-responsive center-block"></a> <h4 class="text-center">MAYORAL SUKNJA</h4> <h5 class="text-center">400.000 VND</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="images/item-2.png" class="img-responsive center-block"></a> <h4 class="text-center">MAYORAL KOŠULJA</h4> <h5 class="text-center">400.000 VND</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="images/item-3.png" class="img-responsive center-block"></a> <span class="badge">10%</span> <h4 class="text-center">PANTALONE TERI 2</h4> <h5 class="text-center">400.000 VND</h5> <h6 class="text-center">500.000 VND</h6> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="images/item-4.png" class="img-responsive center-block"></a> <h4 class="text-center">CVETNA HALJINA</h4> <h5 class="text-center">600.000 VND</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="images/item-5.png" class="img-responsive center-block"></a> <h4 class="text-center">MAJICA FOTO</h4> <h5 class="text-center">400.000 VND</h5> </div> </div> <div class="item"> <div class="col-xs-12 col-sm-6 col-md-2"> <a href="#"><img src="images/item-1.png" class="img-responsive center-block"></a> <h4 class="text-center">MAJICA MAYORAL</h4> <h5 class="text-center">400.000 VND</h5> </div> </div> </div> <!-- left,right control --> <div id="slider-control"> <a class="left carousel-control" href="#itemslider" data-slide="prev"><img src="arrow_left.png" alt="Left" class="img-responsive"></a> <a class="right carousel-control" href="#itemslider" data-slide="next"><img src="arrow_right.png" alt="Right" class="img-responsive"></a> </div> </div> </div> </div> </div> <!-- Item slider end-->

CSS

Đoạn css sau sẽ giúp các bạn hiểu slider được sắp xếp như thế nào.

#slider-text{ padding-top: 40px; display: block; } #slider-text .col-md-6{ overflow: hidden; } #slider-text h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 3px; margin: 30px auto; padding-left: 40px; } #slider-text h2::after{ border-top: 2px solid #c7c7c7; content: ""; position: absolute; bottom: 35px; width: 100%; } #itemslider h4{ font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 12px; margin: 10px auto 3px; } #itemslider h5{ font-family: 'Josefin Sans', sans-serif; font-weight: bold; font-size: 12px; margin: 3px auto 2px; } #itemslider h6{ font-family: 'Josefin Sans', sans-serif; font-weight: 300;; font-size: 10px; margin: 2px auto 5px; } .badge { background: #b20c0c; position: absolute; height: 40px; width: 40px; border-radius: 50%; line-height: 31px; font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 14px; border: 2px solid #FFF; box-shadow: 0 0 0 1px #b20c0c; top: 5px; right: 25%; } #slider-control img{ padding-top: 60%; margin: 0 auto; } @media screen and (max-width: 992px){ #slider-control img { padding-top: 70px; margin: 0 auto; } } .carousel-showmanymoveone .carousel-control { width: 4%; background-image: none; } .carousel-showmanymoveone .carousel-control.left { margin-left: 5px; } .carousel-showmanymoveone .carousel-control.right { margin-right: 5px; } .carousel-showmanymoveone .cloneditem-1, .carousel-showmanymoveone .cloneditem-2, .carousel-showmanymoveone .cloneditem-3, .carousel-showmanymoveone .cloneditem-4, .carousel-showmanymoveone .cloneditem-5 { display: none; } @media all and (min-width: 768px) { .carousel-showmanymoveone .carousel-inner > .active.left, .carousel-showmanymoveone .carousel-inner > .prev { left: -50%; } .carousel-showmanymoveone .carousel-inner > .active.right, .carousel-showmanymoveone .carousel-inner > .next { left: 50%; } .carousel-showmanymoveone .carousel-inner > .left, .carousel-showmanymoveone .carousel-inner > .prev.right, .carousel-showmanymoveone .carousel-inner > .active { left: 0; } .carousel-showmanymoveone .carousel-inner .cloneditem-1 { display: block; } } @media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) { .carousel-showmanymoveone .carousel-inner > .item.active.right, .carousel-showmanymoveone .carousel-inner > .item.next { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.active.left, .carousel-showmanymoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.left, .carousel-showmanymoveone .carousel-inner > .item.prev.right, .carousel-showmanymoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } } @media all and (min-width: 992px) { .carousel-showmanymoveone .carousel-inner > .active.left, .carousel-showmanymoveone .carousel-inner > .prev { left: -16.666%; } .carousel-showmanymoveone .carousel-inner > .active.right, .carousel-showmanymoveone .carousel-inner > .next { left: 16.666%; } .carousel-showmanymoveone .carousel-inner > .left, .carousel-showmanymoveone .carousel-inner > .prev.right, .carousel-showmanymoveone .carousel-inner > .active { left: 0; } .carousel-showmanymoveone .carousel-inner .cloneditem-2, .carousel-showmanymoveone .carousel-inner .cloneditem-3, .carousel-showmanymoveone .carousel-inner .cloneditem-4, .carousel-showmanymoveone .carousel-inner .cloneditem-5, .carousel-showmanymoveone .carousel-inner .cloneditem-6 { display: block; } } @media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) { .carousel-showmanymoveone .carousel-inner > .item.active.right, .carousel-showmanymoveone .carousel-inner > .item.next { -webkit-transform: translate3d(16.666%, 0, 0); transform: translate3d(16.666%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.active.left, .carousel-showmanymoveone .carousel-inner > .item.prev { -webkit-transform: translate3d(-16.666%, 0, 0); transform: translate3d(-16.666%, 0, 0); left: 0; } .carousel-showmanymoveone .carousel-inner > .item.left, .carousel-showmanymoveone .carousel-inner > .item.prev.right, .carousel-showmanymoveone .carousel-inner > .item.active { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); left: 0; } }

jQuery

Việc chúng ta làm bây giờ là tạo một đoạn script nhỏ với mục đích khởi tạo và kích hoạt slider hoạt động.

<script type="text/javascript"> $(document).ready(function(){ $('#itemslider').carousel({ interval: 3000 }); $('.carousel-showmanymoveone .item').each(function(){ var itemToClone = $(this); for (var i=1;i<6;i++) { itemToClone = itemToClone.next(); if (!itemToClone.length) { itemToClone = $(this).siblings(':first'); } itemToClone.children(':first-child').clone() .addClass("cloneditem-"+(i)) .appendTo($(this)); } }); }); </script>

Mình mong là các bạn sẽ không gặp bất kì vấn đề nào khi thực hiện bài viết này, đừng ngần ngại để lại lời nhắn ở phần comment để hỏi và chia sẻ cảm nghĩ của các bạn.

Tags: Bootstrap Bootstrap Carousel image slider Responsive slider

Chuyên Mục: Thiết kế website

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !

Chia sẻ cho bạn bè

Tweet

Cùng Danh Mục

  • Học thiết kế web kiểu Whitespace với 13 mẫu ví dụ ấn tượng Học thiết kế web kiểu Whitespace với 13 mẫu ví dụ ấn tượng
  • Mẫu trang 404 hiệu ứng động cực ấn tượng không thể bỏ qua Mẫu trang 404 hiệu ứng động cực ấn tượng không thể bỏ qua
  • Mẫu trang sản phẩm không thể bỏ qua bằng CSS3 và jQuery Mẫu trang sản phẩm không thể bỏ qua bằng CSS3 và jQuery
  • Thiết kế trang 404 theo phong cách hacker Thiết kế trang 404 theo phong cách hacker
  • Tổng hợp 30 Full Screen Website Design đáng để tham khảo Tổng hợp 30 Full Screen Website Design đáng để tham khảo
  • Top 10 font chữ đẹp dành cho thiết kế website và đồ họa Top 10 font chữ đẹp dành cho thiết kế website và đồ họa
  • Thiết kế mẫu Dark Login Form cho Website Thiết kế mẫu Dark Login Form cho Website
  • Top 10 Websites giúp bạn tạo ảnh GIFs miễn phí Top 10 Websites giúp bạn tạo ảnh GIFs miễn phí
  • 25 Font miễn phí cho in ấn và Web 25 Font miễn phí cho in ấn và Web
  • 28 mẫu form đẹp và sáng tạo đáng để bạn tham khảo 28 mẫu form đẹp và sáng tạo đáng để bạn tham khảo

Từ khóa » Slide Sản Phẩm Chạy Ngang