Query loop in mobile with manual swipe

GenerateBlocks
#1

Hi there,
I have a query loop in a 3 columns x 1 row grid (desktop view).

I need to:

  1. in mobile:
  • show only one element (1x1 grid)
  • the user can move to the next/previous element swiping right/next (this is particularly important for the UX)
  1. in desktop:
  • move to the next/ previous elements clicking on a couple of arrows placed on the right and left side of the grid.

How can I do this?

Thank you. All the best. Carlo

#2

Hi @carlo,

You’ll need a carousel/slider plugin.

Here is an article that may help: 5 Best WordPress Slider Plugins - Performance + Quality (Compared)

#3

Hi @fernandoazarcon2
I am sorry to hear that.
I am an owner of wpshowposts’s license for some years now, that as you know is not developed anymore due to the switch to generateblock query loops, switch that unfortunately is not complete. I have been waiting for the carousel in generateblocks for some time but I tought that in GB at least a simple manual swipe with no automation would be feasable.
But I was wrong :frowning:

#4

Are you referring to a manual scroll? If so, that’s possible with a GB Query Loop but with a little CSS.

If you can share the link to your Query Loop, I can help you with the CSS a bit.

#5

Hi, I am referring to manual horizontal scroll to one element of the query loop grid to the next one. (when just one element at a time is visible)
Is the manual one possible (no automatic)?

#6

Yes, it should be possible.

Can you provide the link to your Query Loop?

#7

Hi Fernando, sure,
please see the url here.

Summary

This text will be hidden

I’d like that in mobile view, there is only 1 card visible and that the user can horizontally swipe from one card to the next one.

Thank you. Carlo

#8

Try adding this CSS:

@media (max-width: 768px) {
    .gb-grid-wrapper.gb-grid-wrapper-56c5ddc7.gb-query-loop-wrapper {
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

    .gb-grid-wrapper.gb-grid-wrapper-56c5ddc7.gb-query-loop-wrapper .gb-query-loop-item > .gb-container {
        width: calc( 100vw - 30px );
    }
}
#9

It works, thank you. :slightly_smiling_face:

I’ve just added a custom class “.horscroll” in the container the query loop is contained in, so now the css affects only that specific query loop and not the production instance.
I have also updated the css in my quote, should someone find it useful.

A couple of things:

  1. Is it possible to have a partial view of the next card visible so that the user understands that there are more cards to see? (in other words: in the viewport must be visible 1 card + a piece of the next one)
  2. Is it possible to do something similar for desktop view?
    For example: an horizontal row of 4 cards in the viewport + a small button on the right (and on the left) of the group of the 4 cards to click on to move to right to the next cards (or left to the previous)

Thanks