<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-carousel.html.twig */
class __TwigTemplate_1c09387fae445c28d7d0331c2a66fcc2 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-carousel.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-carousel.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-carousel.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "Carousel
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "Carousel"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Slides Only</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Here’s a carousel with slides only.
\t\t\t\t\t\t                                            Note the presence of the
\t\t\t\t\t\t<code>.d-block</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.img-fluid</code>
\t\t\t\t\t\ton carousel images
\t\t\t\t\t\t                                            to prevent browser default image alignment.</p>

\t\t\t\t\t<div id=\"carouselExampleSlidesOnly\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-3.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>

\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With Controls</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Adding in the previous and next controls:</p>

\t\t\t\t\t<!-- START carousel-->
\t\t\t\t\t<div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-4.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- END carousel-->
\t\t</div>
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With Indicators</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can also add the indicators to the
\t\t\t\t\t\t                                            carousel, alongside the controls, too.</p>

\t\t\t\t\t<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<ol class=\"carousel-indicators\">
\t\t\t\t\t\t\t<li data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"0\" class=\"active\"></li>
\t\t\t\t\t\t\t<li data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"1\"></li>
\t\t\t\t\t\t\t<li data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"2\"></li>
\t\t\t\t\t\t</ol>
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-3.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With Captions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add captions to your slides easily with the
\t\t\t\t\t\t<code>.carousel-caption</code>
\t\t\t\t\t\telement within any
\t\t\t\t\t\t<code>.carousel-item</code>.</p>

\t\t\t\t\t<div id=\"carouselExampleCaption\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" alt=\"...\" class=\"d-block img-fluid\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h3 class=\"text-white\">First slide label</h3>
\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-3.jpg\" alt=\"...\" class=\"d-block img-fluid\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h3 class=\"text-white\">Second slide label</h3>
\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-2.jpg\" alt=\"...\" class=\"d-block img-fluid\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h3 class=\"text-white\">Third slide label</h3>
\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleCaption\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleCaption\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Crossfade</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.carousel-fade</code>
\t\t\t\t\t\tto your carousel to animate slides with a fade transition instead of a slide.</p>

\t\t\t\t\t<div id=\"carouselExampleFade\" class=\"carousel slide carousel-fade\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-3.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleFade\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleFade\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Individual Interval</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>data-bs-interval=\"\"</code>
\t\t\t\t\t\tto a
\t\t\t\t\t\t<code>.carousel-item</code>
\t\t\t\t\t\tto change the amount of time to delay between automatically cycling to the next item.</p>

\t\t\t\t\t<div id=\"carouselExampleInterval\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\" data-bs-interval=\"1000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-4.jpg\" class=\"img-fluid d-block w-100\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\" data-bs-interval=\"2000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-2.jpg\" class=\"img-fluid d-block w-100\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"img-fluid d-block w-100\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Dark variant</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Add
\t\t\t\t\t\t<code>.carousel-dark</code>
\t\t\t\t\t\tto the
\t\t\t\t\t\t<code>.carousel</code>
\t\t\t\t\t\tfor darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the
\t\t\t\t\t\t<code>filter</code>
\t\t\t\t\t\tCSS property. Captions and controls have additional Sass variables that customize the
\t\t\t\t\t\t<code>color</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>background-color</code>.</p>

\t\t\t\t\t<div id=\"carouselExampleDark\" class=\"carousel carousel-dark slide\">
\t\t\t\t\t\t<div class=\"carousel-indicators\">
\t\t\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"0\" class=\"active\" aria-current=\"true\" aria-label=\"Slide 1\"></button>
\t\t\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>
\t\t\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"carousel-inner\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\" data-bs-interval=\"10000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-5.jpg\" class=\"img-fluid\" alt=\"Images\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h5>First slide label</h5>
\t\t\t\t\t\t\t\t\t<p>Some representative placeholder content for the first slide.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\" data-bs-interval=\"2000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-6.jpg\" class=\"img-fluid\" alt=\"Images\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h5>Second slide label</h5>
\t\t\t\t\t\t\t\t\t<p>Some representative placeholder content for the second slide.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-7.jpg\" class=\"img-fluid\" alt=\"Images\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h5>Third slide label</h5>
\t\t\t\t\t\t\t\t\t<p>Some representative placeholder content for the third slide.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row-->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-carousel.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  113 => 11,  103 => 10,  90 => 7,  80 => 6,  60 => 3,  37 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Carousel
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'Carousel' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Slides Only</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Here’s a carousel with slides only.
\t\t\t\t\t\t                                            Note the presence of the
\t\t\t\t\t\t<code>.d-block</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>.img-fluid</code>
\t\t\t\t\t\ton carousel images
\t\t\t\t\t\t                                            to prevent browser default image alignment.</p>

\t\t\t\t\t<div id=\"carouselExampleSlidesOnly\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-3.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>

\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With Controls</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Adding in the previous and next controls:</p>

\t\t\t\t\t<!-- START carousel-->
\t\t\t\t\t<div id=\"carouselExampleControls\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-4.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleControls\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t\t<!-- END carousel-->
\t\t</div>
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With Indicators</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">You can also add the indicators to the
\t\t\t\t\t\t                                            carousel, alongside the controls, too.</p>

