Carousel

The System-RSTemplate! plugin brings in some pre-defined, fully customizable stylized containers. It gets installed along with the template, and should be published automatically. If you are to experience any issues with this feature, first make sure to check that the plugin didn't get unpublished for whatever reason.

To access the Shortcodes feature, click on the Shortcodes RSTemplate! button found at the bottom side of the text editor that you are using (available for Joomla! Content articles, Custom HMTL modules, etc. ). This functionality is employed through the Button - RSTemplate! Shortcodes plugin which also gets installed along with the template and is published automatically. If the button does not show up in your editor, make sure that the plugin didn't get unpublished.

  • Shortcodes Editor Button

Carousel Variations

  • Simple Carousel
  • Gallery Carousel

Simple Carousel

The Simple Carousel effect offers a customizable number of slides in bootstrap's standard carousel.

  • Title: The box's title
  • Button: The box's button
  • Number of slides
  • Slide Title: The slide's title
  • Slide Text: The slide's text
  • Slide Image: The slide's image
  • RSAlto! Simple Carousel View

In the text area below you can find a code example for the simple carousel.

HTML Code: 

<div id="enter_title9516" class="rstpl-simple-carousel">
  <div class="carousel slide" id="enter_title7653">
    <div class="rstpl-box-title-center m-bot">
      <h4>Enter title</h4>
      <h6 class="rstpl-box-subtitle"><a href="http://templates.rsjoomla.com/rsalto">Read more</a></h6>
    </div>
    <div class="carousel-inner">
      <div class="item active">
        <div class="span12">
          <div class="row-fluid">
            <div class="span6">
              <img alt="" class="rstpl-box-image" src="/joomla3/templates/rsalto/images/sampledata/images/rome.jpg">
            </div>
          <div class="span6 rstpl-box-content">
            <h3 class="rstpl-box-title">Enter title</h3>
            <div class="rstpl-box-inner-content">This is sample content. In order to change this text please type in the text box the content you wish to be displayed.</div>
          </div>
          </div>
        </div>
      </div>
    </div>
    <a rel="nofollow" data-slide="prev" href="#enter_title7653" class="left carousel-control">‹</a><a rel="nofollow" data-slide="next" href="#enter_title7653" class="right carousel-control">›</a>
  </div>
</div>
<p class="rstpl-delimiter"></p>

How to edit the items

Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete or add them is also available as seen in the following screenshot.

  • RSAlto! Simple Carousel

Gallery Carousel

The Gallery Carousel effect offers a customizable number of items, each displaying a number of images.

  • Title: The box's title
  • Button: The box's button
  • Number of slides
  • Images per slide
  • Slide Images: The slide's image
  • RSAlto! Gallery Carousel

HTML sample code can be found below

HTML Code: 

<div id="randomid5306" class="rstpl-gallery-carousel">
  <div class="carousel slide" id="randomid8829">
    <div class="rstpl-box-title-center m-bot">
      <h4>Enter title</h4>
      <h6 class="rstpl-box-subtitle">
        <a data-slide="prev" href="#randomid8829" class="carousel-control">‹</a>
        <a href="http://templates.rsjoomla.com/rsalto">View entire gallery</a>
        <a data-slide="next" href="#randomid8829" class="carousel-control">›</a></h6>
    </div>
    <div class="carousel-inner">
      <div class="item active">
        <div class="span3">
          <div class="rstpl-box-image-border">
            <div class="rstpl-box-image">
              <a href="http://templates.rsjoomla.com/rsalto"><img alt="" class="rstpl-box-image" src="/joomla3/templates/rsalto/images/sampledata/images/london.jpg"></a>
            </div>
          </div>
        </div>
        <div class="span3">
          <div class="rstpl-box-image-border">
            <div class="rstpl-box-image">
              <a href="http://templates.rsjoomla.com/rsalto"><img alt="" class="rstpl-box-image" src="/joomla3/templates/rsalto/images/sampledata/images/new_york.jpg"></a>
            </div>
          </div>
        </div>
        <div class="span3">
          <div class="rstpl-box-image-border">
            <div class="rstpl-box-image">
              <a href="http://templates.rsjoomla.com/rsalto"><img alt="" class="rstpl-box-image" src="/joomla3/templates/rsalto/images/sampledata/images/tree.jpg"></a>
            </div>
          </div>
        </div>
        <div class="span3">
          <div class="rstpl-box-image-border">
            <div class="rstpl-box-image">
              <a href="http://templates.rsjoomla.com/rsalto"><img alt="" class="rstpl-box-image" src="/joomla3/templates/rsalto/images/sampledata/images/bali.jpg"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="rstpl-delimiter"></p>

How to edit the items

Each item can be edited by right-clicking on it and choosing Edit. The possibility to delete or add them is also available as seen in the following screenshot.

  • RSAlto! Gallery Carousel

3 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Tabs

Accordion

Box

Adding Shortcodes within Bootstrap Grid System