اسلایدر اسلیک
در اینجا چند کاروسل و اسلایدر بسیار جذاب ساخته شده با عشق و اسلایدر اسلیک است.
می توانید جزئیات بیشتر را در اینجا مشاهده کنید.
اسلایدر پیش نمایش کارت
یک کارت عالی و زیبا که با اسلیک ساخته شده است
مثال کد
<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>