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 ocPortal it is just a case of needing to install a specific add-on. The add-on is titled Unslider and is simple to set up and use which I will go into below.
Installing the Unslider add-on in ocPortal
To install this add-on
- Log in to your adminzone
- Navigate to the structure and then addons section of the Adminzone
- Scroll down and click ‘import non bundled addons’
- On the next screen select the ‘download’ check box and expand the Graphical addons section of the tree
- Select ‘Unslider’ and click the ‘Import Non-Bundled addons’ button
- The next screen will show you which files will be updated as the add-on 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 add-on
- Once you are happy click ‘proceed’ which is found in the bottom right
Adding the slider to your page
If you are using the block creation wizard you can add a comcode block in the normal way and you will need to scroll down until you see the block called animated_Unslider. If you are adding the code manually you can use this example and tailor it to your needs.
[block pages=”slide1,slide2,slide3,slide4,slide5,slide6″ width=”100%” height=”350px” buttons=”1″ delay=”3000″ speed=”500″ keypresses=”0″]main_unslider[/block]
- 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 adminzone. Choose Pages and look for pages titled _unslider_slide1 if you have called your slides something other than slide1, slide 2, etc. you will need to find the pages with the names set accordingly.
You can now edit these pages as you would a normal page on your website.