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.

Looking for quality Hosting for your ocPortal website? Look no further than Arvixe Web Hosting!

If you want, you can Follow me on Google plus or Follow me on Twitter