نحوه ایجاد اسلاید شو چرخشی بوت استرپ در جوملا 4

[Reza Ganji]

درود
نحوه ایجاد اسلایدشو چرخشی در جوملا 4 با استفاده از بوت استرپ 5 - How to Create a Slideshow (Carousel) in Joomla using Bootstrap

معمولا در بسیاری از مواقع نیاز است در سایت خود از یک اسلایدشو برای نمایش تصاویر موردنظر خود در وب سایت جوملایی خود استفاده کنید.البته الحاقات زیادی برای این منظور وجود دارد ولی این هم یک راه ساده برای این منظور است.

کدهای مورد نیاز در لینک زیر قرار دارد :

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.


برای این منظور میتوانید کدها را درون مطالب یا ماژول های اچ تی ام ال استفاده کنید. هنگام استفاده روی دکمه تغییر ادیتور در پایین ادیتور کلیک کنید تا بصورت کد نمایش داده شود و سپس کد رو بعد از ویرایش ID و نام و مسیر تصاویر در داخل ادیتور بچسبانید.اگر در یک صفحه بیش از یک اسلایدشو استفاده میکنید حتما آدی ها منحصر بفرد باشد و با هم شبیه نباشد.

نمونه اسلایدشو بدون دکمه های ناوبری :

کد: (انتخاب همه)

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

در کد بالا اسلاید اول دارای کلاس اکتیو است و اولین اسلایدی است که نمایش داده میشود. با ویرایش لینک هر آیتم میتوانید مسیر تصویر دلخواه را وارد کنید.

نمونه کد جهت افزودن اسلایدشو همراه با دکمه های ناوبری :

کد: (انتخاب همه)

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" 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="visually-hidden">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="visually-hidden">Next</span>
  </button>
</div>