davidjerleke/hammer-slider

dotContainer: undefined, IOS

gabsss opened this issue · 3 comments

I've tried a load of way to use my own container for the dots and nothing seems to work. The default shows dots but not on iphone. Codepen example doesn't work on iphone either so we hoping a new div might be more controllable.

Any ideas?

Hi @gabsss ,
I'm not sure if I understand you correctly. Do you mean that you can't set a custom dotContainer for your slider on IOS devices?

//Element that will contain dots. By default it will be generated and appended to slider root element. //Can be anywhere on the page. // dotContainer: undefined, dotContainer: undefined,

couldn't get it to select a class/id/name of div I want for the container :( gave up in the end and css'd the default ul

Also in IOS the dots disappeared, the code pen example doesn't show the dots on iso https://codepen.io/DavidCetinkaya/full/oYgxgG/

I'm trying to remember what I did to fix it. It might of just been a clearfix..

@gabsss Have you tried to pass the element node of your dot container when initialising the slider? Like the example below:

const sliderElement = document.getElementById('hammer-slider');
const dotElement = document.getElementById('my-dot-container-id');

const slider = HammerSlider(sliderElement, {
  dots: true,
  dotContainer: dotElement
});

Note that you need to swap my-dot-container-id with your own id of your custom dot container.
@gabsss, did this resolve the issue?