skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Membuat Slider News Carousel di Codeigniter

Hallo, saya ingin membuat slider seperti dibawah ini, namun saya mengalami kegagalan saat proses integrasinya.

Berikut contohnya Carousel yang ingin saya adaptasikan: <a href='https://bootsnipp.com/snippets/featured/news-carousel '>https://bootsnipp.com/snippets/featured/news-carousel </a>

Ini contoh kode script codeigniter saya:

 <?php
                $slide1 = $this->model_utama->view_join_two('berita','users','kategori','username','id_kategori',array('headline' => 'Y','status' => 'Y'),'id_artikel','DESC',0,5);
                $no=1;
                foreach ($slide1->result_array() as $row) {
                    if ($row['gambar'] ==''){ $foto_slide = 'no-image.jpg'; }else{ $foto_slide = $row['gambar']; }
                    if (strlen($row['judul']) > 40){ $judul = substr($row['judul'],0,140).'';  }else{ $judul = $row['judul']; }
                    echo "  <img src='".base_url()."asset/foto_berita/$foto_slide'/>
                            <a class='judul-slide' href='".base_url()."berita/detail/$row[judul_seo]'>$judul</a>
                            </div>
                        </div>";
                    $no++;
                }
            ?>
codeigniter
avatar mumujo
@mumujo

1 Kontribusi 0 Poin

Diperbarui 6 tahun yang lalu

1 Jawaban:

wah, agan cuman melakukan perulangan dibagian tag &lt;img&gt; doang. seharusnya tag &lt;div&gt; gan

nih. di html carouselnya kan kek gini

<pre> &lt;!-- Wrapper for slides --&gt; &lt;div class="carousel-inner"&gt;

    &amp;lt;div class=&quot;item active&quot;&amp;gt;
      &amp;lt;img src=&quot;http://placehold.it/760x400/cccccc/ffffff&quot;&amp;gt;
       &amp;lt;div class=&quot;carousel-caption&quot;&amp;gt;
        &amp;lt;h4&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;Lorem ipsum dolor sit amet consetetur sadipscing&amp;lt;/a&amp;gt;&amp;lt;/h4&amp;gt;
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. &amp;lt;a class=&quot;label label-primary&quot; href=&quot;http://sevenx.de/demo/bootstrap-carousel/&quot; target=&quot;_blank&quot;&amp;gt;Free Bootstrap Carousel Collection&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;&amp;lt;!-- End Item --&amp;gt;

     &amp;lt;div class=&quot;item&quot;&amp;gt;
      &amp;lt;img src=&quot;http://placehold.it/760x400/999999/cccccc&quot;&amp;gt;
       &amp;lt;div class=&quot;carousel-caption&quot;&amp;gt;
        &amp;lt;h4&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;consetetur sadipscing elitr, sed diam nonumy eirmod&amp;lt;/a&amp;gt;&amp;lt;/h4&amp;gt;
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. &amp;lt;a class=&quot;label label-primary&quot; href=&quot;http://sevenx.de/demo/bootstrap-carousel/&quot; target=&quot;_blank&quot;&amp;gt;Free Bootstrap Carousel Collection&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;&amp;lt;!-- End Item --&amp;gt;
    
    &amp;lt;div class=&quot;item&quot;&amp;gt;
      &amp;lt;img src=&quot;http://placehold.it/760x400/dddddd/333333&quot;&amp;gt;
       &amp;lt;div class=&quot;carousel-caption&quot;&amp;gt;
        &amp;lt;h4&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;tempor invidunt ut labore et dolore&amp;lt;/a&amp;gt;&amp;lt;/h4&amp;gt;
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. &amp;lt;a class=&quot;label label-primary&quot; href=&quot;http://sevenx.de/demo/bootstrap-carousel/&quot; target=&quot;_blank&quot;&amp;gt;Free Bootstrap Carousel Collection&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;&amp;lt;!-- End Item --&amp;gt;
    
    &amp;lt;div class=&quot;item&quot;&amp;gt;
      &amp;lt;img src=&quot;http://placehold.it/760x400/999999/cccccc&quot;&amp;gt;
       &amp;lt;div class=&quot;carousel-caption&quot;&amp;gt;
        &amp;lt;h4&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;magna aliquyam erat, sed diam voluptua&amp;lt;/a&amp;gt;&amp;lt;/h4&amp;gt;
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. &amp;lt;a class=&quot;label label-primary&quot; href=&quot;http://sevenx.de/demo/bootstrap-carousel/&quot; target=&quot;_blank&quot;&amp;gt;Free Bootstrap Carousel Collection&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;&amp;lt;!-- End Item --&amp;gt;

    &amp;lt;div class=&quot;item&quot;&amp;gt;
      &amp;lt;img src=&quot;http://placehold.it/760x400/dddddd/333333&quot;&amp;gt;
       &amp;lt;div class=&quot;carousel-caption&quot;&amp;gt;
        &amp;lt;h4&amp;gt;&amp;lt;a href=&quot;#&quot;&amp;gt;tempor invidunt ut labore et dolore magna aliquyam erat&amp;lt;/a&amp;gt;&amp;lt;/h4&amp;gt;
        &amp;lt;p&amp;gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. &amp;lt;a class=&quot;label label-primary&quot; href=&quot;http://sevenx.de/demo/bootstrap-carousel/&quot; target=&quot;_blank&quot;&amp;gt;Free Bootstrap Carousel Collection&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;&amp;lt;!-- End Item --&amp;gt;
            
  &amp;lt;/div&amp;gt;&amp;lt;!-- End Carousel Inner --&amp;gt;


