Dawn theme 8.0 - Slider component - Featured Collection - Desktop missing mouse drag

Store Design
, , , ,
1

I am developing a new theme, based on the Dawn 8.0 theme.

I am having a lot of issues with the slider-component.

Slider works just fine on mobile, but for whatever reason it does not work when dragging with the mouse on a desktop.. Only if you click the navigation buttons.

I did attempt to search for older posts regarding this issue, but the most recent post with a solution is from 2021. The slider-component has since been replaced, by the looks of it.

I have set up a demo here:

https://simple-office-ne.myshopify.com/

PW: testsite

@DB160 you provided a rewritten slider back in 2021. Are you able to help me in the right direction with the current slider-component? :slightly_smiling_face:

1 Like
2

Hi Bjornefar

Ive had a quick look round. Though its not the same this article is related and might give you the help you need to implement it on the featured collection slider.

https://docs.google.com/document/d/17AF9cdIy0da2M2FkQXOPdolm1nJhwpJfXoVCKTJAP9o/edit

It involves adding the slider–everywhere class

There is an associated youtube video

https://www.youtube.com/watch?v=szkhN249qBY

Hope this Helps

Darren

3

Hi Bjornefar

Sorry. I have probably been a bit hasty sending you the above. I think its just to add a slider to that component rather than the anything to do with swipe on mobile.

I have looked at the component on mobile asd this is the class that appears responsible for the scrolling on mobile (in component-slider.css)

@media screen and (max-width: 989px)
.slider.slider–tablet {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}

}

additional settings (in template-collection.css)

@media screen and (max-width: 989px)
.collection .slider–tablet.product-grid {
scroll-padding-left: 1.5rem;
}

}

and

.collection .slider.slider–tablet {
margin-bottom: 1.5rem;
}

}

You could try adding the scroll settings into the desktop class. You may need to adjust some of the rem values.

Cheers

Darren

4

Thanks a lot for chiming in!

It actually looks like the desktop class already has all the scroll settings set already, with the proper rem values. So there has to be some other reason for it not to work. Seems like it was actually that scroll should work on desktop, since all the settings are there.

5

Hi Ben

I think this can only be done with javascript ‘draggable’ from what I can see. You could add some nouse down/up classes to the component in global.js

this might help. https://greensock.com/forums/topic/19730-horizontal-scroll-with-mouse-using-draggable/

I did see this for pure css scrolling.

https://css-tricks.com/pure-css-horizontal-scrolling/

It might be worth putting your question on stack exchange too.

cheers

Darren

1 Like
6

Thanks a lot for the suggestion. Sadly the pure CSS solution doesn’t work.
Will try my luck with the JS solution and post on Stackexchange too