Dynamischer Karussell Codezeichner

Question

Ich mache ein Content Management System. Ich kann einen neuen Inhalt für meine Website hochladen, habe aber Probleme, die Bilder auf meinem Karussell anzuzeigen. Alle Bilder die ich hochgeladen habe, es geht vertikal.

Zum Beispiel: Ich hochgeladen 3 Bilder es ähnliche

Image 1 
Image 2 
Image 3 

Erwartete Ausgabe looke wird:

<- Image 1 -> <- Image 2 -> <- Image 3 -> 

Frage: Wie kann ich alle meine Bilder setzen in meinem Karussell?

Ansicht

<div class="container" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px;"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width: 85.5%;"> 
    <!-- 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"> 
     <?php foreach($content as $row):?> 
     <div class="item active"> 
      <center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center> 
     </div> 
     <?php endforeach;?> 
    </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> 
</div> 

Answer 1

<?php foreach($content as $row):?> 
    <div class="item active"> 
    // ... 

Das bedeutet, dass jeder Ihrer Karussell Artikel die active Klasse. As the docs describe, nur einer von ihnen sollte aktiv sein, und das ist derjenige, der zuerst angezeigt wird.

Answer 2

Um ein dynamisches Karussell zu machen als @Dont Panic sagte, nur ein aktiv für alle Ihre Artikel eine dynamische Anzeige

<!-- Indicators --> 
<?php $count = 0; 
     $indicators = ''; 
     foreach ($content as $row): 
     $count++; 
      if ($count === 1) 
      { 
       $class = 'active'; 
      } 
      else 
      { 
       $class = ''; 
      }?> 

      <div class="item <?php echo $class; ?>"> 
       <center><img src="<?= base_url().'assets/img/'.$row->content_image?>" width="100%" alt="Menu"></center> 
      </div> 

      $indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>'; 
      <?php endforeach;?> 

Und @Dont Panik zu wählen haben (Indikator ist der kleine Kreis) aus der ist das.

Ich habe ein kleines Problem festgestellt, was passiert, wenn ich nur alle aktiven Bilder/Inhalte und meinen Indikator anzeigen möchte?

Im Code von @Don Panic werden immer noch alle Bilder angezeigt, obwohl die anderen Bilder inaktiv sind.

Beispiel:

I have 6 images, 
4 images are active 
2 images are inactive/deactivate 

Szenario:

In my indicator it displayed 6 even though the active are only 4. 

So verbesserte ich seinen Code in dieses

<div class="carousel-inner" role="listbox"> 
     <?php $count = 0; 
     $indicators = ''; 
     foreach ($content as $row): 
     $count++; 
     if ($count === 1) 
     { 
      $class = 'active'; 
     } 
     else 
     { 
      $class = ''; 
     }?> 
     <?php if($row->status == 'Active'): 
      $indicators .= '<li data-target="#myCarousel" data-slide-to="' . $count . '" class="' . $class . '"></li>' ;?><br> 
      <div class="item <?php echo $class; ?>"> 
       <center><img src="<?= base_url().'uploads/'.$row->content_image?>" width="100%" alt="Menu"></center> 
      </div> 
     <?php endif;?> 
     <?php endforeach;?> 
     <ol class="carousel-indicators"> 
      <?= $indicators; ?> 
     </ol> 
    </div> 

Jetzt nur angezeigt, es 4 Bilder und auch das Kennzeichen.