How can I modify my custom image slider code to select images from my files?

[Roxolot]

I have the code for a custom image slider. Unfortunately, you can only insert products there and it then uses the product image. I would like to be able to upload an image directly and then write a link to the corresponding product myself. In the following picture you can see how the slider looks like.

Does anyone have any idea how I should change the code so that I can select an image from my files and not a product?

Desktop:

I have the code for a custom image slider. Unfortunately, you can only insert products there and it then uses the product image. I would like to be able to upload an image directly and then write a link to the corresponding product myself. In the following picture you can see how the slider looks like.

Desktop:


<style>
  .dawn-product-slider {
    max-width: 1600px;
    margin: auto;
    padding: 0 20px;
    padding-bottom: 32px;
    margin-top: 5px;
  }
  .dawn-product-slider img {
      width: 100%;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 16px;
    margin: auto;
    padding: 18px;
    margin: 12px;
    width: calc(32% - 10px);
  }
  .product-btn {
      width: 100%;
  }
  .dawn-product-slider a {
    color: black;
    text-decoration: none; 
  }
  .dawn-product-slider a .title:hover {
    text-decoration: underline; 
  }
  .dawn-product-slider a .title, .dawn-product-slider a .price {
    margin: 0px;
  }
  .dawn-product-slider .flickity-button.flickity-prev-next-button.previous, 
  .dawn-product-slider .flickity-button.flickity-prev-next-button.next {
    background: red;
    color: white;
  }
  .dawn-product-slider:focus-visible, .dawn-product-slider .carousel:focus-visible {
    outline: unset;
    outline-offset: unset;
    box-shadow: unset; 
  }
  @media only screen and ( max-width: 767px ) {
    .dawn-product-slider .carousel-cell {
      width: calc(50% - 10px);
    }
  }
  @media only screen and ( max-width: 479px ) {
    .dawn-product-slider .carousel-cell {
      width: calc(100% - 10px);
    }
  }

  /* Add this to adjust the position of the page dots */
  .flickity-page-dots {
    transform: translateY(-40px); /* Adjust the value as needed to move the dots up or down */
  }
</style>

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div class="collection page-width">
  <div class="title-wrapper-with-link">
    <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">{{ section.settings.title | escape }}</h2>
  </div>
</div>
<div class="dawn-product-slider">
   <div class="carousel">
      {% for block in section.blocks %}
      {% assign product = all_products[block.settings.product_item] %}
      <div class="carousel-cell">
         <a href="{{ product.url }}">
            <img data-flickity-lazyload="{{ product.featured_image | img_url: 'master' }}" border="0" />
         </a>
      </div>
      {% endfor %}
   </div>
  
</div>
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
  @media only screen and ( min-width: 1201px ) {
    {% if nav_range == 2 %}
    .dawn-product-slider .carousel-cell {
        width: calc(49% - 10px);
    }
    {% elsif nav_range == 3 %}
    .dawn-product-slider .carousel-cell {
      width: calc(32% - 10px);
    }
    {% elsif nav_range == 4 %}
    .dawn-product-slider .carousel-cell {
      width: calc(24% - 10px);
     }
    {% endif %}
  }
  .flickity-page-dots .dot {
    background: {{ section.settings.navigation_color }};
  }
  .flickity-button-icon {
    color: {{ section.settings.navigation_color }};
  }
{% endstyle %}
<script>
   var elem = document.querySelector('.dawn-product-slider .carousel');
   var flkty = new Flickity( elem, {
     contain: true,
     imagesLoaded: true,
     lazyLoad: 2,
     wrapAround: true,
     pageDots: true,
     prevNextButtons: false,
   });
   {% if request.design_mode %}
   document.addEventListener("shopify:section:load", function(event) {
     var elem = document.querySelector('.dawn-product-slider .carousel');
     var flkty = new Flickity( elem, {
       contain: true,
       imagesLoaded: true,
       lazyLoad: 2,
       wrapAround: true,
       pageDots: true,
       prevNextButtons: false,
     });
   });
   {% endif %}
</script>

<style>
  @media only screen and (max-width: 767px) {
    .dawn-product-slider .carousel {
      contain: true;
    }
  }
</style>
{% schema %}
{
  "name": "Images Slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of images in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Images Slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ] ,
  "blocks": [
    {
        "type": "card",
        "name": "Image card",
        "settings": [
          {
            "type": "product",
            "id": "product_item",
            "label": "Choose the product you want to display"
          }
      ]
    }
  ] ,
  "presets": [
    {
      "name": "Image slider",
      "category":"Custom"
    }
  ]
}
{% endschema %}

