Add an image slider to your site

In this tutorial, we will add a slider to your CrowdfundHQ website, based on the free and open-source Ideal Image Slider. If you are a developer, feel free to reference the Ideal Image Slider documentation while reading this tutorial.

We will start by including the files required by Ideal Image Slider, then make a few adjustments to optimize it for your CrowdfundHQ website, and finally try out some optional customization.

Including the code for Ideal Image Slider

Ideal Image Slider requires a few snippets of code to be added to your site, including links to a couple of CSS and JavaScript files. To reduce the amount of file management we need to do, we will include the files directly from CDNJS. If you want to host the files yourself, you can download them from the Ideal Image Slider GitHub page.

First, add the following code (containing the images that we want to display) to the top of the text area under Design > Pages, with "Homepage" selected in the dropdown:

<div id="slider">
  <img src="http://lorempixel.com/1200/400/nature/1/">
  <img src="http://lorempixel.com/1200/400/nature/2/">
  <img src="http://lorempixel.com/1200/400/nature/3/">
</div>

We're using Lorem Pixel here just to try out some placeholder images, but you can upload your own images under Files and then use the links to those files instead.

Next, add the following code (required to include the slider functionality) to the bottom of that same page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/ideal-image-slider.js"></script>
<script>
  new IdealImageSlider.Slider({
    selector: '#slider',
    height: 400
  }).start();
</script>

Finally, add the following code (required to properly style the slider) to the bottom of the text area under Design > Libraries:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/ideal-image-slider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/themes/default/default.css">

Now click "View Site" to check out the result. As you can see, the slider works and looks as expected, but it doesn't fill up the entire width of the screen. This is because your CrowdfundHQ website by default places its content inside a container that doesn't take up the full width of the page (in order to ensure reasonable padding and line lengths). We will fix this in the next section.

Optimizing the slider for CrowdfundHQ

In order to break the slider out of its container and allow it to fill the entire page width, we will need to add some JavaScript of our own. Change the code that we added to the page to the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/ideal-image-slider.js"></script>
<script>
  // Move the slider from the "custom-page" element (which has its width constrained by the layout) to the "container" element (which is not constrained).
  var container = document.getElementById('container');
  var slider = document.getElementById('slider');
  container.parentNode.insertBefore(slider, container);

  new IdealImageSlider.Slider({
    selector: '#slider',
    height: 400
  }).start();
</script>

If you click "View Site" again, you will see that the slider now takes up the full width of the page as intended.

Removing the tagline

We might also want to remove the tagline above the slider, to clear up some space and make our slider the main focus of the page. To do so, optionally change the code to the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/ideal-image-slider.js"></script>
<script>
  // Move the slider from the "custom-page" element (which has its width constrained by the layout) to the "container" element (which is not constrained).
  var container = document.getElementById('container');
  var slider = document.getElementById('slider');
  container.parentNode.insertBefore(slider, container);

  // Remove the tagline from the document.
  var tagline = document.getElementById('tagline');
  tagline.parentNode.removeChild(tagline);

  new IdealImageSlider.Slider({
    selector: '#slider',
    height: 400
  }).start();
</script>

Limiting the slider's width

If we want to move the slider out of its container as we did above but still limit its width so it doesn't take up the full width of the page, we can add an "inner-width" class to the code that we added to the homepage under Design > Pages:

<div id="slider" class="inner-width">
  <img src="http://lorempixel.com/1200/400/nature/1/">
  <img src="http://lorempixel.com/1200/400/nature/2/">
  <img src="http://lorempixel.com/1200/400/nature/3/">
</div>

Customizing the slider

Ideal Image Slider provides a number of settings that can be customized depending on your needs. For a complete list of options, take a look the Ideal Image Slider documentation.

Height

While our slider now automatically takes up as much width as we want it to, we still need to decide how high it should be. To do this, we can change the value of the "height" parameter:

new IdealImageSlider.Slider({
  selector: '#slider',
  height: 200 // pixels
}).start();

Interval

By default, the slider automatically shows the next picture after four seconds. If we want the slider to be faster or slower, we can add an "interval" parameter:

new IdealImageSlider.Slider({
  selector: '#slider',
  height: 400,
  interval: 1000 // milliseconds
}).start();

Bullet navigation

By default, Ideal Image Slider only offers arrow buttons for navigation. If we also want a list of icons at the bottom for quickly navigating to any image ("bullet navigation"), we can add that with an official extension. This requires us to add more than just a parameter, so we will do it in two steps.

First, include the extension by changing the first part of the code to the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/ideal-image-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ideal-image-slider/1.5.1/extensions/bullet-nav/iis-bullet-nav.js"></script>

Then activate the extension by changing the last part of the code to the following:

var slider = new IdealImageSlider.Slider({
  selector: '#slider',
  height: 400
});
slider.addBulletNav();
slider.start();

Image sizes and HiDPI ("Retina") images

When selecting images for the slider, keep in mind that they will fill the entire width of the page. If the images need to look good even on desktop computers, that means you might need to provide images as wide as 1920 pixels. If you also want to support devices with very high resolutions (HiDPI or "Retina"), Ideal Image Slider offers a way of doing that without sending unnecessarily large images to devices with lower resolutions. To do this, we will add the "data-src-2x" attribute to the code that we added to the homepage under Design > Pages:

<div id="slider">
  <img src="http://lorempixel.com/1200/400/nature/1/" data-src-2x="http://lorempixel.com/1920/1080/nature/1/">
  <img src="http://lorempixel.com/1200/400/nature/2/" data-src-2x="http://lorempixel.com/1920/1080/nature/2/">
  <img src="http://lorempixel.com/1200/400/nature/3/" data-src-2x="http://lorempixel.com/1920/1080/nature/3/">
</div>

With this code in place, the images provided in the "data-src-2x" attributes will be loaded on HiDPI devices, while the regular images will be loaded on everything else.

Adding custom HTML

You can also add custom HTML on top of your slider. Insert the following to your homepage to add a button:

<div id="slider-content">
  <a href="/" class="btn">Click here</a>
</div>

Then add some CSS to Design > Styles to make it show centered on top of the slider:

#slider-content {
  position: relative;
  text-align: center;
  z-index: 1000;
  bottom: 200px;
}

You can customize these styles to fit your needs. Have a look at the Ideal Image Slider documentation for more tips on how to customize your slider.