{{--

<section class="hero-area">
    <div class="hero-slider owl-action-styled">
       
       
        <div class="hero-slider-item hero-bg-1"> 
            <div class="container">

                <div class="hero-content">

                    <div class="section-heading">

                        <h2 class="section__title text-white fs-65 lh-80 pb-3">
                            
                            Welcome To The LoveWorld Books E-Library Platform
                        
                        </h2>
                       
                        <p class="section__desc text-white pb-4">
                            
                         Subscribe To Get Access To LoveWorld Books In Electronic Formats and Exclusive Contents 
                           
                        </p>

                    </div><!-- end section-heading -->


                    <div class="hero-btn-box d-flex flex-wrap align-items-center pt-1">

                        <a href="{{ route('register') }}" class="btn theme-btn mr-4 mb-4"> Get Started <i class="la la-arrow-right icon ml-1"> </i> </a>

                        <!--
                        <a href="#" class="btn-text video-play-btn mb-4" data-fancybox data-src="https://www.youtube.com/watch?v=cRXm1p-CNyk">
                          
                            Watch Preview <i class="la la-play icon-btn ml-2"> </i>

                        </a>
                        -->

                    </div> <!-- end hero-btn-box -->

                </div><!-- end hero-content -->
            </div><!-- end container -->

        </div><!-- end hero-slider-item -->


        <div class="hero-slider-item hero-bg-2">

            <div class="container">
                <div class="hero-content text-center">

                    <div class="section-heading">
                        <h2 class="section__title text-white fs-65 lh-80 pb-3">
                              Access  The Word <br> On The Go 
                              </h2>
                      
                        <p class="section__desc text-white pb-4">
                            
                             Get Access To Resources For Your Spiritual Growth & Development,  Mind Management & Excellence,  Health & Prosperity, and More  
                            
                              
                            <br>  
                        </p>
                    </div><!-- end section-heading -->

                    <div class="hero-btn-box d-flex flex-wrap align-items-center pt-1 justify-content-center">
                        <a href="{{ route('register') }}" class="btn theme-btn mr-4 mb-4">Get Started <i class="la la-arrow-right icon ml-1"></i></a>
                        <!--
                        <a href="#" class="btn-text video-play-btn mb-4" data-fancybox data-src="https://www.youtube.com/watch?v=cRXm1p-CNyk">
                            Watch Preview<i class="la la-play icon-btn ml-2"></i>
                        </a>
                        -->
                    </div><!-- end hero-btn-box -->

                </div><!-- end hero-content -->
            </div><!-- container -->
        </div><!-- end hero-slider-item -->


        <div class="hero-slider-item hero-bg-3">
            <div class="container">
                <div class="hero-content text-right">

                    <div class="section-heading">
                        <h2 class="section__title text-white fs-65 lh-80 pb-3">  Study and Learn The Word of God, Anytime, Anywhere </h2>
                        
                        <p class="section__desc text-white pb-4">
                            
                              Subscribe To The LoveWorld Books E-Library Today 

                           
                           
                        </p>
                    </div>

                    <div class="hero-btn-box d-flex flex-wrap align-items-center pt-1 justify-content-end">
                         
                        <!--
                           <a href="#" class="btn-text video-play-btn mr-4 mb-4" data-fancybox data-src="https://www.youtube.com/watch?v=cRXm1p-CNyk">
                              <i class="la la-play icon-btn mr-2"></i>Watch Preview
                          </a>
                        -->

                        <a href="{{ route('register') }}" class="btn theme-btn mb-4"><i class="la la-arrow-left icon mr-1"></i> Get Started </a>
                    </div><!-- end hero-btn-box -->

                </div><!-- end hero-content -->
            </div><!-- container -->

        </div><!-- end hero-slider-item -->

    </div><!-- end hero-slide -->
</section><!-- end hero-area -->

--}}






{{--
    @php
      $sliders = App\Models\Slider::latest()->where('status', 1)->limit(4)->get();
    @endphp
--}}


    @php
       $sliders = App\Models\Slider::where('status', 1)
       ->orderBy('slider_priority', 'asc')
       ->limit(4)
       ->get();
    @endphp
  
      <div class="">
       
      
      <div id="demo" class="carousel slide" data-ride="carousel">
      
          <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>
           
          </ul>
      
          <div class="carousel-inner">
      
            
      
           @forelse( $sliders as $key => $slider)
  
            <div class="carousel-item @if($key == 0) active @endif">
  
             <a href="{{ (!empty($slider->slider_url)) ? $slider->slider_url : 'javascript: void(0);' }}"> <img src="{{ ($slider->slider_image) }}" class="img-fluid" alt="" width="1400" height="600"> </a>
              
              <div class="carousel-caption">
                <h3> {{ $slider->slider_heading }}  </h3>
                <p> {{ $slider->slider_text }}    </p>
              </div> 
      
            </div>
  
            @empty
  
           
            @endforelse
      
           
      
          </div>
      
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
      
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
      
      </div>
  
  
  
  
    </div><!-- end container -->