Clickable Collection Slider - Custom Code

Store Design
, , ,
1

I have built a custom code for a clickable collection slider. Now I have a few design problems. The current slider looks like this. Does anyone have any ideas on what I need to change?

Roxolot_0-1711525719868.png
Roxolot_0-1711525719868.png568×288 4.47 KB

This should be the result with the slideable function. It would be nice to add pagination dots.

Roxolot_1-1711525758831.png
Roxolot_1-1711525758831.png536×197 8.67 KB

This is the code for the clickable collection slider:

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>

  <style>
    
    .mobile-collection-slider {
      max-width: 1600px;
      padding-top: 70px;
      padding-bottom: 12px;
      background: #f8f8f8;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
    }

    .mobile-collection-slider .carousel-cell {
      width: 100px !important; 
      height: 100px !important; 
      position: relative !important; 
    }

    .mobile-collection-slider .carousel-cell a {
      display: flex; 
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      border-radius: 15%;
      background: white;
    }

    .mobile-collection-slider img {  
      object-fit: cover;
      width: 75%; 
      height: 75%; 
      justify-content: center; 
      align-items: center; 
    }

    .carousel-cell:hover a {
      border: 3px solid #373737; 
    }

    .carousel-cell.clicked a {
      border: 3px solid #373737; 
    }

    @media only screen and (max-width: 479px) {
      .mobile-collection-slider .carousel-cell {
        width: 100px; 
        height: 100px; 
      }
      .mobile-collection-slider {
        gap: 15px; 
        padding-top: 40px;
      }
    }
  </style>
</head>
<body>

<div class="mobile-collection-slider slick-carousel">
  
  <div class="carousel-cell" data-url="https://stampforge.de/collections/geburtstag">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/hochzeit">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/neues-jahr">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/valentinstag">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
  <div class="carousel-cell" data-url="https://stampforge.de/collections/weihnachten">
    <a href="#" class="image-link">
      <img src="https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350" border="0" />
    </a>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" defer></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var cells = document.querySelectorAll('.carousel-cell');
    var currentURL = window.location.href;

    cells.forEach(function(cell) {
      cell.addEventListener('click', function() {
        cells.forEach(function(c) {
          c.classList.remove('clicked');
        });
        this.classList.add('clicked');
        var url = this.getAttribute('data-url');
        window.location.href = url;
      });

      var cellURL = cell.getAttribute('data-url');
      if (currentURL.includes(cellURL)) {
        cell.classList.add('clicked');
      }
    });

    $('.mobile-collection-slider').slick({
      slidesToShow: 3, 
      slidesToScroll: 1,
    });
     
  });
</script>

</body>
</html>
2

Hello @Roxolot , Could you please share your store’s URL? It will help me better understand the issue.

3

The site URL is https://stampforge.de/collections/keksausstecher
password: newwave

4

Hello @Roxolot , Have you created this slide only for mobile or you want it for both mobile and desktop? Also, I can see you are using the slick slider for this which will affect your design so you have to design the section again.

The image URL(https://cdn.shopify.com/s/files/1/0706/9266/7657/files/Bild4.png?v=1706181350) added to the src attribute is not found that’s why it is showing broken images.

To add the dots replace the below code in your code:

$('.mobile-collection-slider').slick({
      slidesToShow: 3, 
      slidesToScroll: 1,
      dots: true
    });
5

@Huptech-Web i want to build it for desktop and mobile, in both cases there should be three images next to each other and if you swipe (on desktop press the arrow left or right) it should show the next three images.

Do u have an idea how i can change the design of the slick slider. Thats the main problem i have.

6

I found a solution. I added the following code to the sytle section:

/* Custom styles for the slick slider */
.slick-slider {
  margin: 0 auto;
}

/* Style for slick slides */
.slick-slide {
  margin: 0 5px;
}

/* Style for slick dots */
.slick-dots {
  list-style: none;
  text-align: center;
  margin-top: 10px;
}

/* Style for individual slick dots */
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

/* Style for slick dots when active */
.slick-dots li button {
  font-size: 0; /* Remove the numbering */
  width: 10px; /* Set width for dot */
  height: 10px; /* Set height for dot */
  border-radius: 50%; /* Make it round */
  background-color: #373737; /* Dark color for dot */
}

/* Style for active slick dot */
.slick-dots li.slick-active button {
  background-color: #fff; /* Change background color as needed */
}
7

Hello @Roxolot , Great!

8

Add custom section for collection slider in your store:

9

You can create a custom section by just copy and paste code. Without using any App.