Slider to show posts / CPT / Products

From old feedback: Slider to show posts / CPT / Products | Cwicly

A slider to show posts / CPT / Products based on query selection will be a good feature to have.

Most of the page builders have this feature.

2 Likes

Add users, taxonomies, etc. everything that could be used with Query block.

1 Like

I am very surprised this does not have more votes (I see that it is planned), as it is very much needed.

The way @weedor explains it is exactly how I would expect it to work. That it works similar to the Query block, with all the advanced query functionality, and each returned query is wrapped in a slide.

It is of the very few missing features that I consider critical. As it is, a plain grid could suffice in a pinch, but a slider would be much better.

2 Likes

Got so hyped about it when I saw this in the WooCommerce teaser on Facebook.
That was actually my highlight, when I saw the dynamic slider option there :rofl:
Later it was mentioned, this will be available for product sliders only and will find its way to ACF, posts, etc. later.
I really think this is an essential feature which should be implemented as soon as possible.
Curious if there are any news regarding this.

2 Likes

Hi team any update on this feature will be highly appreciated.

For those who need this now (before an official integration), it can be achieved pretty easily. Just follow these steps to start and modify after, according to you needs:

  • add the slider block somewhere on the page to initialize Swiper dependencies (you can set it to display none)
  • add class .swiper on the Query div;
  • add class .swiper-wrapper on the Template div;
  • change the display to Flex

In a html block add the script to initalize the swiper, and inside add this:

const swiper = new Swiper(’.swiper’, {
slideClass: “cc-query”,
});

And of course, customize it to your needs based on the api (add controllers, slides per page, autoplay etc):

2 Likes

That is what I did too! I plan to record a tutorial for this, I love swiper.

Thanks!

Going to give this a go right now.

How’s that video coming…?

Was able to get part of it working. My posts load up fine, and they are lined up as they would be in a slider. Was able to add prev/next arrows for navigation.

But… it doesn’t work. Doesn’t respond to navigation icons nor to swipe actions. Anything I might be doing wrong? Code below:

const swiper = new Swiper(’.swiper’, {
slideClass: “cc-query”,
modules: [Navigation, Pagination, Scrollbar],
speed: 500,
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
freeMode: {
enabled: true,
sticky: true,
},
});

Any console errors?
If you send me a link I can look over it.

Do you have your navigation inside a query element?

No.

Link here: Swiper Test – Cwicly Test

It’s outside. With the class added.

Check the script tags (currently it’s appearing on the page)

Also retype the commas (’’ and “”) inside the script.

Try copy-pasting it from here:

<script>
const swiper = new Swiper('.swiper', {
slideClass: "cc-query",
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  freeMode: {
    enabled: true,
    sticky: true,
  },
});
</script>

Also remember to also add the slider module on the page. (as this loads the scripts & css for Swiper)

Okay. Made some improvements. Had copied to a new page and forgot the slider. But readded.

Do I need to do anything to it, or just having it there is sufficient?

Try to remove this part from the script:
modules: [Navigation, Pagination, Scrollbar],

It works… sorta.
What I get now, is one slide visible. When I swipe the next one comes into view.

But unsure how to have multiple slides visible at the same time.

Try to add a max-width on the template div. (the one that contains the wrapper)
like:
max-width: 1240px;

Adding the max width to the Template didn’t do it. I had to add to the Query block, but what I realized was that the Query block sets parameters for the individual slides (.cc-query). Kinda weird.

What I have done is set this to the width I need, and match this with the div that contains the slide contents. I then have to set overflow to visible on the Query container to show the slides that are not in view.

This sorta works, but I don’t feel like I have a granular level of control to get predictable results.