[Roxolot · Accepted solution]

I found a solution for my problem. This is one way of adding an image slider.

<style>
  .dawn-product-slider {
    max-width: 1600px;
    margin: auto;
    padding: 0 20px;
    padding-bottom: 32px;
    margin-top: 5px;
  }
  .dawn-product-slider img {
    width: 100%;
  }
  .dawn-product-slider .carousel-cell {
    background: #fff;
    border-radius: 16px;
    margin: auto;
    padding: 18px;
    margin: 12px;
    width: calc(32% - 10px);
  }
  .product-btn {
    width: 100%;
  }
  .dawn-product-slider a {
    color: black;
    text-decoration: none;
  }
  .dawn-product-slider a .title:hover {
    text-decoration: underline;
  }
  .dawn-product-slider a .title,
  .dawn-product-slider a .price {
    margin: 0px;
  }
  .dawn-product-slider .flickity-button.flickity-prev-next-button.previous,
  .dawn-product-slider .flickity-button.flickity-prev-next-button.next {
    background: red;
    color: white;
  }
  .dawn-product-slider:focus-visible,
  .dawn-product-slider .carousel:focus-visible {
    outline: unset;
    outline-offset: unset;
    box-shadow: unset;
  }
  @media only screen and (max-width: 767px) {
    .dawn-product-slider .carousel-cell {
      width: calc(50% - 10px);
    }
  }
  @media only screen and (max-width: 479px) {
    .dawn-product-slider .carousel-cell {
      width: calc(100% - 10px);
    }
  }

  /* Add this to adjust the position of the page dots */
  .flickity-page-dots {
    transform: translateY(-40px); /* Adjust the value as needed to move the dots up or down */
  }
</style>

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<div class="collection page-width">
  <div class="title-wrapper-with-link">
    <h2 class="title{% if section.settings.title == blank %} title--no-heading{% endif %}">
      {{ section.settings.title | escape }}
    </h2>
  </div>
</div>
<div class="dawn-product-slider">
  <div class="carousel">
    {% for block in section.blocks %}
    <div class="carousel-cell">
      <img data-flickity-lazyload="{{ block.settings.custom_image | img_url: 'master' }}" border="0" />
    </div>
    {% endfor %}
  </div>
  <!--- Coded by keiwords.com --->
</div>
{% assign nav_range = section.settings.navigation_amount %}
{% style %}
@media only screen and (min-width: 1201px) {
  {% if nav_range == 2 %}
  .dawn-product-slider .carousel-cell {
    width: calc(49% - 10px);
  }
  {% elsif nav_range == 3 %}
  .dawn-product-slider .carousel-cell {
    width: calc(32% - 10px);
  }
  {% elsif nav_range == 4 %}
  .dawn-product-slider .carousel-cell {
    width: calc(24% - 10px);
  }
  {% endif %}
}
.flickity-page-dots .dot {
  background: {{ section.settings.navigation_color }};
}
.flickity-button-icon {
  color: {{ section.settings.navigation_color }};
}
{% endstyle %}
<script>
var elem = document.querySelector('.dawn-product-slider .carousel');
var flkty = new Flickity(elem, {
  contain: true,
  imagesLoaded: true,
  lazyLoad: 2,
  wrapAround: true,
  pageDots: true,
  prevNextButtons: false,
});
{% if request.design_mode %}
document.addEventListener("shopify:section:load", function (event) {
  var elem = document.querySelector('.dawn-product-slider .carousel');
  var flkty = new Flickity(elem, {
    contain: true,
    imagesLoaded: true,
    lazyLoad: 2,
    wrapAround: true,
    pageDots: true,
    prevNextButtons: false,
  });
});
{% endif %}
</script>

<style>
/* Add media query for mobile */
@media only screen and (max-width: 767px) {
  .dawn-product-slider .carousel {
    contain: true;
  }
}
</style>
{% schema %}
{
  "name": "Images Slider",
  "settings": [
    {
      "type": "range",
      "id": "navigation_amount",
      "min": 2,
      "max": 4,
      "step": 1,
      "default": 3,
      "label": "Change the number of images in view"
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Change color of the pagination|navigation|scrollbar"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Images Slider",
      "label": "t:sections.featured-collection.settings.title.label"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "custom_image",
          "label": "Upload an Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image slider",
      "category": "Custom"
    }
  ]
}
{% endschema %}

[shellyj]

Where do we add this code? I have a similar problem and want to add a image carousel to the product page in Dawn theme

[MRamzan]

Here is a way according to your question. You can upload different images but connect any product or collection to it.