Hello, i have this code and work good, but i want to be able to swipe left and right to show more products.
Thank you.
{% if section.blocks.size > 0 %}
<div class="tabs-section page-width">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
{% if section.settings.useslider %}
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
{% endif %}
{% if section.settings.title != blank %}
<h2 class="h1">{{ section.settings.title }}</h2>
{% endif %}
<div id="tabs" class="tabs">
{% assign tabContent = '' %}
<ul>
{% for block in section.blocks %}
{% assign collection = collections[block.settings.collection] %}
<li><a href="#tabs-{{ collection.id }}">{{ collection.title }}</a></li>
{% capture content %}
<div id="tabs-{{ collection.id }}">
<ul class="grid product-grid grid--2-col-tablet-down grid--4-col-desktop">
{%- for product in block.settings.collection.products limit: 4 -%}
<li class="grid__item scroll-trigger animate--slide-in">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
{% if block.settings.viewall %}
<div class="center collection__view-all scroll-trigger animate--slide-in">
<a class="button" href="{{ block.settings.collection.url }}"> View all </a>
</div>
{% endif %}
</div>
{% endcapture %}
{% assign tabContent = tabContent | append: content %}
{% endfor %}
</ul>
{{ tabContent }}
</div>
</div>
<script>
$( function() {
{% if section.settings.useslider %}
function tabSlider(){
$('.tabs .product-grid.slick-initialized ').slick('unslick');
$('.tabs .product-grid ').slick({
dots: false,
arrows: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 4,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
]
});
}
{% endif %}
$( "#tabs" ).tabs({
create: function( event, ui ) {
{% if section.settings.useslider %}
tabSlider()
{% endif %}
},
activate: function( event, ui ) {
{% if section.settings.useslider %}
tabSlider()
{% endif %}
}
});
} );
</script>
<style>
@media(max-width: 749px){
.tabs .product-grid > li:nth-child(3),
.tabs .product-grid > li:nth-child(4){
display: none;
}
}
.tabs .slick-track .grid__item {
padding: 0 5px;
}
.tabs .slick-next {
right: 0;
}
.tabs .slick-prev {
left: 0;
}
.tabs .slick-next,.tabs .slick-prev {
transform: none;
}
.tabs .slick-next::before,.tabs .slick-prev::before { color: #000;}
.tabs .slick-slider{ margin: 0 -5px;}
.tabs .collection__view-all a{ color: white!important;}
.tabs { background: none!important;border: none!important}
.tabs.ui-tabs .ui-tabs-nav {
background: none;
padding: 15px 0;
display: flex;
justify-content: center;
border: none;
}
.tabs-section h2 {
text-align: center;
}
.tabs.ui-tabs .ui-tabs-nav li {
border: none;
background: none;
}
.tabs.ui-tabs .ui-tabs-nav li a{
color: #white;
padding: 5px 40px;
border-radius: 50px;
}
.tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
background: black;
}
</style>
{% endif %}
{% schema %}
{
"name": "Tabs",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "checkbox",
"id": "useslider",
"label": "Use slider",
"default": true
}
],
"blocks": [
{
"type": "tab",
"name": "Tab",
"limit": 5,
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "checkbox",
"id": "viewall",
"label": "Show view all",
"default": true
}
]
}
],
"presets": [
{
"name": "Tabs",
"blocks": []
}
]
}
{% endschema %}