SharePoint list (not site) image carousel

[Jake_Hembree]

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-formatting.schema.json",
  "elmType": "img",
  "style": {
    "position": "relative",
    "width": "200 px"
  },
  "attributes": {
    "src": "@currentField"
  }
}

What I'd like to do is add links to other images in other columns have have the carousel rotate through the value of the other columns. I found something like this, but can't quite figure out if there's a way to add this type of formatting into the column:

{
    "timeline": {
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy1.jpg"
                        },
                        "start": 0,
                        "length": 2,
                        "effect": "slideLeft",
                        "transition": {
                            "out": "carouselLeft"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy2.jpg"
                        },
                        "start": 1.4,
                        "length": 2.6,
                        "effect": "slideLeft",
                        "transition": {
                            "in": "carouselLeft",
                            "out": "carouselLeft"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy3.jpg"
                        },
                        "start": 3.4,
                        "length": 2.6,
                        "effect": "slideLeft",
                        "transition": {
                            "in": "carouselLeft",
                            "out": "carouselLeft"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy4.jpg"
                        },
                        "start": 5.4,
                        "length": 2.6,
                        "effect": "slideLeft",
                        "transition": {
                            "in": "carouselLeft",
                            "out": "carouselLeft"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy5.jpg"
                        },
                        "start": 7.4,
                        "length": 2.6,
                        "effect": "slideLeft",
                        "transition": {
                            "in": "carouselLeft",
                            "out": "carouselLeft"
                        }
                    },
                    {
                        "asset": {
                            "type": "image",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy6.jpg"
                        },
                        "start": 9.4,
                        "length": 2.6,
                        "effect": "slideLeft",
                        "transition": {
                            "in": "carouselLeft"
                        }
                    }
                ]
            }
        ],
        "soundtrack": {
            "src": "https://feeds.soundcloud.com/stream/802202977-unminus-deadfros5h.mp3"
        }
    },
    "output": {
        "format": "mp4",
        "resolution": "sd"
    }
}

If there is not a way to use this format, is there a way that I could create a clickable action that rotates through those other columns instead of a fancy carousel?

I'm a total noob when it comes to programming but if you give me an example, I can work with that just fine. Thanks. 
 

[#2]

@Jake_Hembree The formatting you found cannot be used in SharePoint JSON formatting.

Check this documentation for supported actions/styles in SharePoint JSON formatting: JSON Formatting syntax reference 

Check this list formatting sample by @aaclage which might help you: Image Slider 

---

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

[#3]

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:

1. Add a new column to your list to store the image URLs. For example, you can name this column "Image URL."

2. Upload the images you want to display in the carousel to a document library or image library in SharePoint.

3. Edit the list view page in SharePoint and add a content editor web part.

4. 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.

5. 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.

@Jake_Hembree 

[#4]

@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

[#5]

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.

[#6]

@ganeshsanap Thank you! That gets me a heck of a lot closer to what I'm trying to do. But I think I can modify it by simply figuring out how to do one thing.

I'd like to use a customRowAction (or a button click) to change the value on a column but also rotate through 1, 2, and 3. So if I clicked the column another column would change from 1 to 2,

then if I clicked that exact same column again, it would change from 2 to 3,

and once you clicked it one last time, it would change the 3 back to the 1 where it started.

It doesn't even have to be through view formatting, column formatting is okay too. 
Do you know how I could go about doing that?

[#7 · Accepted solution]

@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