Forum Discussion
Solved
SharePoint list (not site) image carousel
I'm looking for a way to create an image carousel in a list. Currently I have a list that displays an image using: {
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatti...
Jake_Hembree You can use setValue in customRowAction to update column value based on another column values like:
"customRowAction":{ "action": "setValue", "actionInput": { "FieldInternalName_1": [$FieldInternalName_2] + 1, "UpdateState": "=Number(@now)" } }Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs
SharePoint lists do not have built-in support for creating image carousels, but there are several ways you can achieve this. One option is to use a third-party JavaScript library such as Slick or Owl Carousel. Here are the high-level steps to create an image carousel in a SharePoint list:
Add a new column to your list to store the image URLs. For example, you can name this column "Image URL."
Upload the images you want to display in the carousel to a document library or image library in SharePoint.
Edit the list view page in SharePoint and add a content editor web part.
In the content editor web part, add the JavaScript and CSS files for the carousel library. You can either reference these files from a CDN or upload them to a document library in SharePoint.
Write the JavaScript code to initialize the carousel using the image URLs from your list. You can use jQuery or vanilla JavaScript to accomplish this.
Here's a sample code snippet to get you started with Slick:
Note that you'll need to replace {Image URL Column} with the name of your image URL column in the list. You can also customize the options for the carousel by modifying the JavaScript code.
I hope this helps! Let me know if you have any questions or need further assistance.
Varun8492 SharePoint online modern experience list view pages does not support adding custom CSS/JSS or using content editor web parts.
Jake_Hembree If you want highly customized solution in SharePoint online modern experience, you can use SharePoint framework (SPFx) to create image carousel web part.
Here's a SPFx sample which will help you to get started with: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-carousel
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs
- Oh yes Ganesh! That is correct then I would go for Sharepoint framework. In SharePoint Online modern experience, Microsoft has restricted the ability to add custom CSS/JS or use Content Editor Web Parts (CEWP) on modern list views.
Instead, Microsoft has introduced SharePoint Framework (SPFx), which allows developers to create custom web parts and extensions using modern development tools and technologies like React, TypeScript, and JavaScript. These custom web parts can be added to modern SharePoint pages, including list view pages.
Additionally, Microsoft has provided a theming engine in SharePoint that allows you to customize the look and feel of your SharePoint site, including list views, using pre-defined themes, colors, and fonts. You can access the theming engine through the SharePoint admin center or by using PowerShell scripts.
If you need to customize the look and feel of your list views beyond what is available through the theming engine, you may want to consider creating a custom solution using SharePoint Framework or reaching out to a SharePoint developer for assistance.
