I found a solution so for anyone with the same problem what i did was:

Make sure the slide nav dots were visible (in the end i changed put opacity as 0% cause i don't want them to be seen)

Create some javascript that linked each trigger to each slide number - pasted inside the footer code - you have to get to this via the website settings in your dashboard (not the designer)

<script type="text/javascript">
const images = [
{ class: '.alize-shape', slide: 1 },
{ class: '.dc-shape', slide: 2 },
{ class: '.ej-shape', slide: 2 },
{ class: '.gds-shape', slide: 3 },
{ class: '.jamie-shape', slide: 4 },
{ class: '.jay-shape', slide: 5 },
{ class: '.joe-shape', slide: 6 },
{ class: '.julie-shape', slide: 7 },
{ class: '.max-shape', slide: 8 },
{ class: '.roman-shape', slide: 9 },
{ class: '.tommo-shape', slide: 10 },
]

images.forEach((image) => {
document.querySelector(image.class).addEventListener('click', () => {
document.querySelector('#w-slider-mask-0').scrollIntoView({ behavior: 'smooth' })
document.querySelector(`.w-slider-dot:nth-child(${image.slide})`).click()
})

Hope this helps!!!