templates/ui-carousel.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Carousel'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Components', title: 'Carousel'}) }}
  28.                         <div class="row">
  29.                             <div class="col-xl-6">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Slides only</h4>
  33.                                         <p class="card-title-desc">Here’s a carousel with slides only.
  34.                                             Note the presence of the <code>.d-block</code>
  35.                                             and <code>.img-fluid</code> on carousel images
  36.                                             to prevent browser default image alignment.</p>
  37.                                     </div><!-- end card header -->
  39.                                     <div class="card-body">
  40.                                         <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
  41.                                             <div class="carousel-inner" role="listbox">
  42.                                                 <div class="carousel-item active">
  43.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-1.jpg" alt="First slide">
  44.                                                 </div>
  45.                                                 <div class="carousel-item">
  46.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-2.jpg" alt="Second slide">
  47.                                                 </div>
  48.                                                 <div class="carousel-item">
  49.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-3.jpg" alt="Third slide">
  50.                                                 </div>
  51.                                             </div>
  52.                                         </div><!-- end carousel -->
  53.                                     </div><!-- end card-body -->
  54.                                 </div><!-- end card -->
  55.                             </div><!-- end col -->
  57.                             <div class="col-xl-6">
  58.                                 <div class="card">
  59.                                     <div class="card-header">
  60.                                         <h4 class="card-title">With Controls</h4>
  61.                                         <p class="card-title-desc">Adding in the previous and next controls.</p>
  62.                                     </div><!-- end card header -->
  64.                                     <div class="card-body">
  65.                                         <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  66.                                             <div class="carousel-inner" role="listbox">
  67.                                                 <div class="carousel-item active">
  68.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-4.jpg" alt="First slide">
  69.                                                 </div>
  70.                                                 <div class="carousel-item">
  71.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-5.jpg" alt="Second slide">
  72.                                                 </div>
  73.                                                 <div class="carousel-item">
  74.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-6.jpg" alt="Third slide">
  75.                                                 </div>
  76.                                             </div>
  77.                                             <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
  78.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  79.                                                 <span class="sr-only">Previous</span>
  80.                                             </a>
  81.                                             <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
  82.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  83.                                                 <span class="sr-only">Next</span>
  84.                                             </a>
  85.                                         </div><!-- end carousel -->
  86.                                     </div><!-- end card-body -->
  87.                                 </div><!-- end card -->
  88.                             </div><!-- end col -->
  89.                         </div> <!-- end row -->
  91.                         <div class="row">
  92.                             <div class="col-xl-6">
  93.                                 <div class="card">
  94.                                     <div class="card-header">
  95.                                         <h4 class="card-title">With indicators</h4>
  96.                                         <p class="card-title-desc">You can also add the indicators to the
  97.                                             carousel, alongside the controls, too.</p>
  98.                                     </div><!-- end card header -->
  100.                                     <div class="card-body">
  101.                                         <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  102.                                             <ol class="carousel-indicators">
  103.                                                 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
  104.                                                 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
  105.                                                 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
  106.                                             </ol>
  107.                                             <div class="carousel-inner" role="listbox">
  108.                                                 <div class="carousel-item active">
  109.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-3.jpg" alt="First slide">
  110.                                                 </div>
  111.                                                 <div class="carousel-item">
  112.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-2.jpg" alt="Second slide">
  113.                                                 </div>
  114.                                                 <div class="carousel-item">
  115.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-1.jpg" alt="Third slide">
  116.                                                 </div>
  117.                                             </div>
  118.                                             <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
  119.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  120.                                                 <span class="sr-only">Previous</span>
  121.                                             </a>
  122.                                             <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
  123.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  124.                                                 <span class="sr-only">Next</span>
  125.                                             </a>
  126.                                         </div><!-- end carousel -->
  127.                                     </div><!-- end card-body -->
  128.                                 </div><!-- end card -->
  129.                             </div> <!-- end col -->
  131.                             <div class="col-xl-6">
  132.                                 <div class="card">
  133.                                     <div class="card-header">
  134.                                         <h4 class="card-title">With captions</h4>
  135.                                         <p class="card-title-desc">Add captions to your slides easily with the <code>.carousel-caption</code> element within
  136.                                             any <code>.carousel-item</code>.</p>
  137.                                     </div><!-- end card header -->
  139.                                     <div class="card-body">
  140.                                         <div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
  141.                                             <div class="carousel-inner" role="listbox">
  142.                                                 <div class="carousel-item active">
  143.                                                     <img src="/images/small/img-7.jpg" alt="..." class="d-block img-fluid mx-auto">
  144.                                                     <div class="carousel-caption d-none d-md-block text-white-50">
  145.                                                         <h5 class="text-white">First slide label</h5>
  146.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  147.                                                     </div>
  148.                                                 </div>
  149.                                                 <div class="carousel-item">
  150.                                                     <img src="/images/small/img-5.jpg" alt="..." class="d-block img-fluid mx-auto">
  151.                                                     <div class="carousel-caption d-none d-md-block text-white-50">
  152.                                                         <h5 class="text-white">Second slide label</h5>
  153.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  154.                                                     </div>
  155.                                                 </div>
  156.                                                 <div class="carousel-item">
  157.                                                     <img src="/images/small/img-4.jpg" alt="..." class="d-block img-fluid mx-auto">
  158.                                                     <div class="carousel-caption d-none d-md-block text-white-50">
  159.                                                         <h5 class="text-white">Third slide label</h5>
  160.                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  161.                                                     </div>
  162.                                                 </div>
  163.                                             </div>
  164.                                             <a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
  165.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  166.                                                 <span class="sr-only">Previous</span>
  167.                                             </a>
  168.                                             <a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
  169.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  170.                                                 <span class="sr-only">Next</span>
  171.                                             </a>
  172.                                         </div><!-- end carousel -->
  173.                                     </div><!-- end card-body -->
  174.                                 </div><!-- end card -->
  175.                             </div> <!-- end col -->
  176.                         </div> <!-- end row -->
  178.                         <div class="row">
  179.                             <div class="col-xl-6">
  180.                                 <div class="card">
  181.                                     <div class="card-header">
  182.                                         <h4 class="card-title">Crossfade</h4>
  183.                                         <p class="card-title-desc">Add <code>.carousel-fade</code> to your carousel to animate slides with a fade transition instead of a slide.</p>
  184.                                     </div><!-- end card header -->
  186.                                     <div class="card-body">
  187.                                         <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  188.                                             <ol class="carousel-indicators">
  189.                                                 <li data-bs-target="#carouselExampleFade" data-bs-slide-to="0" class="active"></li>
  190.                                                 <li data-bs-target="#carouselExampleFade" data-bs-slide-to="1"></li>
  191.                                                 <li data-bs-target="#carouselExampleFade" data-bs-slide-to="2"></li>
  192.                                             </ol>
  193.                                             <div class="carousel-inner">
  194.                                                 <div class="carousel-item active">
  195.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-1.jpg" alt="First slide">
  196.                                                 </div>
  197.                                                 <div class="carousel-item">
  198.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-2.jpg" alt="Second slide">
  199.                                                 </div>
  200.                                                 <div class="carousel-item">
  201.                                                     <img class="d-block img-fluid mx-auto" src="/images/small/img-3.jpg" alt="Third slide">
  202.                                                 </div>
  203.                                             </div>
  204.                                             <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
  205.                                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  206.                                                 <span class="sr-only">Previous</span>
  207.                                             </a>
  208.                                             <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
  209.                                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  210.                                                 <span class="sr-only">Next</span>
  211.                                             </a>
  212.                                         </div><!-- end carousel -->
  213.                                     </div><!-- end card-body -->
  214.                                 </div><!-- end card -->
  215.                             </div> <!-- end col -->
  216.                         </div><!-- end row -->
  218.                     </div>
  219.                     <!-- container-fluid -->
  220.                 </div>
  221.                 <!-- End Page-content -->
  223.                 {{ include('partials/footer.html.twig') }}
  225.             </div>
  226.             <!-- end main content-->
  228.         </div>
  229.         <!-- END layout-wrapper -->
  231.         {{ include('partials/right-sidebar.html.twig') }}
  233.         {{ include('partials/vendor-scripts.html.twig') }}
  235.         <script src="/js/app.js"></script>
  237.     </body>
  238. </html>