72 lines
2.4 KiB
PHP
72 lines
2.4 KiB
PHP
<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
|