"Pricing Owl Carousel"
Bootstrap 4.1.1 Snippet by tieusuquay79

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <section id="booth-pricing" class="padd-section text-center wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;"> <div class="container"> <div class="section-title text-center"> <h2>THAM GIA SỰ KIỆN KHỞI NGHIỆP LỚN NHẤT VIỆT NAM!</h2> <p class="text-justify">TECHFEST VIETNAM 2021 với chủ đề "Đổi mới sáng tạo - Kiến tạo tương lai " (tiếng Anh: Embracing innovation - Reshaping the future). Năm 2021, dịch bệnh Covid-19 vẫn diễn biến hết sức phức tạp, con đường khởi nghiệp sáng tạo, vốn chông gai lại càng thêm chông gai. việc đổi mới sáng tạo, thay đổi phương thức sinh hoạt, làm việc và tương tác không còn là lựa chọn, mà đã trở thành bắt buộc. Tham gia TECHFEST VIETNAM 2021là cơ hội cho các doanh nghiệp khởi nghiệp sáng tạo nắm bắt cơ hội vươn lên, để "kiến tạo tương lai" thông qua sáng kiến công nghệ.</p> <h4>THAM GIA NGAY!</h4> </div> </div> <div class="container p-0"> <div class="owl-carousel owl-theme"> <div class="item"> <div class="block-pricing"> <div class="table"> <h4>MEDIUM</h4> <s>3.600.000 <span class="sup">đ</span></s> <h2>1.800.000<sup>đ</sup></h2> <small>Dành cho startups</small> <div class="table_btn"> <a href="#" class="btn">Đăng ký</a> </div> <ul class="list-unstyled"> <li class="content-title">Thời hạn : 1 năm</li> <li class="content-title">Số phòng : 1</li> <li class="content-title">Số view : 1</li> <li class="content-title">Số hotspot : 8</li> <li class="content-title">Dung lượng video tối đa : 20Mb</li> <li class="content-item">Hiển thị logo</li> <li class="content-item">Gắn video</li> <li class="content-item">Hiển thị banner</li> <li class="content-item">Dẫn link/Nhúng về website</li> <li class="content-item">Catelogua</li> <li class="content-item">Livestream</li> <li class="content-item">Gửi Email</li> <li class="content-item">Gọi điện</li> <li class="content-item">Gửi qua mạng xã hội</li> <li class="content-item">Nhúng chat messager</li> <li class="content-item">Info box</li> <li class="content-item">Meeting </li> </ul> <div class="fixed-bottom mb-3"> <a href="#" class="">> Xem mẫu gian hàng tại đây <</a> </div> </div> </div> </div> <div class="item"> <div class="block-pricing"> <div class="table"> <h4>ADVANCED</h4> <s>6.800.000 <span class="sup">đ</span></s> <h2>3.400.000<sup>đ</sup></h2> <small>Dành cho startups</small> <div class="table_btn"> <a href="#" class="btn">Đăng ký</a> </div> <ul class="list-unstyled"> <li class="content-title">Thời hạn : 1 năm</li> <li class="content-title">Số phòng : 1</li> <li class="content-title">Số view : 1</li> <li class="content-title">Số hotspot : 10</li> <li class="content-title">Dung lượng video tối đa : 20Mb</li> <li class="content-item">Hiển thị logo</li> <li class="content-item">Gắn video</li> <li class="content-item">Hiển thị banner</li> <li class="content-item">Dẫn link/Nhúng về website</li> <li class="content-item">Catelogua</li> <li class="content-item">Livestream</li> <li class="content-item">Gửi Email</li> <li class="content-item">Gọi điện</li> <li class="content-item">Gửi qua mạng xã hội</li> <li class="content-item">Nhúng chat messager</li> <li class="content-item">Info box</li> <li class="content-item">Meeting </li> <li class="content-item">Bộ sưu tập ảnh</li> <li class="content-item">Thống kê</li> <li class="content-item">Phiếu khảo sát</li> <li class="content-item">Nhạc nền</li> <li class="content-item">Thông báo tại gian hàng</li> </ul> <div class="fixed-bottom mb-3"> <a href="#" class="">> Xem mẫu gian hàng tại đây <</a> </div> </div> </div> </div> <div class="item"> <div class="block-pricing"> <div class="table"> <h4>PREMIUM</h4> <s>32.000.000 <span class="sup">đ</span></s> <h2>16.000.000<sup>đ</sup></h2> <small>Dành cho startups</small> <div class="table_btn"> <a href="#" class="btn">Đăng ký</a> </div> <ul class="list-unstyled"> <li class="content-title">Thời hạn : 1 năm</li> <li class="content-title">Số phòng : 2</li> <li class="content-title">Số view : Không giới hạn</li> <li class="content-title">Số hotspot : 15</li> <li class="content-title">Dung lượng video tối đa : 40Mb</li> <li class="content-item">Hiển thị logo</li> <li class="content-item">Gắn video</li> <li class="content-item">Hiển thị banner</li> <li class="content-item">Dẫn link/Nhúng về website</li> <li class="content-item">Catelogua</li> <li class="content-item">Livestream</li> <li class="content-item">Gửi Email</li> <li class="content-item">Gọi điện</li> <li class="content-item">Gửi qua mạng xã hội</li> <li class="content-item">Nhúng chat messager</li> <li class="content-item">Info box</li> <li class="content-item">Meeting </li> <li class="content-item">Bộ sưu tập ảnh</li> <li class="content-item">Thống kê</li> <li class="content-item">Phiếu khảo sát</li> <li class="content-item">Nhạc nền</li> <li class="content-item">Thông báo tại gian hàng</li> <li class="content-item">Chiếu slide giới thiệu gian hàng</li> <li class="content-item">Thêm icon tùy chọn</li> <li class="content-item">Tự động xoay 360</li> <li class="content-item">Mật khẩu vào gian hàng</li> <li class="content-item">Logo khi tải gian hàng</li> <li class="content-item">Logo chân máy</li> </ul> <div class="fixed-bottom mb-3"> <a href="#" class="">> Xem mẫu gian hàng tại đây <</a> </div> </div> </div> </div> <div class="item"> <div class="block-pricing"> <div class="table"> <h4>SPONSOR</h4> <span> </span> <h2>50.000.000<sup>đ</sup></h2> <small>Dành cho startups</small> <div class="table_btn"> <a href="#" class="btn">Đăng ký </a></div> <ul class="list-unstyled"> <li class="content-title">Thời hạn : 1 năm</li> <li class="content-title">Số phòng : 2</li> <li class="content-title">Số view : Không giới hạn</li> <li class="content-title">Số hotspot : Không giới hạn</li> <li class="content-title">Dung lượng video tối đa : 40Mb</li> <li class="content-item">Hiển thị logo</li> <li class="content-item">Gắn video</li> <li class="content-item">Hiển thị banner</li> <li class="content-item">Dẫn link/Nhúng về website</li> <li class="content-item">Catelogua</li> <li class="content-item">Livestream</li> <li class="content-item">Gửi Email</li> <li class="content-item">Gọi điện</li> <li class="content-item">Gửi qua mạng xã hội</li> <li class="content-item">Nhúng chat messager</li> <li class="content-item">Info box</li> <li class="content-item">Meeting </li> <li class="content-item">Bộ sưu tập ảnh</li> <li class="content-item">Thống kê</li> <li class="content-item">Phiếu khảo sát</li> <li class="content-item">Nhạc nền</li> <li class="content-item">Thông báo tại gian hàng</li> <li class="content-item">Chiếu slide giới thiệu gian hàng</li> <li class="content-item">Thêm icon tùy chọn</li> <li class="content-item">Tự động xoay 360</li> <li class="content-item">Mật khẩu vào gian hàng</li> <li class="content-item">Logo khi tải gian hàng</li> <li class="content-item">Logo chân máy</li> <li class="content-title">Thiết kế theo yêu cầu</li> <li class="content-item">Mật khẩu vào phòng</li> <li class="content-item">Thiết lập thời hạn cho hotspot</li> <li class="content-item">Tải tour</li> </ul> <div class="fixed-bottom mb-3"> <a href="#" class="">> Xem mẫu gian hàng tại đây <</a> </div> </div> </div> </div> </div> </div> </section>
.padd-section { padding-top: 50px; padding-bottom: 50px } .section-title { margin-bottom: 0px } #booth-pricing .block-pricing { background: #fff; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 4px 0 rgba(0, 0, 0, 0.19); display: inline-block; position: relative; min-height: 540px; width: 100% } #booth-pricing .block-pricing .table { margin-bottom: 0; padding: 30px 15px; max-width: 100%; min-height: 2190px; width: 100% } #booth-pricing .block-pricing .table h4 { padding-bottom: 10px } #booth-pricing h4 { color: #000; font-size: 20px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; line-height: 2 } #booth-pricing .block-pricing h2 { margin-bottom: 10px } #booth-pricing h2 { color: #000; font-weight: 600 } #booth-pricing .block-pricing ul { list-style: outside none none; margin: 10px auto; max-width: 240px; padding: 0 } #booth-pricing .block-pricing ul li { border-bottom: 1px solid rgba(153, 153, 153, 0.3); padding: 12px 0; text-align: center; color: #626262; font-size: 13px; font-weight: 400; letter-spacing: 2px; line-height: 30px; text-transform: capitalize } #booth-pricing .block-pricing .table .table_btn a { background: #f33737; width: 200px; color: #fff; margin: 0; display: inline-block } #booth-pricing .block-pricing .table .table_btn a .btn { border: 1px solid #fff; border-radius: 50px; color: #fff; font-size: 11px; font-weight: 600; padding: 15px 40px; text-transform: uppercase; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s } .owl-stage{ margin: 20px; overflow: visible; } .owl-item { box-shadow: 0; transition: 1s all; webkit-transition: 1s all; margin-left: -3px; width: 90%; } .active { box-shadow: 0 0 14px 0 rgba(74,74,74,0.20); }
$(document).ready(function(){ $('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, dotsEach: true, responsiveClass:true, responsive:{ 0:{ items:1, dots:true, nav:false }, 600:{ items:3, dots:true, nav:false }, 1000:{ items:4, dots:true, nav:false } } }) });

Related: See More


Questions / Comments: