DJ-ImageSlider

DJ-ImageSlider

DJ-ImageSlider is a free, responsive, accessible (WCAG, ADA, SECTION508), mobile ready with touch support, Joomla slider that can be managed through component and modules. Create unlimited groups and slides and put them anywhere on the site (including inside articles). It’s SEO optimized, uses CSS3 animations, fast and user friendly backend administration. Each slide can have title and description and link to Joomla article, menu item or URL.

version

4.1.0

updated

Jun 29 2020

Effects, transitions and customizations

  • HTML5/CSS3 transitions 9+ slide effects
  • custom slide transition time and next slide delay settings
  • choose bullets/numbers as indicators
  • load custom buttons for prev/next/play/pause buttons
  • decide where navigation should appear and when
  • customize slide description (set dimentions and position of the description box)
DJ-ImageSlider

Responsive, mobile and touch ready Joomla slider

  • fully mobile ready - adapts to all screen sizes
  • module can be displayed in any size container and addapts responsively to it’s size
  • swipe navigation handling for touch screens
  • place the module in the articles and create content sliders the smart way in Joomla 3
DJ-ImageSlider

Rich settings for each slide

  • you can set start and end date of publishing
  • decide if slide will be linked to:
    • menu item (you can select menu item from the dropdown)  
    • article (you can choose the article)
    • url (just type your url)  
    • or not linked at all (then when the slide is clicked it opens the magnific popup)
DJ-ImageSlider

Flexible input and output

  • Slides can be organized in unlimited categories
  • each category can have unlimited items
  • beside Component as source - in module a folder can be set as a source of images
  • you can create unlimited amount of sliders and place them in different places on your website
DJ-ImageSlider

WCAG 2.0 and Section 508

  • compatibility with keyboard access:
    • arrows navigation
    • tab+spacebar/enter key for navigation buttons
  • enable/disable optimized keyboard access
DJ-ImageSlider

Last but not least

  • Full RTL support - including transition direction of the slides
  • themes for easier slider styling (possibility to create own themes or override from template)
  • drag&drop slides ordering in the back-end
  • cross browser support: IE9+, Firefox 10+, Safari 3+, Chrome 8+, Opera 9+, Camino, Flock 0.7+.
DJ-ImageSlider

Joomla Slider Settings

Straight forward backend panel

DJ-ImageSlider comes with easy backend control panel.

There you can manage slides and categories.

Add new slides, categories and reorder slides within category easily

DJ-ImageSlider

Listing and adding new categories

Listing and adding categories (groups) is as easy as managing core Joomla categories.

DJ-ImageSlider

Manage slides

Managing slides is easy. You can see all your slides, reorder them with drag and drop, and filter by category for easier management.

DJ-ImageSlider

Slide's settings

Each slide can be customized.

  1. Title of the slide
  2. Assign it to category
  3. Easily select your image
  4. Add description that will be displayed in the box over the image
  5. Select start and finish date of the publication of the slide if needed (good solution if you want the slide to appear or disappear on selected dates)
  6. Decide where the slide should be linked (menu item, url, article, or no linking at all)
DJ-ImageSlider

Module - initial settings

In the module settings you can select:

  • Slider source (this can be Component or folder if you don't want to use component, then images will be pulled right from the selected folder)
  • Slider type (horizontal, vertical or fade)
  • Theme (you can create your own themes and select different for each module)
  • Link image - select if slide is hyperlinked or will display original version in lightbox
DJ-ImageSlider

Module - settings for component as source

If you select the component as source you can choose the slides category from which slides will be pulled, disable or enable display of title, description, readmore link.

You can also define your own text for "readmore", set characters limit for description and decide if title and description should also be links.

DJ-ImageSlider

Module - basic slider settings

In basic slider settings you can:

  • decide if you want to display the slider as "Full width slider" - this will make the module fit the container it's in
  • manually set width and height of the slider
  • fit images size to slide hight, width or let the system choose the best option
  • set vertical image centering
  • set the amount of images visible in one slide!
  • set max amount of images loaded
  • set sorting
  • enable CSS3 transitions
  • enable Autoplay of the slider
  • set play/pause and prev/next buttons to be displayed on mouse hover, always or never
  • enable/disable indicator (dots or numbers)
DJ-ImageSlider

Module - customize description box

The description box can be customized:

  • set width of the description box
  • position the description box within the slide, you can set vertical and horizontal position so it fits your needs
DJ-ImageSlider

Module - customize buttons

You can easily customize the slider module by adding your own:

  • prev, next buttons (upload them right from the module)
  • play, pause buttons (those can also be updated right from the module's settings)

It's also easy to position the navigation horizontally and vertically.

Additionally you can choose if the indicator will be bullets or numbers.

DJ-ImageSlider

Module - slide effects

Tune your effects choosing exact effect and effect type.

Additionally you can customize:

  • slide transition time
  • next slide delay
  • preload delay time
DJ-ImageSlider

Screenshots

DJ-ImageSliderDJ-ImageSliderDJ-ImageSliderDJ-ImageSliderDJ-ImageSliderDJ-ImageSlider
 

version

4.1.0

updated

Jun 29 2020