100 lines
4.8 KiB
PHP
100 lines
4.8 KiB
PHP
<section class="bg-body-tertiary">
|
|
<div class="container">
|
|
<div class="row">
|
|
|
|
<!-- Titles master slider -->
|
|
<div class="col-md-6 col-lg-5 d-flex flex-column">
|
|
<div class="py-4 mt-auto">
|
|
<div class="swiper pb-1 pt-3 pt-sm-4 py-md-4 py-lg-3"
|
|
data-swiper='{
|
|
"spaceBetween": 24,
|
|
"loop": true,
|
|
"speed": 400,
|
|
"controlSlider": "#heroImages",
|
|
"pagination": {
|
|
"el": "#sliderBullets",
|
|
"clickable": true
|
|
},
|
|
"autoplay": {
|
|
"delay": 5500,
|
|
"disableOnInteraction": false
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper align-items-center">
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide text-center text-md-start">
|
|
<p class="fs-xl mb-2 mb-lg-3 mb-xl-4">The new warm collection</p>
|
|
<h2 class="display-4 text-uppercase mb-4 mb-xl-5">New fall <br
|
|
class="d-none d-md-inline">season 2024</h2>
|
|
<a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
|
|
Shop now
|
|
<i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide text-center text-md-start">
|
|
<p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Ready for the party?</p>
|
|
<h2 class="display-4 text-uppercase mb-4 mb-xl-5">Choose outfits for parties</h2>
|
|
<a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
|
|
Shop now
|
|
<i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Item -->
|
|
<div class="swiper-slide text-center text-md-start">
|
|
<p class="fs-xl mb-2 mb-lg-3 mb-xl-4">Shades of gray for your look</p>
|
|
<h2 class="display-4 text-uppercase mb-4 mb-xl-5">-50% on gray Collection</h2>
|
|
<a class="btn btn-lg btn-outline-dark" href="{{ route('second', ['shop', 'catalog-fashion']) }}">
|
|
Shop now
|
|
<i class="ci-arrow-up-right fs-lg ms-2 me-n1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slider bullets (pagination) -->
|
|
<div
|
|
class="d-flex justify-content-center justify-content-md-start pb-4 pb-xl-5 mt-n1 mt-md-auto mb-md-3 mb-lg-4">
|
|
<div class="swiper-pagination position-static w-auto pb-1" id="sliderBullets"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Linked images (controlled slider) -->
|
|
<div class="col-md-6 col-lg-7 align-self-end">
|
|
<div class="position-relative ms-md-n4">
|
|
<div class="ratio" style="--cz-aspect-ratio: calc(662 / 770 * 100%)"></div>
|
|
<div class="swiper position-absolute top-0 start-0 w-100 h-100 user-select-none"
|
|
id="heroImages"
|
|
data-swiper='{
|
|
"allowTouchMove": false,
|
|
"loop": true,
|
|
"effect": "fade",
|
|
"fadeEffect": {
|
|
"crossFade": true
|
|
}
|
|
}'>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="/img/home/fashion/v1/hero-slider/01.png" class="rtl-flip"
|
|
alt="Image">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="/img/home/fashion/v1/hero-slider/02.png" class="rtl-flip"
|
|
alt="Image">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="/img/home/fashion/v1/hero-slider/03.png" class="rtl-flip"
|
|
alt="Image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|