How can we help you today?

How to Scroll Multiple Items in an Image Carousel with a Single Click Using Custom JavaScript

If you’re using the Image Carousel Design Element with several items, you might want the ability to scroll through multiple items with a single click. 

By default, there is no setting for this in the Image Carousel Design Element. This article will demonstrate how you can accomplish this using custom JavaScript. 

Default - one item per click
With Custom JavaScript - several items per click
Single item per clickMultiple items per click



Step-by-step Tutorial

Follow the steps below to learn how to scroll multiple items using custom Javascript:

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:


Click the ShortPoint tag:

ShortPoint tag

Select the pencil icon:

pencil icon

Step 2: Add a Class Name

NOTEBefore proceeding, make sure you already have the Image Carousel Design Element on your SharePoint page.

Click the Image Carousel tag:

Image Carousel tag

Select the cogwheel icon to open the Settings window:

Cogwheel icon

Click the next icon:

next icon

Navigate to the Custom CSS tab:

Custom CSS tab

In the Class field, type your preferred class name. For this guide, we will use slideshowScrollMultiple:

class field

NOTEMake sure to take note of your class name. You will need this for Step 6.

Once done, click the green check mark:

green check mark

NOTEIf you have connected the Image Carousel Design Element to a SharePoint List / Library, make sure to set the Items Limit to the number of items on your SharePoint List / Library to ensure all items will appear on your page. 

Items Limit

Step 3: Go to Grid Mode

NOTESome features of the Code Design Element can only be accessed using Grid Mode. So, for this guide, we will switch to Grid Mode.

Click the Switch to Grid Mode icon:

Switch to Grid Mode icon

Step 4: Add the Code Design Element

Click the gray plus icon:

gray plus icon

Look for Code and select it:


Step 5: Copy the custom Javascript code

Copy the Javascript code below:

// This JavaScript code is to modify the scroll behavior of the ShortPoint Image Carousel. 
// It will allow multiple items to be scrolled on a single click.
// This code should be inserted into a ShortPoint Code Design Element in the JavaScript field.
(function() {
  var SLIDESHOW_CLASS = 'classname';  // <- This should be the same CSS Class that is applied on the Design Element.
  var SLIDESHOW_ITEMS_TO_SCROLL = 4;  // <- How many items should scroll per click?
  setTimeout(function() {
    shortpoint.$('.' + SLIDESHOW_CLASS).slick('slickSetOption', 'slidesToScroll', SLIDESHOW_ITEMS_TO_SCROLL);
  }, 5000);          // <- A delay of 5 seconds has been added to allow for connected Design Elements. Can be adjusted as needed.

NOTEYou may update the SLIDESHOW_ITEMS_TO_SCROLL value according to your preference. In addition, you'll notice that a 5-second delay is included to allow connected Image Carousels to load before the code is applied. Otherwise,  this JavaScript may not work. If your Image Carousel Design Element is not connected to a list or library, you can decrease this delay to zero.

Step 6: Paste the copied JavaScript code

Paste the copied code in the JavaScript field:

JavaScript field

Modify the SLIDESHOW_CLASS value. Make sure that this is the same class name you assigned in Step 2:

Slideshow Class value

Modify the SLIDESHOW_ITEMS_TO_SCROLL value according to the number of items you want to be shown per click:

Slideshow Items to Scroll value

(Optional) If you wish to reduce the number of navigation dots, copy the Custom CSS code below:

ul.slick-dots {
    right: 40% !important;

/* you have the option to change n+ value */
ul.slick-dots li:nth-child(n+22 of li) { 
    display: none !important;

NOTEYou have the option to change the n+ value according to the number of items on your list and the number of images you want to be shown per click. 


For example, if we have 86 items on our list and we want 3 images to be shown per click, we can divide 86 by 3, making the n+ value 28. n+ value change

navigation dots

(Optional) And paste it into the Custom CSS field:

Custom CSS field

Disable Sandbox Mode:

disable Sandbox Mode

Then, click Insert:


Step 7: Save

Click the eye icon to see your page in real-time:

eye icon

To apply all changes, click Save:


Congratulations! You have successfully modified the number of items to scroll in a single click. Try it out on your Sharepoint pages now.

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 69 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more