Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Swiping to Slide2 on mobile causes spasm

See original GitHub issue

Slider can be found on mobile viewports here: https://namesjames.vercel.app

Works fine on desktop emulating mobile but on mobile devices sliding from first to second slide causes a spasm in which it seems to animate as if it’s reached the end of the list and ‘returns’ back to the start… similar to if you scroll through all slides and then it returns from last slide to 001…

Any ideas or help appreciated as I believe this is a bug

slider.js

import { Carousel } from 'react-responsive-carousel'
import React, { Component } from 'react';
import {MobileSliderStyling} from './styled'

class MobileSlider extends Component {
    render() {
        return (
          <MobileSliderStyling>
            <Carousel
            showArrows={false}
            showThumbs={false}
            infiniteLoop
            centerMode
            centerSlidePercentage={80}
            renderIndicator={false}
            >
                <div>
                    <img src="./mobile-homepage-slider/mobile-luxe.png"
                        srcSet="./mobile-homepage-slider/mobile-luxe.png 1x, ./mobile-homepage-slider/mobile-luxe@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-applied.png"
                        srcSet="./mobile-homepage-slider/mobile-applied.png 1x, ./mobile-homepage-slider/mobile-applied@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-hilgrove.png"
                        srcSet="./mobile-homepage-slider/mobile-hilgrove.png 1x, ./mobile-homepage-slider/mobile-hilgrove@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-nice.png"
                        srcSet="./mobile-homepage-slider/mobile-nice.png 1x, ./mobile-homepage-slider/mobile-nice@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-living.png"
                        srcSet="./mobile-homepage-slider/mobile-living.png 1x, ./mobile-homepage-slider/mobile-living@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-equinox.png"
                        srcSet="./mobile-homepage-slider/mobile-equinox.png 1x, ./mobile-homepage-slider/mobile-equinox@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-vertohomes.png"
                        srcSet="./mobile-homepage-slider/mobile-vertohomes.png 1x, ./mobile-homepage-slider/mobile-vertohomes@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-work-life.png"
                        srcSet="./mobile-homepage-slider/mobile-work-life.png 1x, ./mobile-homepage-slider/mobile-work-life@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-xandwhy.png"
                        srcSet="./mobile-homepage-slider/mobile-xandwhy.png 1x, ./mobile-homepage-slider/mobile-xandwhy@2x.png 2x"
                     />
                </div>

                <div>
                    <img src="./mobile-homepage-slider/mobile-mb.png"
                        srcSet="./mobile-homepage-slider/mobile-mb.png 1x, ./mobile-homepage-slider/mobile-mb@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-mhk.png"
                        srcSet="./mobile-homepage-slider/mobile-mhk.png 1x, ./mobile-homepage-slider/mobile-mhk@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-at.png"
                        srcSet="./mobile-homepage-slider/mobile-at.png 1x, ./mobile-homepage-slider/mobile-at@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-fc.png"
                        srcSet="./mobile-homepage-slider/mobile-fc.png 1x, ./mobile-homepage-slider/mobile-fc@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-enhance.png"
                        srcSet="./mobile-homepage-slider/mobile-enhance.png 1x, ./mobile-homepage-slider/mobile-enhance@2x.png 2x"
                     />
                </div>
                <div>
                    <img src="./mobile-homepage-slider/mobile-vc.png"
                        srcSet="./mobile-homepage-slider/mobile-vc.png 1x, ./mobile-homepage-slider/mobile-vc@2x.png 2x"
                     />
                </div>
            </Carousel>
          </MobileSliderStyling>
        );
    }
};

export default MobileSlider

Issue Analytics

State:
Created 3 years ago
Comments:5

Top GitHub Comments

1reaction

jamesryan-devcommented, Oct 7, 2020

I ended up using conditional rendering and using a different slider (slick react) for mobile to create this effect in the end… @jereyee @disazonov so can only recommend switching…

0reactions

stale[bot]commented, Jul 10, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.