Home / Help / Documentation / DJ-ImageSlider / DJ-ImageSlider module

DJ-Image Slider module is necessary to display component slides in the module position. However, this module can work without component and then displays only images from specified folder.

Navigate Extensions > Module Manager and choose DJ-ImageSlider module.

Let's take a look at Module Parameters:

slider module1

Short description:

  • Slide source – choose whether the images will be taken from a folder or a DJ-ImageSlider component
  • Slider type – display images vertically, horizontally or one image at once with fade effect
  • Theme - choose the theme for DJ-ImageSlider. You can create your own theme by copy the existing one and renaming the folder or copy th djimageslider.css fiels from default theme into /templates/[your_template]/css/ and set theme to '-override from template-'.
  • Link image - Choose a behaviour of clicked image, if "open image in modal" selected image will be opened in the modal box (joomla type of lightbox)
  • Image folder – type here path from joomla root folder to the image folder for slider, ex. images/stories/slides
  • Link – an URL to redirect to if the image is clicked upon (e.g. http://www.joomla.org or index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50)
  • Slides category – choose a DJ-ImageSlider category to display
  • Show title – show or hide slide titles
  • Show description – show or hide slide descriptions
  • Show readmore – show or hide readmore links
  • Readmore text - enter your custom text for readmore link or leave empty to use a defoult text from language file
  • Link title – make the slide titles linkable (as readmore)
  • Link description – make the slide descriptions linkable (as readmore)
  • Description limit - limit slides description to specified number of characters.
  • Full width slider - yes/no
  • Slide width – width of displayed image measured in pixels
  • Slide height – height of displayed image measured in pixels
  • Fit a size of image to – Fit a size of image to slide height or width, second dimention will be proportional. If you want to display image on the left and description on the right, you should chhse fitting an image size to slider height.
  • Vertical image centering – set 'yes' o 'no'
  • Visible Images – number of displayed images at once
  • Space between images – space between images in pixels
  • Max images – set a maximum number of images to be loaded into slider
  • Sort by – sort slides by file names (folder) / ordering (component) or randomise the ordering
  • Use CSS3 transition Slide effect – Use CSS3 transition instead of javascript transition effect for switching between the slides
  • Autoplay – choose if slider should automatically start on page load
  • Show play/pause – you can hide or show button for start and stop auto sliding. Note that the play/pause button is visible only if mouse cursor is over the slider
  • Show next/prev – you can hide or show buttons for navigate to next and previous slide
  • Show indicators - show or hide indicators navigation. Displays direct indicator for each slide


Under Module Parameters you can customize slider:

slider module2

Short description:

  • Description width – description area width in pixels. Leave empty for 100% width
  • Description vertical position – set the vertical position of description area in pixels from the bottom border of the image
  • Description horizontal position – set the horizontal position of description area in pixels from the left border of the image
  • Prev/Next/Play/Pause Button – type here a path from joomla root folder to the navigation button image. Leave this field empty for default button image. Example: images/stories/prev.png
  • Navigation bar vertical position – set the vertical position of navigation bar in pixels from the top of the slider
  • Navigation bar horizontal position – set the horizontal position (left and right margin) for navigation bar. You can use negative value if you want arrows go outside the slider
  • Indicators style - points/numbers
  • Slide effect type – choose the effect type or leave 'auto' to let the system choose
  • Slide transition time – set the slide transition time in miliseconds (1000 ms = 1 second). Leave empty to let the system choose
  • Next slide delay – set the pause time between slides in miliseconds (1000 ms = 1 second). Leave empty to let the system choose
  • Preload delay time - you can specify preloading time in miliseconds (1000 ms = 1 second). If you leave it empty, slider will be shown when page loaded

Found this article interesting? Subscribe for more.
Or share this article with your friends.

Subscribe to the Telegram bot / Subscribe to the Messenger Bot