اسلایدر

یک جزء نمایش اسلاید برای دوچرخه سواری در میان عناصر - تصاویر یا اسلایدهای متن - مانند اسلایدر.

اسلایدر در بوت استرپ
مثال پایه
<div class="carousel slide" id="carouselExampleControls" data-bs-ride="carousel">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></button></div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active"><img class="d-block w-100" src="../../../assets/img/generic/6.jpg" alt="First slide" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/7.jpg" alt="اسلاید دوم" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/8.jpg" alt="اسلاید سوم" /></div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>
اسلایدر مدل دار
<div class="carousel slide theme-slider text-center" id="controlStyledExample" data-ride="carousel">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#controlStyledExample" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#controlStyledExample" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#controlStyledExample" data-bs-slide-to="2" aria-label="Slide 3"></button></div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active"><img class="d-block w-100" src="../../../assets/img/generic/6.jpg" alt="First slide" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/7.jpg" alt="اسلاید دوم" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/8.jpg" alt="اسلاید سوم" /></div><button class="carousel-control-prev" type="button" data-bs-target="#controlStyledExample" data-bs-slide="prev">
      <span class="fas fa-angle-left"></span>
      <span class="sr-only">Previous</span>
    </button><button class="carousel-control-next" type="button" data-bs-target="#controlStyledExample" data-bs-slide="next">
      <span class="fas fa-angle-right"></span>
      <span class="sr-only">Next</span>
    </button>
  </div>
</div>
با زیرنویس
<div class="carousel slide" id="carouselExampleCaptions" data-ride="carousel">
  <div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button></div>
  <div class="carousel-inner rounded-1 light">
    <div class="carousel-item active"><img class="d-block w-100" src="../../../assets/img/generic/5.jpg" alt="First slide" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-white">First Slide Heading</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/chat/8.jpg" alt="اسلاید دوم" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-white">Second Slide Heading</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/9.jpg" alt="اسلاید سوم" />
      <div class="carousel-caption d-none d-md-block">
        <h5 class="text-white">Third Slide Heading</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>
محو شدن مثال
<div class="carousel slide carousel-fade" id="carouselExampleFade" data-ride="carousel">
  <div class="carousel-inner rounded">
    <div class="carousel-item active"><img class="d-block w-100" src="../../../assets/img/generic/8.jpg" alt="First slide" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/7.jpg" alt="اسلاید دوم" /></div>
    <div class="carousel-item"><img class="d-block w-100" src="../../../assets/img/generic/6.jpg" alt="اسلاید سوم" /></div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

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

نسخه 3.4.0

تنظیمات

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

طرح رنگ بندی

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


RTL حالت

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

RTL راهنما

چیدمان سیال

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

راهنما سیال

موقعیت ناوبری

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


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

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

دیدن راهنما

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

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

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