Good evening,
I have a list of 6 product cards and I don’t know how to create a pagination? in order to scroll through the cards in batches of 6.
Thank you for your help.
It’s not really clear what you want to do. You want to see 6 at a time (no matter how big or small the screen is)? In what configuaration? Scroll in which direction?
in fact I would like to be able to scroll with a button to the right and a button to the left the images part 6 images at a time.
In a single row?
in row of 3
That sounds like you are looking for a carousel?
If so that’s not a simple job to do yourself so you may be better looking at some pre made slider/carousels such as this one.
They still take a bit of work but the js is already taken care of.
1 Like
Good morning,
I’m looking for some simple things to set up so that I don’t have all the images on one page.
What do you recommend ?
If you only want to show a few images at a time then a carousel approach is fine like the slick slider which will also lazy load images if required.
Have a look at the demos on this page and you should find one that’s close to what you want.
Writing one from scratch is quite a complex task 
1 Like
I looked at your link as well as online tutorials and for me it will be complicated because I don’t see how to do it with my existing code.
when I follow the online tutorial I manage to understand and carry out the scrolling of the images.
For me the problem is how to integrate it into my code
https://codepen.io/aaashpnt-the-sans/pen/VwJaxjL
I found this my to put it in place I don’t know how to follow the steps
https://www.geeksforgeeks.org/create-a-pagination-using-html-css-and-javascript/
I’ll try and have a look in the morning and see if I can work something out.
1 Like
Good evening,
Many thanks to you for your help.
Using that method and assuming you want two rows you would put two of your blocks inside each card element.
This is a quick and dirty implementation trying to keep as much of your code as possible so that you can recognise it.
However it may be easier for the user if you had one row to scroll and say four across like the original demo.
1 Like
Good morning,
Many thanks for your help, I’ll look at everything this evening as soon as I get home
1 Like
Good evening,
I’m trying to integrate and do like your example and I have some problems my imgs are aligned vertically and when I click on 2,3 or next I no longer have an image.
Here is my source
https://codepen.io/aaashpnt-the-sans/pen/mdZWKrb
the .js file I must indicate it in the head or before the tag ?
The 'card 'component is the element that the js is switching and you stuck all your deco blocks inside one card element. Therefore there is nothing else to see as you only have the one card component.
If you look at my example you will see that there are 2 deco blocks inside every card component.
<div class="card">
<div class="deco">...</div>
<div class="deco">...</div>
</div>
<div class="card">
<div class="deco">...</div>
<div class="deco">...</div>
</div>
<div class="card">
<div class="deco">...</div>
<div class="deco">...</div>
</div>
<div class="card">
<div class="deco">...</div>
<div class="deco">...</div>
</div>
If you only wanted one row then you would put one deco block inside each card component.
<div class="card">
<div class="deco">...</div>
</div>
<div class="card">
<div class="deco">...</div>
</div>
<div class="card">
<div class="deco">...</div>
</div>
<div class="card">
<div class="deco">...</div>
</div>
In your real page the js should go at the end of the html just before the closing body tag. In the codepen the js is put into the right js panel so no script tag needed.
1 Like
Indeed thank you everything works great now.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.