Bootstrap/site/content/docs/5.0/examples/carousel-rtl/index.html

---
layout: examples
title: قالب دائري
direction: rtl
extra_css:
  - "../carousel/carousel.rtl.css"
---

<header>
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">دائري</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">حلقة الوصل</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معاق</a>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
          <button class="btn btn-outline-success" type="submit">بحث</button>
        </form>
      </div>
    </div>
  </nav>
</header>

<main>

  <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
        <div class="container">
          <div class="carousel-caption text-start">
            <h1>عنوان المثال.</h1>
            <p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p>
            <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
        <div class="container">
          <div class="carousel-caption">
            <h1>عنوان مثال آخر.</h1>
            <p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p>
            <p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        {{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
        <div class="container">
          <div class="carousel-caption text-end">
            <h1>واحد أكثر لقياس جيد.</h1>
            <p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p>
            <p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">السابق</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">التالى</span>
    </button>
  </div>


  <!-- Marketing messaging and featurettes
  ================================================== -->
  <!-- Wrap the rest of the page in another container to center all the content. -->

  <div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
      <div class="col-lg-4">
        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
        <h2>عنوان</h2>
        <p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p>
        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4">
        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
        <h2>عنوان</h2>
        <p>هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.</p>
        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
      </div><!-- /.col-lg-4 -->
      <div class="col-lg-4">
        {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
        <h2>عنوان</h2>
        <p>غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.</p>
        <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
      </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
        <p class="lead">في التخطيط التجارية هذا, إذ هذه الشمل موالية الخاطفة. أحدث وبدون اتفاق من غير, جعل عل أطراف مشاركة الأعمال. بل الى قادة واحدة, لهيمنة التجارية حتى ثم. هو وبالرغم ابتدعها بال. بوابة ماشاء أما أي, ما وفي أحكم غريمه التقليدية.</p>
      </div>
      <div class="col-md-5">
        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7 order-md-2">
        <h2 class="featurette-heading">أوه نعم ، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
        <p class="lead">صفحة وحرمان الأراضي أم أخذ, قد ذلك الثقيلة المتاخمة وبريطانيا. أخذ أن اللا لإعلان لهيمنة, وفي كل موالية الشّعبين. تكاليف الخاسرة لمّ لم, إذ بحق موالية الثقيلة. العظمى والفلبين تم عرض, جمعت شعار الحرة حيث بل. عرض و وترك اللازمة.</p>
      </div>
      <div class="col-md-5 order-md-1">
        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
      </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
      <div class="col-md-7">
        <h2 class="featurette-heading">وأخيرًا ، هذا. <span class="text-muted"> كش ملك. </span></h2>
        <p class="lead">تحرّك أراضي هذا عن, كرسي وكسبت يتم بل. بحق بل القوى وفنلندا, الجو واُسدل التكاليف وتم تم, بسبب ا السادس كان أن. وبعد ميناء من بلا, تصفح يتبقّ تلك هو. ان دول بخطوط وإعلان ومطالبة, المزيفة الأوروبية، عل حدى قام.</p>
      </div>
      <div class="col-md-5">
        {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
      </div>
    </div>

    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->

  </div><!-- /.container -->


  <!-- FOOTER -->
  <footer class="container">
    <p class="float-end"><a href="#">عد إلى الأعلى</a></p>
    <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">خصوصية</a> &middot; <a href="#">شروط</a></p>
  </footer>
</main>