How can I modify slider buttons in Dawn 2.0?

Store Design
1

Hi,

I’m using Dawn 2.0

wortheattt.myshopify.com

For my “multicolumn” sections, I want to change the slider-buttons.

Now it’s in numbers like this:

Ben1000_0-1646131316101.png
Ben1000_0-1646131316101.png338×150 878 Bytes

I want it to look like this:

Ben1000_1-1646131368207.png

How can I change it?

Thanks

2

I can’t see the slider section on the homepage.

And you need some javascript coding skills.

3

Hi @SimonD ,

I have JavaScript skills, I tried to change it, but it’s not working.

There are two sections - multicolumn on my homepage.

4

Simple use Slick https://kenwheeler.github.io/slick/

.hero__dots-wrapper {
display: flex;
justify-content: center;
position: absolute;
width: 100%;

.slick-dots {
top: 10px;
height: 1.5rem;
width: auto;
padding: 0 6px;
position: relative;
border-radius: 100px;
}
}

Add this Code into theme.scss.liquid

Then go to Theme.js.liquid and these line

First declare variable.

{

var settings,
$slider,
$allSlides,
$activeSlide,
$slickDots,
$paginations,
$mobileDotsContainer,
windowHeight,
scrolled,
prefixedTransform;
var currentActiveSlide = 0;

}

After Calling Object

onInit = function(obj) {
$slider = obj.$slider;
$allSlides = $slider.find(‘.’ + slickTheme.vars.slideClass);
$activeSlide = $slider.find(‘.’ + slickTheme.vars.activeClass);
$slickDots = $(slickTheme.vars.slickDots);
$paginations = slickTheme.cache.$heroDotsWrapper.find(
slickTheme.vars.pagination
);

That’s it

5

Hi @Awaiskhalid .

I’m using Dawn 2.0, you posted code for old template version

6

It’s same as it Dawn 2.0 only update it’s class name or Onclick id, if you have some knowledge about programming you can do this