Karousel Block

Instruction for Karousel block

The Karousel block is used to add add a rotating banner (carousel banner) to an LMS page. This block requires a basic knowledge of Twig templating engine syntax and Flexslider for the initial configuration. Please lodge a support ticket if you are not familiar with either of them.

Turn on Karousel block

• Select Manage blocks from Site administration > Plugins > Blocks.
• Here you will see the list of available blocks.
• Find Karousel
• The eye icon on the 4^th row allows you to alter if this plugin is hidden or visible.
  • Hidden, greyed out with a cross through it
  • Visible, eye icon without a cross through it

Adding a Karousel block to a page

• Select Turn editing on
• Select Karousel from the list of blocks form the Add a block select box
• Configure the Karousel block by clicking on the cog icon on the newly added block
• Here click the Manage Karousel link
• On that page you should see the following tabs
  • Settings
  • Image Properties
  • Images
  • Templates
  • Import / Export
  • Return to Block
• To set up a basic rotating image banner, click on the Templates tab
• Copy the below code and paste on a notepad, then from the notepad copy the text again and paste it in the input field Twit Code* and save changes.

<div class="flexslider kineo-carousel">
 <ul class="slides">
 {% for image in images %}
 <li>
<img src="{{ image.image }}" />
 </li>
 {% endfor %}
 </ul>
</div>

• Click the images tab
• Click add image and upload the new banner image in the form.

The rotating banner should now be working.