CSS how to show Items in container are scrollable (mobile)

[kiwis]

I have a menu which is nested into a container;

        .slider{
            width: 100%;
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: 1fr;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scroll-behavior: smooth;
            padding: 6px;
            box-sizing: border-box;
        }

Then div's are items inside this

        .slider div{
            width:100px;
            scroll-snap-align: center;
            display: flex;
            justify-self: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
        }

Inside this div's is a fontawesome icon and a p text tag with a label.

How can I best demonstrate the slider is scrollable for iphone users, I thought offsetting the last visable div might do it, so it's half on screen half off but I'm not sure how to do this.

Any ideas on this or any other solution?

 

[OldMan]

Please give use the HTML