templates/carousel/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5. <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Carousel</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Advanced UI</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Carousel</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-md-12 col-lg-4">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Carousel</h3>
  25.                                         </div>
  26.                                         <div class="card-body h-100">
  27.                                             <div id="carousel-default" class="carousel slide" data-bs-ride="carousel">
  28.                                                 <div class="carousel-inner">
  29.                                                     <div class="carousel-item active">
  30.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/9.jpg'))}}" data-bs-holder-rendered="true">
  31.                                                     </div>
  32.                                                     <div class="carousel-item">
  33.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/7.jpg'))}}" data-bs-holder-rendered="true">
  34.                                                     </div>
  35.                                                     <div class="carousel-item">
  36.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/5.jpg'))}}" data-bs-holder-rendered="true">
  37.                                                     </div>
  38.                                                     <div class="carousel-item">
  39.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/1.jpg'))}}" data-bs-holder-rendered="true">
  40.                                                     </div>
  41.                                                     <div class="carousel-item">
  42.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/3.jpg'))}}" data-bs-holder-rendered="true">
  43.                                                     </div>
  44.                                                 </div>
  45.                                             </div>
  46.                                         </div>
  47.                                     </div>
  48.                                 </div>
  49.                                 <div class="col-md-12 col-lg-4">
  50.                                     <div class="card">
  51.                                         <div class="card-header border-bottom">
  52.                                             <h3 class="card-title">Carousel with indicators</h3>
  53.                                         </div>
  54.                                         <div class="card-body h-100">
  55.                                             <div id="carousel-indicators" class="carousel slide" data-bs-ride="carousel">
  56.                                                 <ol class="carousel-indicators">
  57.                                                     <li data-bs-target="#carousel-indicators" data-bs-slide-to="0" class="active"></li>
  58.                                                     <li data-bs-target="#carousel-indicators" data-bs-slide-to="1" ></li>
  59.                                                     <li data-bs-target="#carousel-indicators" data-bs-slide-to="2" ></li>
  60.                                                     <li data-bs-target="#carousel-indicators" data-bs-slide-to="3" ></li>
  61.                                                     <li data-bs-target="#carousel-indicators" data-bs-slide-to="4" ></li>
  62.                                                 </ol>
  63.                                                 <div class="carousel-inner">
  64.                                                     <div class="carousel-item active">
  65.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/2.jpg'))}}" data-bs-holder-rendered="true">
  66.                                                     </div>
  67.                                                     <div class="carousel-item">
  68.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/4.jpg'))}}" data-bs-holder-rendered="true">
  69.                                                     </div>
  70.                                                     <div class="carousel-item">
  71.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/6.jpg'))}}" data-bs-holder-rendered="true">
  72.                                                     </div>
  73.                                                     <div class="carousel-item">
  74.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/8.jpg'))}}" data-bs-holder-rendered="true">
  75.                                                     </div>
  76.                                                     <div class="carousel-item">
  77.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/10.jpg'))}}" data-bs-holder-rendered="true">
  78.                                                     </div>
  79.                                                 </div>
  80.                                             </div>
  81.                                         </div>
  82.                                     </div>
  83.                                 </div>
  84.                                 <div class="col-md-12 col-lg-4">
  85.                                     <div class="card">
  86.                                         <div class="card-header border-bottom">
  87.                                             <h3 class="card-title">Carousel with controls</h3>
  88.                                         </div>
  89.                                         <div class="card-body h-100">
  90.                                             <div id="carousel-controls" class="carousel slide" data-bs-ride="carousel">
  91.                                                 <div class="carousel-inner">
  92.                                                     <div class="carousel-item active">
  93.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/11.jpg'))}}" data-bs-holder-rendered="true">
  94.                                                     </div>
  95.                                                     <div class="carousel-item">
  96.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/13.jpg'))}}" data-bs-holder-rendered="true">
  97.                                                     </div>
  98.                                                     <div class="carousel-item">
  99.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/15.jpg'))}}" data-bs-holder-rendered="true">
  100.                                                     </div>
  101.                                                     <div class="carousel-item">
  102.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/17.jpg'))}}" data-bs-holder-rendered="true">
  103.                                                     </div>
  104.                                                     <div class="carousel-item">
  105.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/19.jpg'))}}" data-bs-holder-rendered="true">
  106.                                                     </div>
  107.                                                 </div>
  108.                                                 <a class="carousel-control-prev" href="#carousel-controls" role="button" data-bs-slide="prev">
  109.                                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  110.                                                     <span class="sr-only">Previous</span>
  111.                                                 </a>
  112.                                                 <a class="carousel-control-next" href="#carousel-controls" role="button" data-bs-slide="next">
  113.                                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  114.                                                     <span class="sr-only">Next</span>
  115.                                                 </a>
  116.                                             </div>
  117.                                         </div>
  118.                                     </div>
  119.                                 </div>
  120.                                 <div class="col-md-12 col-lg-4">
  121.                                     <div class="card">
  122.                                         <div class="card-header border-bottom">
  123.                                             <h3 class="card-title">Carousel with captions</h3>
  124.                                         </div>
  125.                                         <div class="card-body h-100">
  126.                                             <div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
  127.                                                 <div class="carousel-inner">
  128.                                                     <div class="carousel-item active">
  129.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/12.jpg'))}}" data-bs-holder-rendered="true">
  130.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  131.                                                         <div class="carousel-caption d-none d-md-block">
  132.                                                             <h3>Slide label</h3>
  133.                                                             <p>Secure other greater pleasures</p>
  134.                                                         </div>
  135.                                                     </div>
  136.                                                     <div class="carousel-item">
  137.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/14.jpg'))}}" data-bs-holder-rendered="true">
  138.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  139.                                                         <div class="carousel-caption d-none d-md-block">
  140.                                                             <h3>Slide label</h3>
  141.                                                             <p>Secure other greater pleasures</p>
  142.                                                         </div>
  143.                                                     </div>
  144.                                                     <div class="carousel-item">
  145.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/16.jpg'))}}" data-bs-holder-rendered="true">
  146.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  147.                                                         <div class="carousel-caption d-none d-md-block">
  148.                                                             <h3>Slide label</h3>
  149.                                                             <p>Secure other greater pleasures</p>
  150.                                                         </div>
  151.                                                     </div>
  152.                                                     <div class="carousel-item">
  153.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/18.jpg'))}}" data-bs-holder-rendered="true">
  154.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  155.                                                         <div class="carousel-caption d-none d-md-block">
  156.                                                             <h3>Slide label</h3>
  157.                                                             <p>Secure other greater pleasures</p>
  158.                                                         </div>
  159.                                                     </div>
  160.                                                     <div class="carousel-item">
  161.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/20.jpg'))}}" data-bs-holder-rendered="true">
  162.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  163.                                                         <div class="carousel-caption d-none d-md-block">
  164.                                                             <h3>Slide label</h3>
  165.                                                             <p>Secure other greater pleasures</p>
  166.                                                         </div>
  167.                                                     </div>
  168.                                                 </div>
  169.                                                 <a class="carousel-control-prev" href="#carousel-captions" role="button" data-bs-slide="prev">
  170.                                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  171.                                                     <span class="sr-only">Previous</span>
  172.                                                 </a>
  173.                                                 <a class="carousel-control-next" href="#carousel-captions" role="button" data-bs-slide="next">
  174.                                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  175.                                                     <span class="sr-only">Next</span>
  176.                                                 </a>
  177.                                             </div>
  178.                                         </div>
  179.                                     </div>
  180.                                 </div>
  181.                                 <div class="col-md-12 col-lg-4">
  182.                                     <div class="card">
  183.                                         <div class="card-header border-bottom">
  184.                                             <h3 class="card-title">Carousel with top controls</h3>
  185.                                         </div>
  186.                                         <div class="card-body h-100">
  187.                                             <div id="carousel-indicators1" class="carousel slide" data-bs-ride="carousel">
  188.                                                 <ol class="carousel-indicators carousel-indicators1">
  189.                                                     <li data-bs-target="#carousel-indicators1" data-bs-slide-to="0" class="active"></li>
  190.                                                     <li data-bs-target="#carousel-indicators1" data-bs-slide-to="1" ></li>
  191.                                                     <li data-bs-target="#carousel-indicators1" data-bs-slide-to="2" ></li>
  192.                                                     <li data-bs-target="#carousel-indicators1" data-bs-slide-to="3" ></li>
  193.                                                     <li data-bs-target="#carousel-indicators1" data-bs-slide-to="4" ></li>
  194.                                                 </ol>
  195.                                                 <div class="carousel-inner">
  196.                                                     <div class="carousel-item active">
  197.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/11.jpg'))}}" data-bs-holder-rendered="true">
  198.                                                     </div>
  199.                                                     <div class="carousel-item">
  200.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/13.jpg'))}}" data-bs-holder-rendered="true">
  201.                                                     </div>
  202.                                                     <div class="carousel-item">
  203.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/15.jpg'))}}" data-bs-holder-rendered="true">
  204.                                                     </div>
  205.                                                     <div class="carousel-item">
  206.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/17.jpg'))}}" data-bs-holder-rendered="true">
  207.                                                     </div>
  208.                                                     <div class="carousel-item">
  209.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/19.jpg'))}}" data-bs-holder-rendered="true">
  210.                                                     </div>
  211.                                                 </div>
  212.                                             </div>
  213.                                         </div>
  214.                                     </div>
  215.                                 </div>
  216.                                 <div class="col-md-12 col-lg-4">
  217.                                     <div class="card">
  218.                                         <div class="card-header border-bottom">
  219.                                             <h3 class="card-title">Carousel with top-right controls</h3>
  220.                                         </div>
  221.                                         <div class="card-body h-100">
  222.                                             <div id="carousel-indicators2" class="carousel slide" data-bs-ride="carousel">
  223.                                                 <ol class="carousel-indicators carousel-indicators2">
  224.                                                     <li data-bs-target="#carousel-indicators2" data-bs-slide-to="0" class="active"></li>
  225.                                                     <li data-bs-target="#carousel-indicators2" data-bs-slide-to="1" ></li>
  226.                                                     <li data-bs-target="#carousel-indicators2" data-bs-slide-to="2" ></li>
  227.                                                     <li data-bs-target="#carousel-indicators2" data-bs-slide-to="3" ></li>
  228.                                                     <li data-bs-target="#carousel-indicators2" data-bs-slide-to="4" ></li>
  229.                                                 </ol>
  230.                                                 <div class="carousel-inner">
  231.                                                     <div class="carousel-item active">
  232.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/7.jpg'))}}" data-bs-holder-rendered="true">
  233.                                                     </div>
  234.                                                     <div class="carousel-item">
  235.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/8.jpg'))}}" data-bs-holder-rendered="true">
  236.                                                     </div>
  237.                                                     <div class="carousel-item">
  238.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/9.jpg'))}}" data-bs-holder-rendered="true">
  239.                                                     </div>
  240.                                                     <div class="carousel-item">
  241.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/10.jpg'))}}" data-bs-holder-rendered="true">
  242.                                                     </div>
  243.                                                     <div class="carousel-item">
  244.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/11.jpg'))}}" data-bs-holder-rendered="true">
  245.                                                     </div>
  246.                                                 </div>
  247.                                             </div>
  248.                                         </div>
  249.                                     </div>
  250.                                 </div>
  251.                             </div>
  252.                             <!-- ROW-1 CLOSED -->
  254.                             <!-- ROW-2 OPEN -->
  255.                             <div class="row">
  256.                                 <div class="col-md-12 col-lg-4">
  257.                                     <div class="card">
  258.                                         <div class="card-header border-bottom">
  259.                                             <h3 class="card-title">Carousel with top-left controls</h3>
  260.                                         </div>
  261.                                         <div class="card-body h-100">
  262.                                             <div id="carousel-indicators3" class="carousel slide" data-bs-ride="carousel">
  263.                                                 <ol class="carousel-indicators carousel-indicators3">
  264.                                                     <li data-bs-target="#carousel-indicators3" data-bs-slide-to="0" class="active"></li>
  265.                                                     <li data-bs-target="#carousel-indicators3" data-bs-slide-to="1" ></li>
  266.                                                     <li data-bs-target="#carousel-indicators3" data-bs-slide-to="2" ></li>
  267.                                                     <li data-bs-target="#carousel-indicators3" data-bs-slide-to="3" ></li>
  268.                                                     <li data-bs-target="#carousel-indicators3" data-bs-slide-to="4" ></li>
  269.                                                 </ol>
  270.                                                 <div class="carousel-inner">
  271.                                                     <div class="carousel-item active">
  272.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/9.jpg'))}}" data-bs-holder-rendered="true">
  273.                                                     </div>
  274.                                                     <div class="carousel-item">
  275.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/7.jpg'))}}" data-bs-holder-rendered="true">
  276.                                                     </div>
  277.                                                     <div class="carousel-item">
  278.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/5.jpg'))}}" data-bs-holder-rendered="true">
  279.                                                     </div>
  280.                                                     <div class="carousel-item">
  281.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/3.jpg'))}}" data-bs-holder-rendered="true">
  282.                                                     </div>
  283.                                                     <div class="carousel-item">
  284.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/1.jpg'))}}" data-bs-holder-rendered="true">
  285.                                                     </div>
  286.                                                 </div>
  287.                                             </div>
  288.                                         </div>
  289.                                     </div>
  290.                                 </div><!-- COL-END -->
  291.                                 <div class="col-md-12 col-lg-4">
  292.                                     <div class="card">
  293.                                         <div class="card-header border-bottom">
  294.                                             <h3 class="card-title">Carousel with bottom-right controls</h3>
  295.                                         </div>
  296.                                         <div class="card-body h-100">
  297.                                             <div id="carousel-indicators4" class="carousel slide" data-bs-ride="carousel">
  298.                                                 <ol class="carousel-indicators carousel-indicators4">
  299.                                                     <li data-bs-target="#carousel-indicators4" data-bs-slide-to="0" class="active"></li>
  300.                                                     <li data-bs-target="#carousel-indicators4" data-bs-slide-to="1" ></li>
  301.                                                     <li data-bs-target="#carousel-indicators4" data-bs-slide-to="2" ></li>
  302.                                                     <li data-bs-target="#carousel-indicators4" data-bs-slide-to="3" ></li>
  303.                                                     <li data-bs-target="#carousel-indicators4" data-bs-slide-to="4" ></li>
  304.                                                 </ol>
  305.                                                 <div class="carousel-inner">
  306.                                                     <div class="carousel-item active">
  307.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/4.jpg'))}}" data-bs-holder-rendered="true">
  308.                                                     </div>
  309.                                                     <div class="carousel-item">
  310.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/5.jpg'))}}" data-bs-holder-rendered="true">
  311.                                                     </div>
  312.                                                     <div class="carousel-item">
  313.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/6.jpg'))}}" data-bs-holder-rendered="true">
  314.                                                     </div>
  315.                                                     <div class="carousel-item">
  316.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/7.jpg'))}}" data-bs-holder-rendered="true">
  317.                                                     </div>
  318.                                                     <div class="carousel-item">
  319.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/8.jpg'))}}" data-bs-holder-rendered="true">
  320.                                                     </div>
  321.                                                 </div>
  322.                                             </div>
  323.                                         </div>
  324.                                     </div>
  325.                                 </div><!-- COL-END -->
  326.                                 <div class="col-md-12 col-lg-4">
  327.                                     <div class="card">
  328.                                         <div class="card-header border-bottom">
  329.                                             <h3 class="card-title">Carousel with bottom-left controls</h3>
  330.                                         </div>
  331.                                         <div class="card-body h-100">
  332.                                             <div id="carousel-indicators5" class="carousel slide" data-bs-ride="carousel">
  333.                                                 <ol class="carousel-indicators carousel-indicators5">
  334.                                                     <li data-bs-target="#carousel-indicators5" data-bs-slide-to="0" class="active"></li>
  335.                                                     <li data-bs-target="#carousel-indicators5" data-bs-slide-to="1" ></li>
  336.                                                     <li data-bs-target="#carousel-indicators5" data-bs-slide-to="2" ></li>
  337.                                                     <li data-bs-target="#carousel-indicators5" data-bs-slide-to="3" ></li>
  338.                                                     <li data-bs-target="#carousel-indicators5" data-bs-slide-to="4" ></li>
  339.                                                 </ol>
  340.                                                 <div class="carousel-inner">
  341.                                                     <div class="carousel-item active">
  342.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/9.jpg'))}}" data-bs-holder-rendered="true">
  343.                                                     </div>
  344.                                                     <div class="carousel-item">
  345.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/10.jpg'))}}" data-bs-holder-rendered="true">
  346.                                                     </div>
  347.                                                     <div class="carousel-item">
  348.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/11.jpg'))}}" data-bs-holder-rendered="true">
  349.                                                     </div>
  350.                                                     <div class="carousel-item">
  351.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/12.jpg'))}}" data-bs-holder-rendered="true">
  352.                                                     </div>
  353.                                                     <div class="carousel-item">
  354.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/13.jpg'))}}" data-bs-holder-rendered="true">
  355.                                                     </div>
  356.                                                 </div>
  357.                                             </div>
  358.                                         </div>
  359.                                     </div>
  360.                                 </div><!-- COL-END -->
  361.                                 <div class="col-md-12 col-lg-6">
  362.                                     <div class="card">
  363.                                         <div class="card-header border-bottom">
  364.                                             <h3 class="card-title">Carousel with Background color captions</h3>
  365.                                         </div>
  366.                                         <div class="card-body h-100">
  367.                                             <div id="carousel-captions2" class="carousel slide" data-bs-ride="carousel">
  368.                                                 <div class="carousel-inner">
  369.                                                     <div class="carousel-item active">
  370.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/red.jpg'))}}" data-bs-holder-rendered="true">
  371.                                                         <div class="carousel-caption">
  372.                                                             <h3>Slide label</h3>
  373.                                                             <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>
  374.                                                         </div>
  375.                                                     </div>
  376.                                                     <div class="carousel-item">
  377.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/blue.jpg'))}}" data-bs-holder-rendered="true">
  378.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  379.                                                         <div class="carousel-caption d-none d-md-block">
  380.                                                             <h3>Slide label</h3>
  381.                                                             <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>
  382.                                                         </div>
  383.                                                     </div>
  384.                                                     <div class="carousel-item">
  385.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/green.jpg'))}}" data-bs-holder-rendered="true">
  386.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  387.                                                         <div class="carousel-caption d-none d-md-block">
  388.                                                             <h3>Slide label</h3>
  389.                                                             <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>
  390.                                                         </div>
  391.                                                     </div>
  392.                                                 </div>
  393.                                                 <a class="carousel-control-prev" href="#carousel-captions2" role="button" data-bs-slide="prev">
  394.                                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  395.                                                     <span class="sr-only">Previous</span>
  396.                                                 </a>
  397.                                                 <a class="carousel-control-next" href="#carousel-captions2" role="button" data-bs-slide="next">
  398.                                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  399.                                                     <span class="sr-only">Next</span>
  400.                                                 </a>
  401.                                             </div>
  402.                                         </div>
  403.                                     </div>
  404.                                 </div><!-- COL-END -->
  405.                                 <div class="col-md-12 col-lg-6">
  406.                                     <div class="card">
  407.                                         <div class="card-header border-bottom">
  408.                                             <h3 class="card-title">Carousel with GradientBackground  caption</h3>
  409.                                         </div>
  410.                                         <div class="card-body h-100">
  411.                                             <div id="carousel-captions1" class="carousel slide" data-bs-ride="carousel">
  412.                                                 <div class="carousel-inner">
  413.                                                     <div class="carousel-item active">
  414.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/gradient1.jpg'))}}" data-bs-holder-rendered="true">
  415.                                                         <div class="carousel-caption">
  416.                                                             <h3>Slide label</h3>
  417.                                                             <p>The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures.</p>
  418.                                                         </div>
  419.                                                     </div>
  420.                                                     <div class="carousel-item">
  421.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/gradient2.jpg'))}}" data-bs-holder-rendered="true">
  422.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  423.                                                         <div class="carousel-caption d-none d-md-block">
  424.                                                             <h3>Slide label</h3>
  425.                                                             <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>
  426.                                                         </div>
  427.                                                     </div>
  428.                                                     <div class="carousel-item">
  429.                                                         <img class="d-block w-100" alt="" src="{{absolute_url(asset('build/images/media/gradient3.jpg'))}}" data-bs-holder-rendered="true">
  430.                                                         <div class="carousel-item-background d-none d-md-block"></div>
  431.                                                         <div class="carousel-caption d-none d-md-block">
  432.                                                             <h3>Slide label</h3>
  433.                                                             <p>The wise man therefore always holds in these matters to this principle of selection he rejects pleasures.</p>
  434.                                                         </div>
  435.                                                     </div>
  436.                                                 </div>
  437.                                                 <a class="carousel-control-prev" href="#carousel-captions1" role="button" data-bs-slide="prev">
  438.                                                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  439.                                                     <span class="sr-only">Previous</span>
  440.                                                 </a>
  441.                                                 <a class="carousel-control-next" href="#carousel-captions1" role="button" data-bs-slide="next">
  442.                                                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  443.                                                     <span class="sr-only">Next</span>
  444.                                                 </a>
  445.                                             </div>
  446.                                         </div>
  447.                                     </div>
  448.                                 </div><!-- COL-END -->
  449.                             </div>
  450.                             <!-- ROW-2 CLOSED -->
  451. {% endblock %}