Re: Clickable Collection Slider - Custom Code

Roxolot · ‎03-27-2024

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?

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

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>

Huptech-Web · ‎03-27-2024

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
    });

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Roxolot · ‎03-27-2024

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 */
}

View solution in original post

Huptech-Web · ‎03-27-2024

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Roxolot · ‎03-27-2024

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

Huptech-Web · ‎03-27-2024

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
    });

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Roxolot · ‎03-27-2024

@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.

Roxolot · ‎03-27-2024

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 */
}

Huptech-Web · ‎03-27-2024

Hello @Roxolot , Great!

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

MRamzan · ‎10-09-2024

Add custom section for collection slider in your store:

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

Re: Clickable Collection Slider - Custom Code

Clickable Collection Slider - Custom Code

Community Blog Articles