Slider to show posts / CPT / Products

Feature Requests
1

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.

3 Likes
2

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

2 Likes
3

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.

4 Likes
4

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.

3 Likes
5

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

6

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

3 Likes
7

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

1 Like
8

Thanks!

Going to give this a go right now.

9

How’s that video coming…?

10

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

11

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

12

Do you have your navigation inside a query element?

13

No.

Link here: https://cwicly.cabarita.website/swiper-test/

14

It’s outside. With the class added.

15

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)

1 Like
16

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?

17

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

1 Like
18

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.

1 Like
19

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

20

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.