Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

david001's avatar

Dynamic Sliders Problem

Iam not able to show images in slider one by one,it dispalys all images at once my static code is here and it works well ie slides images

 <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">

                <img src="{{url('frontend/css/images/images/banner.jpg')}}" alt="..." style="width:100%;">
                </div>
                <div class="item">
                  <img src="{{url('frontend/css/images/images/banner.jpg')}}" alt="..." style="width:100%;">
                  
                </div>
                <h1>"We will be there when you need us most"</h1>
              </div>

When i made it dynamic it is not sliding images but displaying all images from database


  <div class="carousel-inner" role="listbox">
                <div class="item active">
 @for($i=0;$i<count($banners);$i++)
                 <img src="{{ $banners[$i]['image'] }} " alt="{{ $banners[$i]['title'] }}" title="{{ $banners[$i]['title'] }}" width="100%" />
                 @endfor
                </div></div>
<h2>{{$banners[$i]['title'] }}</h2>

how can i slides image one by one

0 likes
7 replies
veve286's avatar

How about this code ? use double curly bracket instead of single curly bracket. 

  <div class="carousel-inner" role="listbox">
        @for($i=0;$i<count($banners);$i++)
        <div class="item { $i==0 ? 'active': '' } ">
                    
                        <img src=" " alt="" title="" width="100%" />
                    
        </div>
        @endfor

  </div>

1 like
helmerdavila's avatar

Or maybe.

  <div class="carousel-inner" role="listbox">
        @for($i=0;$i<count($banners);$i++)
        @if ($i == 0)
            <div class="item active">
        @else
        <div class="item">
        @endif  
                    <img src=" " alt="" title="" width="100%" />
            </div>
        @endfor
  </div>
1 like
umefarooq's avatar

@halmerdavila little improvement in code no need to put if block keep it simple just need to use php tags

<? $cls="item active" ?>
 <div class="carousel-inner" role="listbox">
        @for($i=0;$i<count($banners);$i++)
        <div class="<?=$cls?>"> // not able to blade put code you can put blade code here like. { { $cls } }
                    <img src=" " alt="" title="" width="100%" />
            </div>
           <? $cls="item" ?>
        @endfor
  </div>
2 likes
david001's avatar

but what if i want to dispaly images if $i=0 i used

 @if ($i == 0)
            <div class="item active">
<img src="{{url('images/banner.jpg')}}">//it is not displaying
        @elseif 
<div class="item">
        @endif  
                    <img src=" " alt="" title="" width="100%" />
            </div>
        @endfor
  </div>
david001's avatar

when there is no images in database i shold display any images from folder

david001's avatar

Iam getting all caption at once for every single image instead of that i should get one caption for one slider

            
<div class="carousel-inner" role="listbox">
                @for($i=0;$i<count($banners);$i++)
                @if ($i == 0)
                <div class="item active">
                 

                @else

                <div class="item">

                 @endif  
                <img src="{{ $banners[$i]['image'] }} " alt="{{ $banners[$i]['title'] }}" title="{{ $banners[$i]['title'] }}" width="100%" style="height:352px;" />

                </div>
                @endfor
               
             <h1>{{ $banners[$i]['title'] }</h1> //caption/title here 
           
                </div>
</div>

how can i get one caption for one images?

Please or to participate in this conversation.