@isset ($sliders) 
  <section class="section-dark p-0 bg-dark-gray">
      <div class="swiper lg-no-parallax magic-cursor  full-screen md-h-600px sm-h-500px ipad-top-space-margin swiper-light-pagination"
          data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;parallax&quot;: true, &quot;speed&quot;: 1000, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination-bullets&quot;, &quot;clickable&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;disableOnInteraction&quot;: false },  &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;slide&quot; }">
          <div class="swiper-wrapper">
              @foreach ($sliders as $slider)
                  <div class="swiper-slide overflow-hidden">
                      <div class="cover-background position-absolute top-0 start-0 w-100 h-100" data-swiper-parallax="500"
                          style="background-image:url('{{ $slider->images[0] }}');">
                          <div class="opacity-light "></div>
                          <div class="container h-100" data-swiper-parallax="-500">
                              <div class="row align-items-center h-100">
                                  <div class="col-xl-7 col-lg-8 col-md-10 position-relative text-white text-center text-md-start"
                                      data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [100, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 300, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
                                      <div>
                                          <span
                                              class="fs-20 opacity-6 mb-25px sm-mb-15px d-inline-block fw-300">{{ $slider->title }}</span>
                                      </div>
                                      <h1 class="alt-font w-90 xl-w-100 text-shadow-double-large ls-minus-2px">
                                          {!! $slider->description !!}</span></h1>
                                      <a href="{{ $slider->button_url }}" target="{{ $slider->button_target }}"
                                          class="btn btn-extra-large btn-rounded with-rounded btn-base-color btn-box-shadow box-shadow-extra-large mt-20px sm-mt-0">{{ $slider->button_text }}<span
                                              class="bg-white text-base-color"><i
                                                  class="fas fa-arrow-right"></i></span></a>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              @endforeach
          </div>
          <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"></div>
      </div>
  </section>
@endisset