Tutorial: How to create slider in Joomla

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

1. Slider installation

Download 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.

module installation

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.

Slider options Joomla

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.

Slide options

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

add background image

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.

share youtubeyoutube slide

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

3. Slider options

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

Slider options bar

  •  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 constatnt aspect ratio. Otherwise, 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 allow you to turn on thumbs and set.
  •  If you have set name attributes to 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.

slider to an article

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.

slider top position

That’s all!

 

 

Leave a Reply