اسلایدر
اسلایدر
بررسی کلی وبسایت رسمی
اسلایدر Swiper با انتقالهای سختافزاری سریع و رفتارهای بومی فوقالعاده، بهترین اسلایدر مدرن است.
CSS
<!-- CSS اسلایدر Swiper -->
<link href="assets/libs/swiper/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
جاوااسکریپت
<!-- JS اسلایدر Swiper -->
<script src="assets/libs/swiper/swiper-bundle.min.js"></script>
اسکریپت سفارشی
<!-- اسکریپت swiper -->
<script src="assets/js/pages/extended-swiper.js"></script>
اسلایدر پیشفرض
<div class="swiper default-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" >
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" >
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" >
</div>
</div>
</div>
اسلایدر با ناوبری و صفحهبندی
اسلایدر با صفحهبندی پویا
<div class="swiper pagination-dynamic-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-7.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-8.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-9.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination dynamic-pagination"></div>
</div>
اسلایدر با صفحهبندی کسری
<div class="swiper pagination-fraction-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-10.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-11.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-12.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
اسلایدر با صفحهبندی سفارشی
<div class="swiper pagination-custom-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination pagination-custom"></div>
</div>
اسلایدر با صفحهبندی پیشرفته
<div class="swiper pagination-progress-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-7.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
اسکرولبار با اسلایدر
<div class="swiper pagination-scrollbar-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-8.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-9.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-10.jpg" alt="" />
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-scrollbar"></div>
</div>
اسلایدر عمودی
<div class="swiper vertical-swiper rounded" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-11.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-12.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
کنترل ماوسویل اسلایدر
<div class="swiper mousewheel-control-swiper rounded" style="height: 324px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-3.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-4.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-5.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
اثر محو اسلایدر
<div class="swiper effect-fade-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-6.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-7.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-8.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
اثر خلاقانه اسلایدر
<!-- Swiper -->
<div class="swiper effect-creative-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-9.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-10.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-11.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>
اثر فلیپ اسلایدر
<!-- Swiper -->
<div class="swiper effect-flip-swiper rounded">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="assets/images/small/img-12.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-1.jpg" alt="" />
</div>
<div class="swiper-slide">
<img src="assets/images/small/img-2.jpg" alt="" />
</div>
</div>
<div class="swiper-pagination"></div>
</div>