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

If you are using an Image Carousels Design Element with several items, you might want the ability to scroll through multiple items on a single click. By default, there is no setting for this in the Image Carousels Design Element, but you can accomplish this effect with some custom JavaScript and the Code Design Element. This article will show you how.

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

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.

TABLE OF CONTENTS

• Before we begin
• Step 1. Open the settings of the Image Carousels Design Element
• Step 2: Add the CSS Class name to the Image Carousels Design Element
• Step 3. Copy the custom JavaScript code
• Step 4. Add the Code Design Element to apply the JavaScript
• Step 5. Paste the copied code
• Result

Before we begin

The Code Design Element requires that you have ShortPoint SPFx version 6.9.35.x or higher. We recommend you always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

Step 1. Open the settings of the Image Carousels Design Element

Edit the page. Open the settings of the Image Carousels Design Element:

• In the ShortPoint Page Builder Live Mode:

Locate the Image Carousels Design Element you would like to modify and enter the EasyPass Active Mode. Then click the cog wheel icon to open the settings:

The Design tab will open.

• In the ShortPoint Page Builder Grid Mode:

Click the cog wheel icon to open the settings of the Image Carousels Design Element:

• New ShortPoint Page Builder Grid Mode:

• Legacy Page Builder:

The Settings tab will open.

Step 2: Add the CSS Class name to the Image Carousels Design Element

Go to the Custom CSS tab (1) of the Image Carousels Design Element, then add the name slideshowScrollMultiple to the Class field (2):

• In the ShortPoint page Builder Live Mode:

Click the checkmark button (3).

• In the ShortPoint Page Builder Grid Mode :

Click Update (3).

Step 3. Copy the custom JavaScript code

Here is the custom JavaScript code you will need to use for defining the amount of items to scroll through on each click in the Image Carousels Design Element:

// 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 = 'slideshowScrollMultiple';  // <- 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.
  
})();

Note: You may update the SLIDESHOW_ITEMS_TO_SCROLL value according to your preference. In addition, you'll notice a delay of 5 seconds is included to allow for connected Image Carousels to load before the code is applied (otherwise, this JavaScript may not work). If your Image Carousels Design Element is not connected to a list or library, you can decrease this delay to zero as needed.

Step 4. Add the Code Design Element to apply the JavaScript

Insert a Code Design Element after the Image Carousels Design Element:

• In the Shortpoint Page Builder Live Mode:

Locate the Image Carousels Design Element and enter the EasyPass Active Mode. Then click the plus sign icon to add a Design Element:

Select the Code Design Element:

• In the ShortPoint Page Builder Grid Mode :

Click the plus sign icon to add a Design Element:

• New ShortPoint Page Builder Grid Mode :

• Legacy Page Builder:

Step 5. Paste the copied code

Paste the code from the Step 3 to the JavaScript field (1):

Hint: You can add text to the Edit mode label field (2) so you can distinguish what the Code Design Element is for when in edit mode.

• In the ShortPoint Page Builder Live Mode:

Click the checkmark button (3) to confirm your changes.

• In the ShortPoint Page Builder Grid Mode :

Click Update (3) to confirm your changes.

Result

That's it. You can now save and/or republish the page. This is how it may look like on your page:

Related articles:

• Introducing ShortPoint Code Design Element
• How to Add JavaScript Code to a Page Using the Script Editor Web Part (SharePoint 2013/2016)
• How to Execute JavaScript Inside the Code Design Element that Depends on Loading External JavaScript Assets