Full width slider, one image per slide. I'm using all the default options and not passing in any of my own.
This issue:
Couldn't figure out why an infinite scrolling slider wasn't working correctly. The slider would not start on the correct initial slide (index 0 in my case) and would display a slide further in the slider. I'd be able to navigate to the next slide fine but when I would hit next a second time nothing would display.
Starting on a fresh reload, if I went to prev first then no slide would display. Sometimes I would see a flash of an image but it would disappear.
I tried defining the width of my slider instead of leaving it 100%, no luck.
Diagnosis:
Looking at the code I could see that the translateX value was being calculated incorrectly. If you're starting from the 0 index slide it should be the width of the first slide (positive value). What I was seeing was numberOfSlides * widthOfSingleSlide but at a negative value. I thought something was wrong in the core of vue-agile but everything looks fine there.
Work Around:
The issue stems from max-width:100%; being placed on the agile__slides class. As far as I can tell it makes infinite scroll impossible because the slider can't calculate the correct translateX.
Overriding that value in my component with max-width:none !important works. the slider is able to calculate everything correctly.
Solution:
For my use case and I admit I'm short sighted to my use case, it'd be best to remove the max-width:100%; style from agile__slides but I'm unsure how this would effect other ways the slider works.
Wanted to share in case others have been running into the same issue.
Full width slider, one image per slide. I'm using all the default options and not passing in any of my own.
This issue:
Couldn't figure out why an infinite scrolling slider wasn't working correctly. The slider would not start on the correct initial slide (index 0 in my case) and would display a slide further in the slider. I'd be able to navigate to the next slide fine but when I would hit next a second time nothing would display.
Starting on a fresh reload, if I went to prev first then no slide would display. Sometimes I would see a flash of an image but it would disappear.
I tried defining the width of my slider instead of leaving it 100%, no luck.
Diagnosis:
Looking at the code I could see that the
translateXvalue was being calculated incorrectly. If you're starting from the 0 index slide it should be the width of the first slide (positive value). What I was seeing wasnumberOfSlides * widthOfSingleSlidebut at a negative value. I thought something was wrong in the core of vue-agile but everything looks fine there.Work Around:
The issue stems from
max-width:100%;being placed on theagile__slidesclass. As far as I can tell it makes infinite scroll impossible because the slider can't calculate the correct translateX.Overriding that value in my component with
max-width:none !importantworks. the slider is able to calculate everything correctly.Solution:
For my use case and I admit I'm short sighted to my use case, it'd be best to remove the
max-width:100%;style fromagile__slidesbut I'm unsure how this would effect other ways the slider works.Wanted to share in case others have been running into the same issue.