Advertisement
Keileon

Ribbon Carousel

May 18th, 2024
749
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.83 KB | None | 0 0
  1.     <div class="mt-2 mb-0 mx-auto text-center" style="height:200px;width:100%; color:#eeeeee;">
  2.         <!-- Ribbons -->
  3.         <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="ribbonimage" style="overflow: hidden;">
  4.             <div class="carousel-inner">
  5.                 <!--  Ribbon 1 -->
  6.                 <div class="carousel-item active"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/82204957_L3H2MynNFPUFxmr.png" height="62" width="43"><br><b>Name</b>
  7.                     <hr style="width:90%">Description
  8.                 </div>
  9.                 <!-- Ribbon 2+ -->
  10.                 <div class="carousel-item"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="LINK" height="62" width="43"><br><b>Name</b>
  11.                     <hr style="width:90%">Description
  12.                 </div>
  13.                 <div class="carousel-item"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="LINK" height="62" width="43"><br><b>Name</b>
  14.                     <hr style="width:90%">Description
  15.                 </div>
  16.                 <div class="carousel-item"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="LINK" height="62" width="43"><br><b>Name</b>
  17.                     <hr style="width:90%">Description
  18.                 </div>
  19.                 <div class="carousel-item"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="LINK" height="62" width="43"><br><b>Name</b>
  20.                     <hr style="width:90%">Description
  21.                 </div>
  22.             </div>
  23.         </div>
  24.         <hr class="" style="width:90%">
  25.         <a class="carousel-control-prev" data-slide="prev" href="#ribbonimage" style="position: absolute; top: calc(50% - 150px);">
  26.             <span class="fas fa-chevron-left fa-2x text-white"></span>
  27.         </a>
  28.         <a class="carousel-control-next" data-slide="next" href="#ribbonimage" style="position: absolute; top: calc(50% - 150px);">
  29.             <span class="fas fa-chevron-right fa-2x text-white"></span>
  30.         </a>
  31.     </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement