• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

128
Vistas
What's causing and how to fix these slider scroll distance issues on mobile?

I'm trying to solve some behavioural issues on mobile (iOS 14.8.1) with product image slider elements in a Shopify Dawn2.0 theme (like a carousel, theme calls it a 'slider') that have a button, like below:

enter image description here

which when clicked in order to scroll, scrolls by the incorrect amount causing the edge of the next image to be cut off from view. e.g.

enter image description here

When swiping the slider (internal OS magic) it stops at the correct place, it's just these slider element buttons which result in a scroll of the incorrect amount/to the incorrect position. It happens on mobile no matter the browser. It does not happen when viewing on desktop and shrinking browser window down to mobile size, so it's just on mobile that it's doing this.

The JS that's providing this functionality is in the class sliderComponent in the onButtonClick event which can be found in assets/global.js, around line ~553:

global.js

onButtonClick(event) {
    event.preventDefault();
    const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderFirstItem.clientWidth : this.slider.scrollLeft - this.sliderFirstItem.clientWidth;
    this.slider.scrollTo({
      left: slideScrollPosition,
      behavior:'smooth'
    });
  }

A play with using window.outerWidth, as below, does not help:

const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + window.outerWidth : this.slider.scrollLeft -window.outerWidth

Can anyone help me understand what the problem is here and help me find, or provide me with a solution to fix this?

Thanks in advance.

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda