'Sliders in Laravel

I am not able to show images in slider one by one, it displays all images at once. My static code is here and it works well with sliding images.

    <section id="main-slider" class="no-margin" data-ride="carousel">
    <div class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">

            <div class="item active" style="background-image: url(users/assets/images/New/4.jpg)">
                <div class="container">
                    <div class="row slide-margin">

                        <div class="col-sm-12">
                            <div class="media services-wrap wow fadeInDown">
                                <div class="pull-left">
                                    <img class="img-responsive" src="images/services/services1.png">
                                </div>
                                <div class="media-body">
                                    <h3 class="media-heading">SEO Marketing</h3>
                                    <p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!--/.item-->


        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</section><!--/#main-slider-->

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

<section id="main-slider" class="no-margin" data-ride="carousel">
<div class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#main-slider" data-slide-to="0" class="active"></li>
        <li data-target="#main-slider" data-slide-to="1"></li>
        <li data-target="#main-slider" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">

        <div class="item active" style="background-image: url(users/assets/images/New/4.jpg)">
            <div class="container">
                <div class="row slide-margin">


        <div class="col-md-12">
            <div class="media services-wrap wow fadeInDown">
                @foreach($data as $data)
                <img src="{{asset($data->image)}}">
                <h4>{{ $data->text}}</h4>
                @endforeach
            </div>
        </div>

                </div>
            </div>
        </div><!--/.item-->


    </div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
    <i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
    <i class="fa fa-chevron-right"></i>
</a>

How can i slide image one by one

phplaravel


Solution 1:[1]

Try put this div in Foreach loop '<div class="item"></div>'.

As It seems .item class will work as each slide.

Check this link for example..

http://jsfiddle.net/WmMXa/3/

Hope it helps

Solution 2:[2]

Put the foreach before your carousel-item and add this code class = $loop->first ? 'active' : '' that will put only the first photo as active as your static code does.

@foreach( $photos as $photo )
   <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
       <img class="d-block img-fluid" src="{{ $photo->image }}" alt="{{ $photo->title }}">
          <div class="carousel-caption d-none d-md-block">
             <h3>{{ $photo->title }}</h3>
             <p>{{ $photo->descriptoin }}</p>
          </div>
   </div>
@endforeach`

Hopefully, it will work for you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vishal Tarkar
Solution 2

Related Questions