wip
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
<div class="carousel__item promobox promobox--type-03">
|
||||
<a href="{{ $brand->productsPage() }}" class="position-relative w-100">
|
||||
<div class="rimage" style="padding-top:40.816326530612244%;height:100%;">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
|
||||
class="rimage__img rimage__img--fade-in lazyload"
|
||||
style=" object-fit: contain;"
|
||||
|
||||
data-master="{{ $brand->image() }}"
|
||||
data-srcset="{{ $brand->image() }} 1x, {{ $brand->image() }} 2x"
|
||||
alt="">
|
||||
</div>
|
||||
<div class="promobox__border "></div>
|
||||
</a>
|
||||
</div>
|
||||
@@ -0,0 +1,60 @@
|
||||
@php
|
||||
$brands = App\Models\Ecommerce\Product\Brand\Brand::with('media')->where('is_visible', true)->get(['id', 'name', 'slug']);
|
||||
@endphp
|
||||
|
||||
|
||||
<div id="theme-section-1537199513853" class="theme-section mt-20">
|
||||
<div data-section-id="1537199513853" data-section-type="carousel-brands" data-postload="carousel_brands">
|
||||
|
||||
<div class="container mt-0 mb-55">
|
||||
<div class="carousel carousel--arrows carousel-brands position-relative">
|
||||
{{-- <div class="border-top mb-50"></div> --}}
|
||||
|
||||
<div class="carousel__slider position-relative invisible"
|
||||
data-js-carousel
|
||||
data-autoplay="true"
|
||||
data-speed="5000"
|
||||
data-count="6"
|
||||
data-infinite="true"
|
||||
data-arrows="true"
|
||||
data-bullets="false">
|
||||
<div class="carousel__prev position-absolute cursor-pointer" data-js-carousel-prev>
|
||||
<i>
|
||||
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-006" viewBox="0 0 24 24">
|
||||
<path d="M16.736 3.417a.652.652 0 0 1-.176.449l-8.32 8.301 8.32 8.301c.117.13.176.28.176.449s-.059.319-.176.449a.91.91 0 0 1-.215.127c-.078.032-.156.049-.234.049s-.156-.017-.234-.049a.93.93 0 0 1-.215-.127l-8.75-8.75a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449l8.75-8.75a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
<div class="carousel__items overflow-hidden">
|
||||
<div class="carousel__slick" data-js-carousel-slick>
|
||||
@foreach($brands as $brand)
|
||||
@include('web.themes.shella.components.carousel.brand-carousel-item', ['brand' => $brand])
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel__next position-absolute cursor-pointer" data-js-carousel-next>
|
||||
<i>
|
||||
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-007" viewBox="0 0 24 24">
|
||||
<path d="M6.708 20.917c0-.169.059-.319.176-.449l8.32-8.301-8.32-8.301a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176l8.75 8.75c.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-8.75 8.75a.91.91 0 0 1-.215.127c-.078.032-.156.049-.234.049s-.156-.017-.234-.049a.91.91 0 0 1-.215-.127.652.652 0 0 1-.176-.449z"/>
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
Loader.require({
|
||||
type: "style",
|
||||
name: "plugin_slick"
|
||||
});
|
||||
|
||||
Loader.require({
|
||||
type: "script",
|
||||
name: "carousel_brands"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
<div class="slider__slide" @if($carousel->link) onclick="window.location.href = '{{ $carousel->link }}'" @endif>
|
||||
<div class="promobox promobox--type-07 promobox--is-slider position-relative d-flex flex-column align-items-center text-center overflow-hidden">
|
||||
<div class="image-animation-trigger w-100">
|
||||
<div class="w-100">
|
||||
<div class="image-animation image-animation--from-default image-animation--to-default">
|
||||
<div class="rimage">
|
||||
|
||||
<div class="d-sm-none" style="padding-top: 200px;"></div>
|
||||
<div class="d-none d-sm-block d-md-none" style="padding-top: 550px;"></div>
|
||||
<div class="d-none d-md-block d-lg-none" style="padding-top: 550px;"></div>
|
||||
<div class="d-none d-lg-block d-xl-none" style="padding-top: 550px;"></div>
|
||||
<div class="d-none d-xl-block" style="padding-top: 550px;"></div>
|
||||
|
||||
<img
|
||||
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
|
||||
class="rimage__img rimage__img--cover rimage__img--fade-in lazyload"
|
||||
data-master="{{ $carousel->image() }}"
|
||||
data-aspect-ratio="3.4909090909090907"
|
||||
data-srcset="{{ $carousel->image() }} 1x, {{ $carousel->image() }} 2x"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="promobox__content promobox__content--animation-scale-in absolute-stretch hide-on-mobile d-flex flex-column flex-center px-15 py-7 overflow-hidden">
|
||||
<div class="promobox__content_inner position-absolute d-flex flex-column flex-center w-100" style="max-width: 650px;margin-top: -10px;">
|
||||
|
||||
<div class="promo-text mx-auto">
|
||||
<p class="h1 mb-15 colorize-theme2-c" style="color: {{ $carousel->textColor() }};">{{ $carousel->title }}</p>
|
||||
<p class="mb-25 h4 colorize-theme2-c" style="color: {{ $carousel->textColor() }};">{{ $carousel->description }}</p>
|
||||
@if($carousel->link)
|
||||
{{-- <a href="{{ $carousel->link }}" class="promobox__btn btn px-20 mt-25 pointer-events-all btn--secondary">{{ __('DISCOVER MORE') }}</a> --}}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,43 @@
|
||||
@php
|
||||
$homepage_hero_carousels = App\Models\CMS\Media\Carousel::with('media')->where('place', 'homepage')->where('is_visible', true)->ordered()->get();
|
||||
@endphp
|
||||
|
||||
<div id="theme-section-1551844786848" class="theme-section">
|
||||
<div data-section-id="1551844786848" data-section-type="home-builder">
|
||||
<div class="overflow-x-hidden">
|
||||
<div class="row mt-0 mb-0 justify-content-start align-items-start">
|
||||
<div class="col-12 col-md-12 mt-0 mb-0">
|
||||
<div class="slider position-relative">
|
||||
<div class="slider__prev d-none d-lg-block position-absolute cursor-pointer" data-js-slider-prev>
|
||||
<i>
|
||||
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-006" viewBox="0 0 24 24">
|
||||
<path d="M16.736 3.417a.652.652 0 0 1-.176.449l-8.32 8.301 8.32 8.301c.117.13.176.28.176.449s-.059.319-.176.449a.91.91 0 0 1-.215.127c-.078.032-.156.049-.234.049s-.156-.017-.234-.049a.93.93 0 0 1-.215-.127l-8.75-8.75a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449l8.75-8.75a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449z" />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div class="slider__slick" data-js-slider-slick data-arrows="true" data-bullets="true" data-speed="7">
|
||||
@foreach($homepage_hero_carousels as $carousel)
|
||||
@include('web.themes.shella.components.carousel.hero-carousel-item', ['carousel' => $carousel])
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="slider__next d-none d-lg-block position-absolute cursor-pointer" data-js-slider-next>
|
||||
<i>
|
||||
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-007" viewBox="0 0 24 24">
|
||||
<path d="M6.708 20.917c0-.169.059-.319.176-.449l8.32-8.301-8.32-8.301a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176l8.75 8.75c.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-8.75 8.75a.91.91 0 0 1-.215.127c-.078.032-.156.049-.234.049s-.156-.017-.234-.049a.91.91 0 0 1-.215-.127.652.652 0 0 1-.176-.449z" />
|
||||
</svg>
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
Loader.require({
|
||||
type: "script",
|
||||
name: "home_builder"
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
Reference in New Issue
Block a user