title: Make an image div active on click inside blade for each loop using carousel
body: <p>I have lopping through with a foreach loop to print out images one by one.
  Clicking the <code>li</code> tag is supposed to make the <code>.carousel</code> div active.
  However, i can't get that to work.</p>
  <p>below is the my code.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;product_details_slider&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
     &lt;ol class=&quot;carousel-indicators&quot; style=&quot;width:100%;overflow:auto;&quot;&gt;
         @if ($product-&gt;images-&gt;count() &gt; 0)
         @php
         $i = 0;
         @endphp
         @foreach($product-&gt;images as $image)
         &lt;li class=&quot;&quot; 
            data-target=&quot;#product_details_slider&quot; 
            data-slide-to=&quot;{{ $i++ }}&quot; 
            style=&quot;background-image: url({{ '/storage/'.$image-&gt;full }} );float:left;&quot;&gt;
         &lt;/li&gt;
         @endforeach
         @endif
     &lt;/ol&gt;
     
     &lt;div class=&quot;carousel-inner&quot;&gt;
         @if ($product-&gt;images-&gt;count() &gt; 0)
         @php
         $id = 0;
         @endphp
         &lt;div class=&quot;carousel-item active&quot;&gt;
             &lt;a class=&quot;gallery_img&quot; href=&quot;{{ '/storage/'.$product-&gt;images-&gt;first()-&gt;full }}&quot;&gt;
                 &lt;img 
                    class=&quot;d-block w-100&quot; 
                    src=&quot;{{ '/storage/'.$product-&gt;images-&gt;first()-&gt;full }}&quot; 
                    alt=&quot;First slide&quot;&gt;
             &lt;/a&gt;
         &lt;/div&gt;
         @else
  
         @endif
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>