first

resources/views/client/rohini/pages/partials/slider.blade.php

@@ -0,0 +1,71 @@
+<style>
+  /* 1) Completely hide the carousel container until Owl is ready */
+  .main-slider-two__carousel {
+    visibility: hidden;
+  }
+  /* 2) As soon as Owl adds .owl-loaded, show it in one go */
+  .main-slider-two__carousel.owl-loaded {
+    visibility: visible;
+  }
+
+  .main-slider-two__carousel .owl-nav {
+      display: none !important;
+  }
+</style>
+<section class="main-slider-two slider" style="background-image: url('{{ $firstImage->images[0] }}'); background-size: cover; background-position: center; height: auto; ">
+  <div  
+    class="main-slider-two__carousel owl-carousel owl-theme thm-owl__carousel"
+    data-owl-options='{
+      "loop": true,
+      "items": 1,
+      "navText": ["<span class=\"icon-prev\"></span>","<span class=\"icon-next\"></span>"],
+      "margin": 0,
+      "dots": true,
+      "nav": false,
+      "animateOut": "slideOutDown",
+      "animateIn": "fadeIn",
+      "smartSpeed": 1000,
+      {{-- "autoplay": true, --}}
+      "autoplayTimeout": 7000,
+      "autoplayHoverPause": false
+    }'>
+
+    @foreach($sliders as $slider)
+      <div class="item main-slider-two__slide-{{ $loop->iteration }}">
+        <div class="main-slider-two__bg">
+          <div class="slide-owl-wrap">
+            {{-- <img src="rohini/assets/images/gallery/Slider-a (1).png" alt="Slide {{ $loop->iteration }}"> --}}
+            <img src="{{ $slider->images[0] }}" alt="Slide {{ $loop->iteration }}">
+          </div>
+        </div>
+        <div class="container">
+          {{-- <div class="main-slider-two__content">
+            <h2 class="main-slider-two__title">
+              {!! implode(' ', array_slice(explode(' ', $slider->title), 0, 3))
+                 . '<br>' .
+                 implode(' ', array_slice(explode(' ', $slider->title), 3)) !!}
+            </h2>
+            <div class="main-slider-two__btn-box">
+              <a href="{{ route('page.load', 'contact') }}" class="main-slider-two__btn thm-btn">
+                <span class="icon-right-arrow"></span> Contact Us
+              </a>
+            </div>
+          </div> --}}
+        </div>
+      </div>
+    @endforeach
+
+  </div>
+</section>
+@push('js')
+<script>
+  $(document).ready(function(){
+    var $c = $('.main-slider-two__carousel');
+
+    // Initialize using your data-owl-options
+    $c.owlCarousel($c.data('owl-options'));
+
+    // Owl adds .owl-loaded when it’s done — CSS will flip visibility.
+  });
+</script>
+@endpush