The slider looks fine on desktop view but it does not resize properly. I just want it to resize on tablet and mobile for responsiveness. Keep it still 3 pictures in main view. I tried a few media queries but they did not work for me as the slider images/slider itself keeps to the same size. Thank you for your help in advance!
{% comment %} -------CSS------- {% endcomment %}
<link rel="stylesheet" type="text/css" href="{{ 'slick.css' | asset_url }}"/>
{% comment %} -------HTML------- {% endcomment %}
<div class="spacer" style="height: 80px; width: 100%;"> </div>
<div class="custom-text-area">
<h1 style="font-family: eurostile-extended, sans-serif; font-weight: 500; text-transform: uppercase;">Legacy Edition</h1>
</div>
<div class="carousel-wrap" style="margin-top: 30px; margin-bottom: 30px;">
<div class="band-accessory-routing_band-accessory-routing__slider--opacity__80oPN" style="display: block !important;"></div>
<div class="slider center blue">
<div class="image-x">
<a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/purple-1.png?v=1725491685" style="opacity: 1;"></a>
</div>
<div class="image-x">
<a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/orange-1.png?v=1725491685" style="opacity: 1;"></a>
</div>
<div class="image-x">
<a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/pink-1.png?v=1725491685" style="opacity: 1;"></a>
</div>
<div class="image-x">
<a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/purple-1.png?v=1725491685" style="opacity: 1;"></a>
</div>
<div class="image-x">
<a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/orange-1.png?v=1725491685" style="opacity: 1;"></a>
</div>
<div class="image-x">
<a href="#"><img class="" src="https://cdn.shopify.com/s/files/1/0663/8865/6306/files/pink-1.png?v=1725491685" style="opacity: 1;"></a>
</div>
</div>
</div>
<div class="custom-button-area" style="padding: 30px 0 20px;">
<a href="/collections/all" class="btn-link">Shop All</a>
</div>
<div class="spacer" style="height: 100px; width: 100%;"> </div>
{% comment %} -------JS------- {% endcomment %}
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{{ 'slick.min.js' | asset_url }}"></script>
<script>
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
arrows: true, // Ensure arrows are enabled
responsive: [
{
breakpoint: 768,
settings: {
arrows: true, // Ensure arrows are enabled
centerMode: true,
centerPadding: '40px',
slidesToShow: 3,
}
},
{
breakpoint: 480,
settings: {
arrows: true, // Ensure arrows are enabled
centerMode: true,
centerPadding: '40px',
slidesToShow: 1,
}
}
]
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider').slick('slickGoTo', slideno - 1);
});
});
</script>
{% comment %} -------CSS------- {% endcomment %}
{% stylesheet %}
.custom-button-area {
padding: 30px 0 20px;
text-align: center;
}
.btn-link {
display: inline-block;
padding: 12px 24px;
background-color: #ffffff;
color: #000000;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease;
font-family: "eurostile-extended", sans-serif;
font-weight: 500;
text-transform: uppercase;
border: 1px solid #000000;
}
.btn-link:hover {
background-color: #11322c;
transform: scale(1.05);
color: #ffffff;
}
.btn-link:active {
background-color: #11322c;
transform: scale(1);
}
.slider .image-x img {
width: 100% !important;
height: auto;
}
{% endstylesheet %}
{% comment %} /* -------SECTION CREATE------- */ {% endcomment %}
{% schema %}
{
"name": "Custom JS Slider Home",
"settings": [],
"presets": [{"name": "Custom JS Slider Home"}]
}
{% endschema %}
The media queries adjust the slider for screens smaller than 768px (tablet) and 480px (mobile). On tablets, it keeps the 3 images visible by setting each image’s width to calc(33.33% – 20px) to provide some spacing between them. On mobile, it changes to 1 image per slide (width: 100%).
.slider .image-x img {
width: 100% !important;
height: auto;
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
.slider .image-x img {
width: calc(33.33% - 20px) !important; /* Keeps 3 images visible with some spacing */
}
.slick-slider {
max-width: 100%;
padding: 0 20px;
}
}
@media (max-width: 480px) {
.slider .image-x img {
width: 100% !important; /* One image on mobile */
}
.slick-slider {
max-width: 100%;
padding: 0 10px;
}
}In the slick settings, we specify different slidesToShow for different breakpoints. The default is 3 slides, and on mobile (480px and below), it shows 1 slide at a time.
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
arrows: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3, /* Ensures 3 images on tablet */
}
},
{
breakpoint: 480,
settings: {
arrows: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1, /* Ensures 1 image on mobile */
}
}
]
});
});