In this article, I will tell you how to create a responsive slider in Joomla.

1. Slider installation

Download the Slider extension by this link. Then, go to the “Extensions -> Extensions manager” in the admin panel, and open “Upload Package File” tab. Choose «joomly_slider.zip» archive and install it.

2. Slideshow creation

Go to the “Extensions->Modules” and open the “Joomly slider”.  “Slider options” tab has options panel and slider template. Right click on the template to add new or edit/remove the current slide.

Now, in the popup window, you can set color or image for the background, add text or HTML content (buttons, fields, videos and etc.). Let’s add some slides for example.

Add text (1) to the first slide, set font size (2), redirect link (6), font color (4), and centered content (3). Click “Select” button to add the background image.

Choose an image in the popup window and click “Insert” button (1). If your image is not uploaded yet, find uploader at the bottom of the popup window (2).

Our first slide is done, so we click  “Add” button. Now, let’s add youtube video to the second slide. Get frame code from the youtube video (1,2) and insert it into the content box.

You can choose background color, if you want and then, click “Save”.

3. Slider options

Now, slides are done and we can customize the slider. Look for the options panel:

•  Fields “Width” and “Height” set slider size. You can set absolute size in pixel, or relative in “%”. If “Aspect ratio” is enabled, the slider and background image will be resized with constant aspect ratio. Otherwise, the aspect ratio can be changed, so background image could be cuted.
•  Choose one of nine animation effect.
•  Add back/forward and switch buttons, turn on sliding by mouse.
•  “Thumbnails” option allows you to turn on thumbs and set.
•  If you have set name attributes for the slides, you can show it by this option.
•  Empty “Infinity loop” will stop slideshow on the last slide.
• Last two options allow you to configure slideshow (set delay and turn on slider animation).

4. Add carousel to the site page

If you want to add the slider to an article, open one of them and insert {loadmodule mod_joomly_slider}. This code will add the slideshow to the article page.

If you want to put the slider in any position of the page, open “Module” tab, set position (1), status (2), then open “Menu Assignment” tab (3) and choose pages for the module.

That’s all!