Composr Supplementary: Adding an Image Slider to Composr

Unslider

(Click to enlarge)

Many websites now make use of sliders to convey information to their visitors. It's incredibly common especially in the world of eCommerce as it allows several items to be displayed in the same space while sliding between them. To achieve this in Composr it is just a case of needing to install a specific addon. The addon is titled Unslider and is simple to set up and use which I will go into below.

Installing the Unslider addon in Composr

To install this addon:

1. Go to the Admin Zone
2. Navigate to the Structure section of the Admin Zone menu
3. Choose the Addons icon
4. Scroll down and click "Import non-bundled addon(s)"
5. Click Download and choose the Graphical category
6. Choose Unslider
7. Scroll down and click the "Import non-bundled addon(s)" button
8. The next screen will show you which files will be updated as the addon is installed. It is important you check this list carefully if you have changed any templates on your site or any of the other coding. There should only be around 5 or 6 files for this addon
9. Once you are happy click the Proceed button

Adding the slider to your page

If you are using the Block construction assistant you can add a block in the normal way and you will need to scroll down until you see the block called main_unslider. If you are adding the code manually you can use this example and tailor it to your needs.

• Pages – This is the names of the slides which you will use in your slider. I will cover how to edit these further down.
• Width – The width of the slider. This defaults to 100% of the available space.
• Height – This defaults to blank.
• Buttons – Whether you want buttons for users to control the slider to be visible.
• Delay – How long will the slider delay before moving on.
• Speed – How fast will the transition happen.
• Keypresses – Can the slider be controlled by keypresses rather than clicking.
• Slider ID – The name of this slider if you have multiple sliders on the same page you will have to make sure you give them different names.
• Bg Colour – The background colour of the slider.

Editing the slides

To edit the Comcode page which make up the slides for the slider you need to edit the individual Comcode pages which have been created. To find these go to the content section of the Admin Zone. Choose Pages and look for pages titled _unslider_slide1 etc. If you have called your slides something other than slide1, slide2, etc. you will need to create new pages with the names set accordingly.

You edit these pages as you would a normal page on your website.

Feedback

Have a suggestion? Report an issue on the tracker.