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 a specified folder.

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

Let's take a look at Module Parameters:

image-slider-module-settings-new

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-'.
  • 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)
  • 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'
  • Sort by – sort slides by file names (folder) / ordering (component) or randomise the ordering
  • Use CSS3 transition – Use CSS3 transition instead of javascript transition effect for switching between the slides
  • Autoplay – choose if slider should automatically start on page load
  • Loop once - when this option is enabled,  the autoplay will be paused on the last image.
  • Keyboard access (WCAG) - enable keyboard access to meet WCAG recommendations.

Under Module Parameters you can customize slider:

customize-slider-options-news

Short description:

 

  • Visible images - number of displayed images at once
  • Space between images - space between images in pixels
  • Max images - set maximum number of images to be loaded into slider
  • Link image - choose a behaviour of clicked image
  • Title color - choose the title color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  • Title font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
  • Title font size - set the font size by entering the px or em value. Leave the field empty for a default size.
  • Description color - choose the description color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  • Description font -  enter the name of the selected font. You can use generic system fonts or Google Fonts.
  • Desc font size - set the description size by entering the px or em value. Leave the field empty for a default size.
  • Read more color - choose the read more color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters.
  • Readmore font - enter the name of the selected font for the read more option. You can use generic system fonts or Google Fonts.
  • Readmore font size - set the read more font size by entering the px or em value. Leave the field empty for a default size.
  • Background color - choose the background color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
  • Include Google Fonts - choose whether you want to use Google Fonts.
  • Border radius - you can give any slide "rounded corners" by applying a border-radius through CSS.
  • 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 - choose from the list
  • 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