آریا بوت استرپ | آموزش

کتابخانه بوت استرپ دوگانه چپ چین و راست چین
ارائه شده توسط شرکت توسعه فن آوری آریا وندیداد

آریا بوت استرپ، بر پایه بوت استرپ نسخه 4.5.3

آریا بوت استرپ بوت استرپ راست چین بوت استرپ
arya bootstrap bootstrap-rtl bootstrap
bootstrap 4.5.3 2021-01-09
استفاده از کروسل راست چین | RTL Carousel in AryaBootstrap 4

استفاده از کروسل یا اسلایدشو آریا بوت استرپ

کروسل بوت استرپ یکی از کامپوننتهای مفید کتابخانه بوت استرپ است. در نسخه جدید آریابوت استرپ این کامپوننت برای صفحات راست چین بروزرسانی شده، به گونه ای که تصاویر از سمت راست تصاویر وارد می شوند. این موضوع برای اسلایدهایی که حاوی متن هستند بسیار پر اهمیت است.
آموزش کامپوننتهای بوت استرپ 1397/12/09 2143 16 پیوند مستقیم

آموزش استفاده از کروسل راست چین در آریا بوت استرپ  | RTL Carousel in AryaBootstrap 4
16

در نسخه جدید آریابوت استرپ کروسل به جهت راست چین حرکت می‌کند، در این حالت متون فارسی که روی اسلایدها قرار گرفته‌اند از سمت راست وارد صفحه می‌شوند. همچنین دکمه‌های بعدی و قبلی نیز به جهت راست چین اسلایدها را تغییر می‌دهند.

ابتدا کدهای لازم برای کروسل را از سایت بوت استرپ دریافت کنید. این کامپوننت دارای ویژگی‌های مختلفی است که می‌توانید بنا به نیاز و طراحی وب سایت خود از آن استفاده نماید. در کد زیر یک کامپوننت کامل (همراه با تمامی امکانات اسلایدشو تصویر، متن، دکمه های بعدی، قبلی و گزینه‌های انتخابی) انتخاب شده است.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="bd-example">
  <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
      <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
      </div>
      <div class="carousel-item">
        <img src="..." class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

برای استفاده از کامپوننت کروسل بوت استرپ علاوه بر کپی کدهای HTML باید با استفاده از کد جاوا اسکریپت این کامپوننت را راه‌اندازی کنید. کروسل جزو دسته کامپوننتهای بوت استرپ است که نیازمند فایل جاوا اسکریپت بوت استرپ است.
برای این منظور کافی است کد زیر را در انتهای صفحه (یا همراه با رویداد در ابتدای صفحه) قرار دهید:

1
$('.carousel').carousel();

در کد بالا با استفاده از جی‌کوئری کلاس .carousel پیدا شده و به کروسل تبدیل می‌شود. این کد باعث حرکت تصاویر کروسل شده و کلیدهای بعدی، قبلی و گزینه‌های انتخابی زیر تصاویر را فعال می‌سازد.

برخی تنظیمات کروسل:

با استفاده از data-interval="" می‌توان زمان مورد انتظار برای هر اسلاید را تنظیم نمود. به مثال زیر توجه کنید:

1
<div class="carousel-item" data-interval="2000">

همان‌طور که در مثال بالا نیز دیده می‌شود، هر آیتم می‌تواند زمان انتظار خاص خود را داشته باشد.
میزان زمان انتظار به صورت پیش‌فرض برای همه آیتم‌ها یکسان بوده و برابر با 5000ms یا 5 ثانیه است که در کد جاوا اسکریپت کروسل تنظیم می‌شود. در زمان انتخاب کروسل می‌توان با کلیدهای صفحه کلید، اسلایدها را حرکت داد، این امکان به صورت پیش‌فرض فعال بوده که می‌توانید آن را از طریق کد جاوا اسکریپت غیرفعال کنید. و ... برای نمونه به کد جاوا اسکریپت زیر توجه کنید:

1
2
3
4
$('.carousel').carousel({
  interval: 5000,
  keyboard: true
})
ثبت کننده:آریا وندیداد تاریخ ثبت:1397/12/09
موضوع: آموزش کامپوننتهای بوت استرپ
تعداد بازدید:2143


1 دیدگاه

محمد جواد 1400/06/20 10:09
کد انتهایی کروسل دقیقا در کجا با

پاسخ به این دیدگاه

حسین خزائی 1400/07/05 12:09

سلام

می تونید کد کروسل رو در ابتدای فایل در بخش document.ready مربوط به اسکریپت صفحه یا در بخش انتهایی فایل و در یک اسکریپت معمولی قرار بدید:

برای مثال کد مربوط به ابتدای صفحه:

1
2
3
4
5
6
7
    <script>
        $(function () {
            $('.carousel').carousel();
            $('[data-toggle="popover"]').popover();
            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>

دیدگاه شما

کاربر گرامی خواهشمند است به موارد زیر دقت فرمایید:
• لطفا فارسی تایپ کنید و با حروف لاتین (فینگلیش) ننویسید.
• دیدگاه های ارائه شده پس از بازبینی منتشر می‌شود.
• آدرس ایمیل در سایت نمایش داده نمی شود.