How can we help you today?

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
Default BehaviorWith JavaScript


NoteShortPoint 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


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:


Visual Builder 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:


Wireframe Settings


  • Legacy Page Builder:


Legacy Wireframe Settings


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:


Custom CSS Visual Builder


Click the checkmark button (3).


  • In the ShortPoint Page Builder Grid Mode :


Custom CSS Wireframe Builder


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.


Please copy the code to the clipboard.


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:


Add Code Design Element Visual Builder


Select the Code Design Element:


Select 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 :


Add Code Design Element New Wireframe

  • Legacy Page Builder:


Add Code Design Element Legacy Wireframe


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:


Add JavaScript Code Visual Builder


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


  • In the ShortPoint Page Builder Grid Mode :


Add JavaScript Code Wireframe Builder


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:


Result


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 65 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