What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Clickable Collection Slider - Custom Code

Solved

Clickable Collection Slider - Custom Code

Roxolot
Explorer
67 4 13

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

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

Roxolot_1-1711525758831.png

 

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>

 

 

Accepted Solutions (2)
Huptech-Web
Shopify Partner
1011 204 218

This is an accepted solution.

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
Explorer
67 4 13

This is an accepted solution.

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

Replies 7 (7)

Huptech-Web
Shopify Partner
1011 204 218

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
Explorer
67 4 13

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

Huptech-Web
Shopify Partner
1011 204 218

This is an accepted solution.

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
Explorer
67 4 13

@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
Explorer
67 4 13

This is an accepted solution.

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
Shopify Partner
1011 204 218

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
Shopify Partner
392 3 36

Add custom section for collection slider in your store:

 

Hire Me:

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