&amp;lt;ul class=&quot;list-group col-sm-4&quot;&amp;gt;
  &amp;lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;0&quot; class=&quot;list-group-item active&quot;&amp;gt;&amp;lt;h4&amp;gt;Lorem ipsum dolor sit amet consetetur sadipscing&amp;lt;/h4&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;1&quot; class=&quot;list-group-item&quot;&amp;gt;&amp;lt;h4&amp;gt;consetetur sadipscing elitr, sed diam nonumy eirmod&amp;lt;/h4&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;2&quot; class=&quot;list-group-item&quot;&amp;gt;&amp;lt;h4&amp;gt;tempor invidunt ut labore et dolore&amp;lt;/h4&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;3&quot; class=&quot;list-group-item&quot;&amp;gt;&amp;lt;h4&amp;gt;magna aliquyam erat, sed diam voluptua&amp;lt;/h4&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li data-target=&quot;#myCarousel&quot; data-slide-to=&quot;4&quot; class=&quot;list-group-item&quot;&amp;gt;&amp;lt;h4&amp;gt;tempor invidunt ut labore et dolore magna aliquyam erat&amp;lt;/h4&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt; &lt;/pre&gt;

na yang di ulang itu, content dalam &lt;div class="carousel-inner"&gt;

which is yang ini

<pre> &lt;div class="item active"&gt; &lt;img src="http://placehold.it/760x400/cccccc/ffffff"&gt; &lt;div class="carousel-caption"&gt; &lt;h4&gt;&lt;a href="#"&gt;Lorem ipsum dolor sit amet consetetur sadipscing&lt;/a&gt;&lt;/h4&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. &lt;a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank"&gt;Free Bootstrap Carousel Collection&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- End Item --&gt; </pre>

trus yang ini juga harus dibuatr perulangannya

<pre> &lt;ul class="list-group col-sm-4"&gt; &lt;li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"&gt;&lt;h4&gt;Lorem ipsum dolor sit amet consetetur sadipscing&lt;/h4&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="1" class="list-group-item"&gt;&lt;h4&gt;consetetur sadipscing elitr, sed diam nonumy eirmod&lt;/h4&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="2" class="list-group-item"&gt;&lt;h4&gt;tempor invidunt ut labore et dolore&lt;/h4&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="3" class="list-group-item"&gt;&lt;h4&gt;magna aliquyam erat, sed diam voluptua&lt;/h4&gt;&lt;/li&gt; &lt;li data-target="#myCarousel" data-slide-to="4" class="list-group-item"&gt;&lt;h4&gt;tempor invidunt ut labore et dolore magna aliquyam erat&lt;/h4&gt;&lt;/li&gt; &lt;/ul&gt; </pre>

jadi kyk gini :

<pre> &lt;ul class="list-group col-sm-4"&gt; //foreach disini // ulangi contentn ini // li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"&gt;&lt;h4&gt;Lorem ipsum dolor sit amet consetetur sadipscing&lt;/h4&gt;&lt;/li&gt; &lt;/ul&gt; </pre>

avatar arhen03
@arhen03

55 Kontribusi 23 Poin

Dipost 6 tahun yang lalu

Login untuk ikut Jawaban