hi everyone!
i’d like to make two modifications to the default horizontal scroll appearance:
-
modify the scroll controls (prev/next arrows). ideally replace them with ← →. if troublesome at least hide light gray circular background and modify existing arrows.
-
make scroll with hard stops—each scroll > next full size centered picture within fixed dimensions (now often partially displayed or cropped)
tried:
-
multiple xml/css combinations, code widget, custom classes etc. at one point managed to get static ← → on screen. however, was not able to fully hide/disable default arrows.
*the control panel only allows change the color and make scroll controls smaller (resulting in off center arrows inside).
-
so far the best result is custom class div with fixed width, centered with flex container and grid container, and custom class image with fixed dimensions, margins, centered with flex container and grid container. ‘scroll correction’ checked.
any help is highly appreciated.
thank you
Not sure if you can change the icon but you can remove the grey colour. If you select your horizontal scroll (the div container). Go to the settings in the right hand panel, under scroll controls you can change the colours there. By default its no colour and grey. If you select button colour and then move one of the colour slider a touch and leave the bottom one (the alpha channel), all the way left, it will transparent it.
thank you for your reply.
unfortunately, it only solves it partially, on a light background.
once a button overlaps a picture it is no longer fully transparent.
Ah right, yes. It’s got a backdrop filter on which is a blur and unfortunately when it goes outside of that, you can see it. I think you’re at a dead end with this. I don’t think you get any further. Unless there is a custom bric out there that someone has made that can do the same job.
Have you tried a carousel? could that do the job for you? there are some videos in the blocs academy on how to customise those. You also have the built in sub-classes, in the class manager for a carousel.
I had a play around and i’ve worked out a solution to the bg of the button when it shows the blur when not overlapping an image. Because you carried out this step in my above post:
‘Go to the settings in the right hand panel, under scroll controls you can change the colours there. By default its no colour and grey. If you select button colour and then move one of the colour slider a touch and leave the bottom one (the alpha channel), all the way left, it will transparent it.’
You will now have a class in the class manager called h-scroll-button.
if you goto the filters tab for that class and add a backdrop filter and select brightness as the filter and set it to 1.0. that should solve that problem.
1 Like
i can’t thank you enough for taking your time on this AdamNotEve!
i could successfully hide the background by setting grayscale to 0 in addition to your suggestion.
i’ll play around with it, to see if it can be tweaked more.
i did consider the carousel. however, the site will consist of multiple similar entries with different content, and i thought the sliders are less obtrusive and load quicker.
i’ll give it another go.
I have also worked out how to do the rest. Ok, editing the same class, the h-scroll-button. If you use the background tab on this class you can upload your own image as the icon. So if you create a png of an arrow with a transparent bg. (thats why to use the png to preserve transparency on the image). I created a 50x50 size image.
Uploaded that to the background tab and set the size field to ‘cover’.
I then went to the border tab and set the radius to ‘0’ for all sides. (The reason for this is that the default icon that blocs uses is just a square with the radius set high enough so it looks like a circle, if you set to ‘0’ that well override it and turn back to a square for your image to fit in)
Now in the same way you made the button transparent in the settings panel, in one of my previous posts, you need to to the same for the icons. i.e click the icon colour, move one of the colour pointers, but keep the bottom A (alpha channel), left so its transparent. This means you’ve hidden the default circle and arrow that blocs provides and are now just using a png of your liking.
Ive also kept the backdrop filter on brightness to 1.0 so that it doesnt show when not overlapped by an image.
so technically you could have any custom shape, not just an arrow with a transparent bg, you could have a triangle, a star. just create that shape and save as the png (in a separate programme, like photoshop)
1 Like
you’re on fire!
this is the biggest progress i’ve made in two days. all thanks to you!
not quite there yet, but with your road map i may be able to achieve the desired effect.
do you have any suggestions on how to make a slider with hard stops?
i tried the carousel and still prefer the horizontal slider.
What do you mean by this? can you show me an example. I’ve re-read the top post as well and im not fully following what you are trying to achieve.
the desired outcome is when each picture in the slider is centered (no other pictures on a screen): pic 1 > [slide] > pic 2 etc.
the default slider doesn’t support this and pictures can stop half way or whenever they happen to be when you release a hand/mouse.
In the settings panel for the div container, just set the option scroll correction. Does this solve it? it does for me. I can scroll half a pic, then it automatically centres and puts the next image in place?
