PLEASE NOTE: This is not the standard slider option. If you are looking for more information on updating your homepage slider, please check out this article.

By choosing the custom homepage Top Featured section you will be responsible for updating content via a code editor. This is a custom section - we have put together a step-by-step guide for updating the images and links, adding and removing slides, and other tips and tricks.

To allow for responsive images, these slides are set up using img srcset. This allows you to choose an image for small, medium, and large screens.

The pre-defined screen sizes we have selected correspond with standard mobile, tablet, and desktop sizes. You are welcome to change, add or remove sizes and we will go into this in more detail below.

When you chose the custom slider option, you will be provided with a template for the code. You can also find this code at the bottom of this article.

The sample code has 3 slides. Each slide begins and ends with a snippet of code that looks like this:

To add a slide, copy the code beginning and ending with the above comments and paste that slide code in the order you'd like your slider to function. We recommend keeping your code up-to-date so as you copy and move slides, update the comments to reflect the number that slide is. Your future self will thank you!

This is what your code would look like for a homepage slider with 3 slides:

To remove a slide, follow the same pattern as adding a slide, just select the code for the slide you want to remove and delete.

When using an img srcset, there must be a space at the beginning and end of the code string:

To define the sizes of your slides, the width of the image needs to be set in the code. You'll add the img url, then a space, then the image width. The image width is written as the pixel + w.
​
An image that is 2500 pixels wide would be declared as: 2500w

You can use whatever image sizes work for your audience. Just remember to update the widths to match the image size.

Once you have the number of slides set up, it's time to add in your images.

To begin, with the standard code, you will need 3 images with the dimensions below:
​Small Images: 768x480px

Medium Images: 992x480px

Large Images: 2500x700px

Upload your images into the admin section of your site under Static Content > Novi Files.
​
Once uploaded, you can right-click on the image and click Info:

When you're ready for the URL, copy the URL.

In an img srcset, you can define a fallback image that will show if a user's browser does not support img srcsets. As of this article, 96.11% of browsers do support this code (Source). We recommend using the large image as your fallback image so that a user will get the best experience regardless of screen size.

The image under src="...XXX..." is your fallback. Following the steps above, paste in the URL for your large image here.

Next, find the image that precedes the " 2500w," and paste the large image url here. *Reminder to keep the space between the first " and the 2500w.

To update the medium image, find the url preceding the " 992w," and paste your medium sized image url there.

To update the small image, find the url preceding the " 768w," and paste your small sized image url there.

Great job, your images are in place!

Having this custom slider allows you to link to any area of your site. Once your images are in place, you can add in the URL of the location you'd like the slide to click through to.

Find the <a href="###"> and replace the ### with your URL.

To have the link open in a new tab, just add target="_blank"

You have your code ready to go, now what?

The slider code works with Javscript embedded in your site.

JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. - Mozilla

The Javascript code snippet could consist of a single line when you add it to your site. Once it renders on the page, it could be 100s of lines of code after it runs.

Because of the way Javascript will render your code after you save the code on the site, certain steps will have to be taken to update your slider.

Novi will get your site set up with the needed Javascript in your Association Settings. If you would like to custom the slider, you can find the Javascript in Association Settings > Analytics/Scripts in the Body Script or Markup section

Custom Code:

The two main items you may want to customize are:

​autoplay: true,
​True will autoplay your slider and changing this to false will stop the automatic scroll and users will have to tab through the slides to view each.

​autoplaySpeed: 5000,
Adjusting this number will adjust the speed of the slides.

The other code is set up to show 1 slide per slide. We highly recommend NOT changing this. The template code will not support changing this and you will be responsible for writing code that would fit with this new layout.

Once you have your code ready to go, head over to your site and click into Tools > Source Code of your slider region.
​

If there is existing code in that section, delete all code, save the region, and refresh your page to begin with a blank canvas to avoid the Javascript issues mentioned above.

In source code, paste your slider code and save. Refresh the page. Viewing the page as an admin will not give you the true view of the slider. To see how it functions, you can either log out or view it in an incognito window.
​
Congratulations! You have a custom slider on your homepage.

Custom Homepage Slider HTML Code:

Adjust the width of the gallery in the first line of code.

Custom Homepage Slider Javascript Code: