image slider navigation not responsive, and # of visible images does not work

Joomla 3.7.4 with DJ-ImageSlider 3.2.2. I'm using the module only, to load images from folders.

I've looked through the forum but didn't find anything to help with the follow.

I'm having 2 issues:

issue 1: unable to set the number of visible images. why? Regardless of what number I change it to, the default number when the imageslider was installed is all that ever can't change it.

issue 2: While the slider itself appears to be responsive, the navigation is only responsive and displays correctly on desktop and ipad landscape only, the navigation is not responsive, nor does it display correctly on small devices up to ipad portrait. I use the next/prev only. On all mobile devices, including ipad portrait, the next/prev is present and is huge. I have checked and there are no styles conflicting with the imageslider actually appears as though there are no styles for small devices in your stylesheet.

I'm attaching screen shots of both of the above issues. I would provide the url, but there doesn't appear that we can post privately in this forum.

Please help.


  • Hello,

    DJ-ImageSlider adjust the number of visible images at once to the available width. You can change the number of visible images at once, but if you want display that number of images at once you have to also decrease slide width. Simple example: your page on desktop screen is 1000px wide, so to display 8 images at once you have to do simple math 1000 / 8 = 125 and set the slide width option do 125. Note that when you display your page on table where your page is 600px wide then visible images will be decrease to floor( 600 / 125 ) = 4. That kind of adjustment make the images readable for all kind of devices (screen resolutions).

    Regarding the issue with huge arrow the reason is your template styles. It doesn't matter that there's no styles for small screens in slider stylesheet, your template shouldn't set 100% width for all images on your website. It should rather set max-width to 100%.

Sign In or Register to comment.