I’m working on a mobile page for my site. The Slide block looks like a good way to show a section of articles without taking up much horizontal space. Unfortunately the blue arrows shown here do not appear on mobile unless the user taps on the block in the first place. This means it isn’t obvious at a glance that the module can be scrolled. How can I make the arrows stay visible permanently?
Beyond that fix, ideally I would like to make the module look like this, such that the next image is hanging off the side of the page to imply that there is more to scroll to.
Hello,
Unfortunately, the theme doesn’t have a block like that; only Big Grid Flex 2 https://i.imgur.com/N2ejMHU.png but without the next and prev arrow.
Thank you!
That could work if I could hide the large top image and only have the scrolling images below. Is that possible?
Hello,
Yes, you need to use a custom code css to hide the first module.
For example for Big Grid Flex 9, you can display 5 posts, but you need to hide two modules .
You can use this code for big grid flex 9 .td_block_big_grid_flex_9 .td_module_flex_6
{
display: none;
}
Please set this code in the theme panel > custom code> advance css > phone section and will be applied only on a mobile or if you want to apply also on a desktop only in custom code -> custom css.
Thank you!
Hi, when hiding the first image the first post will also be hidden. I tried to play around with “Offset posts: -1” but didn’t work. Any solution for this?
Hi,
Do you want to display the first posts that are in this grid or not?
Thank you!
Yes, the first post should be displayed on the second position since the first position has display: none.
Hi,
Unfortunately, for this, there is no solution. If the first grid is hidden, you can’t display the posts that are displayed there.
Thank you!
Thanks I’m trying this approach. When the viewport is set to mobile portrait I’m getting the behavior I want (the sliding portion), but when it’s set to mobile landscape the slide portion expands into a row of posts instead of a sliding row: https://imgur.com/a/CkIWPJj
How can I force the module to stay in the sliding style no matter the viewport width?
I’d also like the slider to load 10 posts instead of just 4, how can I do that?
Alternatively if there’s a way that I can modify the Slide block to make these blue arrows always visible (they only appear on mouse hover), this would be the easiest fix to my issue.
Is there any way to do this via CSS or editing the Slide block’s code directly?
Hello,
On mobile, you can use Flex Block 2 which has the option to swipe on pagination -> https://i.imgur.com/m61Rb15.png for next and prev, but for what you want necessity more knowledge and some custom implementation.
Thank you!
For anyone needing to find a way to make the arrows show permanently, you can use this CSS:
.[class name] .td-theme-slider i.td-slide-nav{
opacity: 1;
z-index: 1;
}
Insert your own name in [class name] (without the brackets), then add that name to the ‘Extra Class’ field in the block that you want to modify.
You can add another one with a different class name and then add that name to a different block to make different behavior for individual blocks.
