How to add an image rotator to your home page banner.

We will be using a package called Slick. Slick is fully compatible with Crowdstack, can be responsive, and has oodles of fun features, We will be doing a basic setup just to get it installed and working.

First, download the files that you need.  Go to the Slick website and click Get it now. Click download now and download the zip file to your desktop or downloads folder, whichever you usually use.  Once it is downloaded, unzip the zip file.

From the zip we will upload the following three files to your Crowdstack web space:

• slick.css
• slick-theme.css
• slick.min.js
  

Next we want to upload some images. You’ll want to upload at least 3, and try to make them all the same size.

• picture1.jpg
• picture2.jpg
• picture3.jpg

Now we will start to add in some of the code that we need the Crowdstack admin control panel to make it all work.

In your control panel go to Modules, Home Page, and then click the Banner tab.

Into the banner code box, paste the code below, customizing the image URLs for your own images (you can copy these URLs directly from your Web Space page).

We also need to give the div that they are in a CSS class name.  You can make up your own, and you will use it in 3 different places. You can use as many pictures as you want.

<div class="your-class">

  <div><img src="https://yourownsite.hoop.la/ws/picture1.jpg"></div>

  <div><img src="https://yourownsite.hoop.la/ws/picture2.png"></div>

  <div><img src="https://yourownsite.hoop.la/ws/picture3.jpg"></div>

</div>

Next go to Display Settings, and scroll down to the Custom Code for HEAD Section. We need to reference the two CSS stylesheets that are used. Paste this code, tailoring the URL for your own domain.

<link rel="stylesheet" type="text/css" href="https://yourownsite.hoop.la/ws/slick.css"/>

<link rel="stylesheet" type="text/css" href="https://yourownsite.hoop.la/ws/slick-theme.css"/>

Still in Display Settings, scroll down to Custom CSS.  We will want to add some CSS to color the arrows that are used to scroll through the pictures, and you’ll probably want to center the scrolling box on the page. Make sure to use the class name that you entered into the div above. This is the second of three places that you’re using this name.

/* for the home page banner slick carousel */
/* you could go full width if it looks better with your pictures. Try different

widths and see what you like best */
/* margin: auto will center it for you */ 

.your-class { 

width: 50%; 

margin: auto;

}

/* stylize the next and previous arrow buttons so that they can be seen on your background color */

.slick-next.slick-arrow::before {color: #000000; background-color: #cccccc; border-radius: 3px 3px 3px 3px ;}

.slick-prev.slick-arrow::before {color: #000000; background-color: #cccccc; border-radius: 3px 3px 3px 3px ;}

Now on the same page, scroll all the way down to the box labeled End of Page HTML and paste the code below, which makes it all go.  You need to edit the URL for "slick.min.js" with your own URL, and you need to customize the CSS class ID (this is the third place we're using this).

<script src=“//code.jquery.com/jquery-1.11.0.min.js”></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://yourownsite.hoop.la/ws/slick.min.js"></script>
<script type=“text/javascript”>
jQuery.noConflict();
</script>

<script type="text/javascript">
$('.your-class').slick({
dots: true,
infinite: true,
speed: 300,
variableWidth: true,
arrows: true
});
</script>

Once you submit the form your image scroller should work.

In our example we have put clickable dots under the pictures, allowed for different sized images, and have added arrows to the two sides to click for scrolling.

There are lots and lots of customization options available in Slick. Read the documentation for a complete list of all the options available to you, and for a number of examples too.

Here's an example of how this slider will look...