So the issue is that the gallery in Dawn is an element that can scroll and it uses the browser native scroll behavior, because of the mobile behavior you can simply slide it left and right, and with a bit of extra css - you can snap the scroll to an element.
in the global.js - there is code that creates html elements. and one of them is the gallery, there it controls the slider behavior. we can edit this file in order to add desktop (mouse) events to the gallery and allow it to slide.
- go to code editor → assets/global.js
search for:
class SliderComponent extends HTMLElement
then under this line look for super() and under it add this:
this.sliderContainer = this.querySelector(".product__media-list");
then a bit under look for
if (!this.slider || !this.nextButton) return;
and change it to be:
if (!this.slider || !this.nextButton || !this.sliderContainer) return;
then under this line:
this.nextButton.addEventListener("click", this.onButtonClick.bind(this));
add this code snippet:
let isDragging = false;
let startX, scrollLeft;
this.sliderContainer.addEventListener("mouseover", (e) => {
this.slider.style.cursor = "grab";
});
this.sliderContainer.addEventListener("mousedown", (e) => {
e.preventDefault(); // Prevent default image drag behavior
isDragging = true;
this.sliderContainer.classList.add("dragging");
this.sliderContainer.style.cursor = "grabbing";
startX = e.pageX - this.sliderContainer.offsetLeft;
scrollLeft = this.sliderContainer.scrollLeft;
});
this.sliderContainer.addEventListener("mouseleave", () => {
isDragging = false;
this.sliderContainer.style.cursor = "auto";
this.sliderContainer.classList.remove("dragging");
});
this.sliderContainer.addEventListener("mouseup", () => {
isDragging = false;
this.sliderContainer.style.cursor = "auto";
this.sliderContainer.classList.remove("dragging");
});
this.sliderContainer.addEventListener("mousemove", (e) => {
if (!isDragging) return;
e.preventDefault();
this.sliderContainer.style.cursor = "grabbing";
const x = e.pageX - this.sliderContainer.offsetLeft;
const walk = (x - startX) * 2; // Adjust multiplier for sensitivity
this.sliderContainer.scrollLeft = scrollLeft - walk;
});
we are almost done, one last thing we need to do is to adjust the css:
go to assets/component-slider.css
search for:
.slider--mobile + .slider-buttons
and replace the whole media query to this (you can simply remove the existing media query and just past this there):
@media screen and (min-width: 750px) {
.slider{
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
}
then go to assets/section-main-product.css
search for:
product--thumbnail .product__media-item:not(.is-active)
and remove the display none:
.product--thumbnail .product__media-item:not(.is-active),
.product--thumbnail_slider .product__media-item:not(.is-active) {
/* display: none; */
}
this should work.
