Query loop in mobile with manual swipe

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

Hi @carlo,

You’ll need a carousel/slider plugin.

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

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:

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.

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)?

Yes, it should be possible.

Can you provide the link to your Query Loop?

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

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 );
    }
}

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