Thema: Carousels einsetzen

Hinweis: Die obere und untere Seiten sind jeweils der Code in HTML und das Layout im Browser.

1. Code für Slides only


<div id='myCarousel' class='carousel slide' data-ride='carousel'>
 <!-- Indicators -->
 <ol class='carousel-indicators'>
   <li data-target='#myCarousel' data-slide-to='0' class='active'></li>
   <li data-target='#myCarousel' data-slide-to='1'></li>
   <li data-target='#myCarousel' data-slide-to='2'></li>
   <li data-target='#myCarousel' data-slide-to='3'></li>
 </ol>

 <!-- Wrapper for slides -->
 <div class='carousel-inner' role='listbox'>

   <div class='item active'>
     <img src='images/domyosxbx.jpg' alt='Domyos' width='460' height='345'>
     <div class='carousel-caption'>
       <h3>Dunkelblaues Herren T-Shirt von Domyos</h3>
       <p>Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.</p>
     </div>
   </div>

   <div class='item'>
     <img src='images/gerryweberxxa.jpg' alt='Weber' width='460' height='345'>
     <div class='carousel-caption'>
       <h3>Olives und Weißes Damen T-Shirt von Gerry Weber</h3>
       <p>Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan.</p>
     </div>
   </div>
 
   <div class='item'>
     <img src='images/hundmxbx3.jpg' alt='HUNDM' width='460' height='345'>
     <div class='carousel-caption'>
       <h3>Purples Damen T-Shirt von H&M</h3>
       <p>Damen T-Shirt mit breitem Rundausschnitt, Helloker, 100% Viskose.</p>
     </div>
   </div>

   <div class='item'>
     <img src='images/hundmxxa.jpg' alt='HUNDM' width='460' height='345'>
     <div class='carousel-caption'>
       <h3>T-Shirt von H&M</h3>
       <p>amen T-Shirt mit breitem Rundausschnitt, Helloker, 100% Viskose.</p>
     </div>
   </div>
  
 </div>

 <!-- Left and right controls -->
 <a class='left carousel-control' href='#myCarousel' role='button' data-slide='prev'>
   <span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>
   <span class='sr-only'>Previous</span>
 </a>
 <a class='right carousel-control' href='#myCarousel' role='button' data-slide='next'>
   <span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>
   <span class='sr-only'>Next</span>
 </a>
</div>

1. Ausgabe für Slides only

Slides only