\t\t\t\t\t<div id=\"carouselExampleIndicators\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<ol class=\"carousel-indicators\">
\t\t\t\t\t\t\t<li data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"0\" class=\"active\"></li>
\t\t\t\t\t\t\t<li data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"1\"></li>
\t\t\t\t\t\t\t<li data-bs-target=\"#carouselExampleIndicators\" data-bs-slide-to=\"2\"></li>
\t\t\t\t\t\t</ol>
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-3.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleIndicators\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleIndicators\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With Captions</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add captions to your slides easily with the
\t\t\t\t\t\t<code>.carousel-caption</code>
\t\t\t\t\t\telement within any
\t\t\t\t\t\t<code>.carousel-item</code>.</p>

\t\t\t\t\t<div id=\"carouselExampleCaption\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\" role=\"listbox\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" alt=\"...\" class=\"d-block img-fluid\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h3 class=\"text-white\">First slide label</h3>
\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-3.jpg\" alt=\"...\" class=\"d-block img-fluid\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h3 class=\"text-white\">Second slide label</h3>
\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-2.jpg\" alt=\"...\" class=\"d-block img-fluid\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h3 class=\"text-white\">Third slide label</h3>
\t\t\t\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleCaption\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleCaption\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Crossfade</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.carousel-fade</code>
\t\t\t\t\t\tto your carousel to animate slides with a fade transition instead of a slide.</p>

\t\t\t\t\t<div id=\"carouselExampleFade\" class=\"carousel slide carousel-fade\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-1.jpg\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-2.jpg\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img class=\"d-block img-fluid\" src=\"/images/small/small-3.jpg\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleFade\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleFade\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Individual Interval</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>data-bs-interval=\"\"</code>
\t\t\t\t\t\tto a
\t\t\t\t\t\t<code>.carousel-item</code>
\t\t\t\t\t\tto change the amount of time to delay between automatically cycling to the next item.</p>

\t\t\t\t\t<div id=\"carouselExampleInterval\" class=\"carousel slide\" data-bs-ride=\"carousel\">
\t\t\t\t\t\t<div class=\"carousel-inner\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\" data-bs-interval=\"1000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-4.jpg\" class=\"img-fluid d-block w-100\" alt=\"First slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\" data-bs-interval=\"2000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-2.jpg\" class=\"img-fluid d-block w-100\" alt=\"Second slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-1.jpg\" class=\"img-fluid d-block w-100\" alt=\"Third slide\">
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<a class=\"carousel-control-prev\" href=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a class=\"carousel-control-next\" href=\"#carouselExampleInterval\" role=\"button\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-lg-6\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Dark variant</h4>
\t\t\t\t\t<p class=\"text-muted font-14\">Add
\t\t\t\t\t\t<code>.carousel-dark</code>
\t\t\t\t\t\tto the
\t\t\t\t\t\t<code>.carousel</code>
\t\t\t\t\t\tfor darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the
\t\t\t\t\t\t<code>filter</code>
\t\t\t\t\t\tCSS property. Captions and controls have additional Sass variables that customize the
\t\t\t\t\t\t<code>color</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>background-color</code>.</p>

\t\t\t\t\t<div id=\"carouselExampleDark\" class=\"carousel carousel-dark slide\">
\t\t\t\t\t\t<div class=\"carousel-indicators\">
\t\t\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"0\" class=\"active\" aria-current=\"true\" aria-label=\"Slide 1\"></button>
\t\t\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>
\t\t\t\t\t\t\t<button type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<div class=\"carousel-inner\">
\t\t\t\t\t\t\t<div class=\"carousel-item active\" data-bs-interval=\"10000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-5.jpg\" class=\"img-fluid\" alt=\"Images\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h5>First slide label</h5>
\t\t\t\t\t\t\t\t\t<p>Some representative placeholder content for the first slide.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\" data-bs-interval=\"2000\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-6.jpg\" class=\"img-fluid\" alt=\"Images\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h5>Second slide label</h5>
\t\t\t\t\t\t\t\t\t<p>Some representative placeholder content for the second slide.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<div class=\"carousel-item\">
\t\t\t\t\t\t\t\t<img src=\"/images/small/small-7.jpg\" class=\"img-fluid\" alt=\"Images\">
\t\t\t\t\t\t\t\t<div class=\"carousel-caption d-none d-md-block\">
\t\t\t\t\t\t\t\t\t<h5>Third slide label</h5>
\t\t\t\t\t\t\t\t\t<p>Some representative placeholder content for the third slide.</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t</div>
\t\t\t\t\t\t<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide=\"prev\">
\t\t\t\t\t\t\t<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Previous</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t\t<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#carouselExampleDark\" data-bs-slide=\"next\">
\t\t\t\t\t\t\t<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>
\t\t\t\t\t\t\t<span class=\"visually-hidden\">Next</span>
\t\t\t\t\t\t</button>
\t\t\t\t\t</div>

\t\t\t\t</div>
\t\t\t</div>
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row-->

{% endblock %}
", "ui-carousel.html.twig", "C:\\Users\\4\\Desktop\\Anant\\jidox\\jidox_symfony\\Jidox\\templates\\ui-carousel.html.twig");
    }
}
