اسلایدر اسلیک
در اینجا چند کاروسل و اسلایدر بسیار جذاب ساخته شده با عشق و اسلایدر اسلیک است.
می توانید جزئیات بیشتر را در اینجا مشاهده کنید.
اسلایدر پیش نمایش کارت
یک کارت عالی و زیبا که با اسلیک ساخته شده است
مثال کد
<div class="slider-init" data-slick='{"arrows": false, "dots": true, "slidesToShow": 3, "slidesToScroll": 1, "infinite":false, "responsive":[ {"breakpoint": 992,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}} ]}'> <div class="col"> <div class="card"> <img src="./images/stock/a.jpg" class="card-img-top" alt=""> <div class="card-inner"> <h5 class="card-title">کارت با لینک کشیده</h5> <p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p> <a href="#" class="btn btn-primary">رفتن به جایی</a> </div> </div> </div> <div class="col"> <div class="card"> <img src="./images/stock/b.jpg" class="card-img-top" alt=""> <div class="card-inner"> <h5 class="card-title">کارت با لینک کشیده</h5> <p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p> <a href="#" class="btn btn-primary">رفتن به جایی</a> </div> </div> </div> <div class="col"> <div class="card"> <img src="./images/stock/c.jpg" class="card-img-top" alt=""> <div class="card-inner"> <h5 class="card-title">کارت با لینک کشیده</h5> <p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p> <a href="#" class="btn btn-primary">رفتن به جایی</a> </div> </div> </div> <div class="col"> <div class="card"> <img src="./images/stock/d.jpg" class="card-img-top" alt=""> <div class="card-inner"> <h5 class="card-title">کارت با لینک کشیده</h5> <p class="card-text">چند مثال متن کوتاه برای ساختن عنوان کارت و تشکیل بخش عمده ای از محتوای کارت.</p> <a href="#" class="btn btn-primary">رفتن به جایی</a> </div> </div> </div> </div>
کاروسل جدول قیمت گذاری
کاروسل جدول قیمت گذاری واکنشگرا با اسلیک.
مثال کد
<div class="slider-init" data-slick='{"slidesToShow": 3, "slidesToScroll": 1, "infinite":false, "responsive":[ {"breakpoint": 992,"settings":{"slidesToShow": 2}}, {"breakpoint": 768,"settings":{"slidesToShow": 1}} ]}'> <div class="col"> <div class="card pricing"> <div class="pricing-head"> <div class="pricing-title"> <h4 class="card-title title">شروع</h4> <p class="sub-text">از سطح ورودی سرمایه گذاری و کسب درآمد لذت ببرید.</p> </div> <div class="card-text"> <div class="row"> <div class="col-6"> <span class="h4 fw-500">1.67%</span> <span class="sub-text">سود روزانه</span> </div> <div class="col-6"> <span class="h4 fw-500">30</span> <span class="sub-text">روز مهلت</span> </div> </div> </div> </div> <div class="pricing-body"> <ul class="pricing-features"> <li><span class="w-50">حداقل واریز</span> - <span class="ms-auto">250,000 تومان</span></li> <li><span class="w-50">حداکثر واریز</span> - <span class="ms-auto">1,999,000 تومان</span></li> <li><span class="w-50">بازگشت وجه واریزی</span> - <span class="ms-auto">بله</span></li> <li><span class="w-50">مجموع بازگشت وجه</span> - <span class="ms-auto">125%</span></li> </ul> <div class="pricing-action"> <button class="btn btn-outline-light">انتخاب این طرح</button> </div> </div> </div> </div> <div class="col"> <div class="card pricing"> <div class="pricing-head"> <div class="pricing-title"> <h4 class="card-title title">شروع</h4> <p class="sub-text">از سطح ورودی سرمایه گذاری و کسب درآمد لذت ببرید.</p> </div> <div class="card-text"> <div class="row"> <div class="col-6"> <span class="h4 fw-500">1.67%</span> <span class="sub-text">سود روزانه</span> </div> <div class="col-6"> <span class="h4 fw-500">30</span> <span class="sub-text">روز مهلت</span> </div> </div> </div> </div> <div class="pricing-body"> <ul class="pricing-features"> <li><span class="w-50">حداقل واریز</span> - <span class="ms-auto">250,000 تومان</span></li> <li><span class="w-50">حداکثر واریز</span> - <span class="ms-auto">1,999,000 تومان</span></li> <li><span class="w-50">بازگشت وجه واریزی</span> - <span class="ms-auto">بله</span></li> <li><span class="w-50">مجموع بازگشت وجه</span> - <span class="ms-auto">125%</span></li> </ul> <div class="pricing-action"> <button class="btn btn-outline-light">انتخاب این طرح</button> </div> </div> </div> </div> <div class="col"> <div class="card pricing"> <div class="pricing-head"> <div class="pricing-title"> <h4 class="card-title title">شروع</h4> <p class="sub-text">از سطح ورودی سرمایه گذاری و کسب درآمد لذت ببرید.</p> </div> <div class="card-text"> <div class="row"> <div class="col-6"> <span class="h4 fw-500">1.67%</span> <span class="sub-text">سود روزانه</span> </div> <div class="col-6"> <span class="h4 fw-500">30</span> <span class="sub-text">روز مهلت</span> </div> </div> </div> </div> <div class="pricing-body"> <ul class="pricing-features"> <li><span class="w-50">حداقل واریز</span> - <span class="ms-auto">250,000 تومان</span></li> <li><span class="w-50">حداکثر واریز</span> - <span class="ms-auto">1,999,000 تومان</span></li> <li><span class="w-50">بازگشت وجه واریزی</span> - <span class="ms-auto">بله</span></li> <li><span class="w-50">مجموع بازگشت وجه</span> - <span class="ms-auto">125%</span></li> </ul> <div class="pricing-action"> <button class="btn btn-outline-light">انتخاب این طرح</button> </div> </div> </div> </div> <div class="col"> <div class="card pricing"> <div class="pricing-head"> <div class="pricing-title"> <h4 class="card-title title">شروع</h4> <p class="sub-text">از سطح ورودی سرمایه گذاری و کسب درآمد لذت ببرید.</p> </div> <div class="card-text"> <div class="row"> <div class="col-6"> <span class="h4 fw-500">1.67%</span> <span class="sub-text">سود روزانه</span> </div> <div class="col-6"> <span class="h4 fw-500">30</span> <span class="sub-text">روز مهلت</span> </div> </div> </div> </div> <div class="pricing-body"> <ul class="pricing-features"> <li><span class="w-50">حداقل واریز</span> - <span class="ms-auto">250,000 تومان</span></li> <li><span class="w-50">حداکثر واریز</span> - <span class="ms-auto">1,999,000 تومان</span></li> <li><span class="w-50">بازگشت وجه واریزی</span> - <span class="ms-auto">بله</span></li> <li><span class="w-50">مجموع بازگشت وجه</span> - <span class="ms-auto">125%</span></li> </ul> <div class="pricing-action"> <button class="btn btn-outline-light">انتخاب این طرح</button> </div> </div> </div> </div> </div>