slscart logo

How to add a slideshow on an slscart page

3rd party simple jquery slideshow

This slideshow uses jquery and slideshow-jr.js both which are included in slscart.

10.8.0 and above

1. slideshow requires jquery.js which is already included in %STYLE_SHEET%. Make sure %STYLE_SHEET% is in you template.

2. slideshow requires %STYLE_LOWER% in your template. This should go just above </body>.

3. On the page put %%SSINS%% where you want the slideshow. Put it on a line by itself.

4. Under Administration > Slideshow Settings

   * Upload the pictures for the slideshow. For best results, they should be the same width and height.

   * Enter in the alt text for each image

   * Enter in any css style code. For example, entering in:

   * Set 'enable' checkbox to enable the slideshow

   * Set 'center' checkbox to horizontally center the slideshow.

   * Save settings by clicking 'Save' at the bottom of the page.

10.7.1 and below

Add it to the template

If you want to put the slideshow on a specific page, create a special template just for that page.

1. slideshow requires jquery.js which is already included in %STYLE_SHEET%

2. Make sure slideshow-jr.js is in the /go directory

3. In the template, just before </body> add this:

<script src="%SITE_URL%/go/slideshow-jr.js" async></script>

4. Include this css in the <head>. Each image should be the size set in height: and width.

/*** set the width and height to match your images **/

#slideshow {
    height:550px;   /* image height */
    width: 367px;   /* image width */
    margin: 0 auto; /* this centers the slideshow */
#slideshow img {
#slideshow {
#slideshow img.last-active {

5. Add this in the body of the template, where you want the slideshow to be. Set the src= to the path to each slideshow image.

This can also be embedded on a page itself.

<div id="slideshow">
<img src="your_image" width="550" height="367" alt="slide 1" class="active">
<img src="your_image" width="550" height="367" alt="slide 2">
<img src="your_image" width="550" height="367" alt="slide 3">