Try ShortPoint nowIf 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 |
 |  |
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must already have the Image Carousel Design Element on your SharePoint page.
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:
Select the 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:
Select the cogwheel icon to open the Settings window:
Click the next icon:
Navigate to the Custom CSS tab:
In the Class field, type your preferred class name. For this guide, we will use slideshowScrollMultiple:
NOTEMake sure to take note of your class name. You will need this for Step 6.
Once done, click the 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.
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:
Step 4: Add the Code Design Element
Click the 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:
Modify the SLIDESHOW_CLASS value. Make sure that this is the same class name you assigned in Step 2:
Modify the SLIDESHOW_ITEMS_TO_SCROLL value according to the number of items you want to be shown per click:
(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.
(Optional) And paste it into the Custom CSS field:
Disable Sandbox Mode:
Then, click Insert:
Step 7: Save
Click the eye icon to see your page in real-time:
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:
