51 lines
1.6 KiB
Smarty
51 lines
1.6 KiB
Smarty
<!-- Product Carousel BEGIN -->
|
|
<section class="product-carousel-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-10">
|
|
<div class="products">
|
|
{{#each product_slides}}
|
|
<div class="product-slide">
|
|
<div class="row row-cols-1 row-cols-lg-2 justify-content-center gx-4">
|
|
<div class="col-8 col-lg-4">
|
|
<div class="product-image">
|
|
<img class="p-3" src="{{image.url}}" alt="{{image.alt}}">
|
|
</div>
|
|
</div>
|
|
<div class="col col-lg-8 my-auto text-center text-lg-start">
|
|
<div class="title mt-4 mt-lg-0 mb-4">
|
|
<h3>{{title}}</h3>
|
|
</div>
|
|
<div class="copy mb-4">
|
|
<p>{{copy}}</p>
|
|
</div>
|
|
<div class="link mb-4">
|
|
{{#if link}}
|
|
<a class="button--primary" href="{{link.url}}">{{link.title}}</a>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slick Carousel -->
|
|
<script type="text/javascript">
|
|
$(window).on('load', function(){
|
|
$('.products').slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: false,
|
|
dots: true,
|
|
autoplay: true,
|
|
arrows: true,
|
|
});
|
|
});
|
|
</script>
|
|
</section>
|
|
<!-- Product Carousel END -->
|