Home Component Carousel description

Component Carousel description

Carousel slideshow with animated elements use Twitter Bootstrap script and free library Animate.CSS

Component structure:

get_component_with_params('ra-carousel', array(array(slug,slug,...)))

Component call - insert in your template next code example:

<?php get_component_with_params('ra-carousel', array(array('slide-1', 'slide-2', 'slide-3'))): ?>

Component logic is as follows - the content of the slide taken from specified page and searched between elements <p> ... </ p>. The content may have formatted texts and images. The first element must be the background. Background consists of either a photo (it is inserted using the graphical editor) or the background color (enter a few characters and apply background color for them). If background is the photo - styles are ignored (ie automatically charged width and height of 100%). All downstream elements are treated as the slide content. Element type of text can be customized with styles (graphic editors style application uses the <span> tag). Components can work with styles that bring together up to level 2 <span> elements. Animation effect settings must be apply to the element <p> and specify two values: effect name (field data-effect) and effect delay (field data-delay). Delay's value must be in milliseconds. To <p> elements must be apply styles to indicate its location on the slide (px;% or Viewport measuring units). Eg.:

< p data-delay="500" data-effect="fadeInDownBig" style="top:20%;left:20%">< span style="font-size:28px;">< span style="color:#FFF;">My text< /span>< /span>< /p>

If item is photo can be applied width and height dimensions styles (taken from graphic editor). Eg.:

< p data-delay="2000" data-effect="zoomInUp" style="top:2vh;left:-5vw">< img alt="" src="photo.png" style="width: 80px; height: 80px;" / > < /p>

If for <p> element(s) fields: data-effect, data-delay,  style values are not specified - they are generated using random numbers.

Animation effects preview and effects name you can see on theme settings administration page.

If plugin DynPages installed in your site you can use shortcodes, like this:

GetSimple Features

  • XML based data storage
  • Best-in-Class User Interface
  • 'Undo' protection & backups
  • Easy to theme
  • Great documentation
  • Growing community

This is your sidebar text. Please change me in Theme -> Edit Components

Download the Latest GetSimple