سوایپر

Swiper مدرن ترین نوار لغزنده لمسی رایگان تلفن همراه با انتقال سریع سخت افزاری و رفتار بومی شگفت انگیز است. در نظر گرفته شده است که در وب سایت های تلفن همراه، برنامه های وب تلفن همراه و برنامه های بومی/هیبرید تلفن همراه استفاده شود.

مستندات برای سوایپر
سوایپر با تصویر کوچک

این را می توان به سادگی با استفاده از ویژگی انجام داد. برای Swiper با تصویر بند انگشتی از thumb گزینه‌ها در pug/HTML خود استفاده کنید. می‌توانید با ارائه thumbOptions: '#parentID' مقدار در thumb گزینه‌ها، تصویر کوچک را برای یک والدین خاص قرار دهید. در غیر این صورت تصویر کوچک بعد از .swiper-container عنصر قرار می گیرد.

<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper-container theme-slider" data-swiper='{"spaceBetween":5,"loop":true,"loopedSlides":5,"thumb":{"spaceBetween":5,"slidesPerView":5,"loop":true,"freeMode":true,"grabCursor":true,"loopedSlides":5,"centeredSlides":true,"slideToClickedSlide":true,"watchSlidesVisibility":true,"watchSlidesProgress":true},"slideToClickedSlide":true}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="rounded-1 img-fluid" src="../../../assets/img/generic/1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/2.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/3.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/5.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/6.jpg" alt="" /></div>
      </div>
      <div class="swiper-nav">
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
      </div>
    </div>
  </div>
</div>
سوایپر بدون تصویر کوچک

برای Swiper بدون تصویر کوچک، به سادگی گزینه های انگشت شست را از Pug/HTML خود حذف کنید.

<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper-container theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="rounded-1 img-fluid" src="../../../assets/img/generic/1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/2.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/3.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/5.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/6.jpg" alt="" /></div>
      </div>
      <div class="swiper-nav">
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"> </div>
      </div>
    </div>
  </div>
</div>
سوایپر بدون ناوبری

برای Swiper بدون ناوبری به سادگی html زیر را از pug/HTML خود حذف کنید.

<div class="swiper-nav">
  <div class="swiper-button-next swiper-button-white"></div>
  <div class="swiper-button-prev swiper-button-white"></div>
</div>
سوایپر بدون ناوبری مثال
<div class="row">
  <div class="col-lg-12 mb-4 mb-lg-0">
    <div class="swiper-container theme-slider" data-swiper='{"autoplay":true,"spaceBetween":5,"loop":true,"loopedSlides":5,"slideToClickedSlide":true}'>
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img class="rounded-1 img-fluid" src="../../../assets/img/generic/1.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/2.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/3.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/4.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/5.jpg" alt="" /></div>
        <div class="swiper-slide"> <img class="rounded-1 img-fluid" src="../../../assets/img/generic/6.jpg" alt="" /></div>
      </div>
    </div>
  </div>
</div>
فایل CSS
<link href="vendors/swiper/swiper-bundle.min.css" rel="stylesheet" />
جاوا اسکریپت
<script src="vendors/swiper/swiper-bundle.min.js"></script>

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.

RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما
چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال
موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید

سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی