templates/fragments/_slider.html.twig line 1

Open in your IDE?
  1. <!-- Eg toggle : Display/Hide slider div in jquery : find code in assets/js/slider_toggle.js -->
  2. <div class = "container">
  3.     <div class = "myInlineFlex">
  4.     <p id = "toggleText">Hide Slider</p>
  5.         <a class="" href="#" id="sliderToggle">
  6.             <i class="bi bi-toggle-on" id="sliderSwitchButton"></i>
  7.         </a>
  8.     </div>    
  9. </div>
  10. <!-- end toggle -->
  12. <div class = "container pictContainer" id = "slider"><!-- start main container-->
  13. <h5>Two responsive columns in -> fragments/_slider.html.twig<h5>
  14.     <div class = "row"><!-- start row -->
  15.         <div class = "col-lg-6 col-xs-12"><!-- start col 1 -->
  16.         <h5>Col 1 | Ex Boostrap Slider</h5>
  17.             <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  18.                 <ol class="carousel-indicators">
  19.                     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  20.                     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  21.                     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  22.                 </ol>
  23.                     <div class="carousel-inner"> <!-- start caroussel inner -->
  24.                         <div class="carousel-item active">
  25.                         <img class="d-block w-100 rounded opacity-75" src="https://picsum.photos/660/300?random=11" alt="First slide">
  26.                             <div class="carousel-caption d-none d-md-block">
  27.                                 <div class = "carousselTitle">caroussel Title</div>
  28.                                 <div class = "caroussepara">caroussel short description</div>
  29.                             </div>
  30.                         </div>
  31.                         <div class="carousel-item">
  32.                         <img class="d-block w-100 rounded opacity-75" src="https://picsum.photos/660/300?random=12" alt="Second slide">
  33.                             <div class="carousel-caption d-none d-md-block">
  34.                                 <div class = "carousselTitle">caroussel Title</div>
  35.                                 <div class = "caroussepara">caroussel short description</div>
  36.                             </div>
  37.                         </div>
  38.                     </div> <!-- end caroussel inner -->
  39.                 <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  40.                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  41.                     <span class="sr-only">Previous</span>
  42.                 </a>
  43.                 <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  44.                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  45.                     <span class="sr-only">Next</span>
  46.                 </a>
  47.             </div>
  48.          </div><!-- end col 1 -->
  50.         <div class ="col-lg-6 col-xs-12 headerLogo"><!-- start col 2 -->
  52.         <h5>Col 2 | Ex Place A picture</h5>
  53.           <img class="d-block w-100" src="./assets/images/default_picture/logo.png" alt="Second picture">
  54.         </div><!-- end col 2 -->
  55.     </div><!-- end row -->
  56. </div><!-- end container -->