I recently received a request from @kreeser who wants to use our blueprint to create a slider with ONLY 3 items, could you please give him/us some tips?
Here is the original request: “Can you provide me with the correct CSS to make the Interactions slider display only 3 slides? Currently, only 1, 4 or 8 slides per page are available. I’ve been working on this project for the past two nights and I couldn’t get it to only display 3 slides because it wants to show ghost slides (placeholders).”
Note: An ultra basic example project with only a slider containing only 3 elements would be welcome.
So technically we need to maintain the width of the .pgia-slide to show 3 items per page and then we need to clone the first 3 slides.
I guess you must have achieved upto here, so now to hide ghost slides on smaller screen, you just have to write some more CSS to hide in on the specific viewports.
If you check the project on the link above, there you should find pgia-slider.css this is a helper CSS for the sliders. If you check there are CSS for 3 slides per page. You can copy/paste the CSS or use the file and your issue should be solved.
Let me know if this is what you are looking for or if there is anything unclear.
Hi Abirana,
Thanks so much for the example—extremely helpful!!! And, yes, I got most of the way there with 3 slides, but didn’t include the CSS for hiding the ghost slides.
After adopting your 3-slide-per-page solution, I’m experiencing an issue with the slider pagination dots. Each time I click on a pagination dot (or the control arrow buttons), the dots move backwards by 1 dot after my slider moves (forwards or backwards). It’s as if the slider is behind by a page of 3 slides. I’ve even resorted to the default CSS pagination settings and I’m still experiencing this issue.
Hi @kreeser I couldn’t notice this reply but the issue you mention is unusual and I’m also not that clear about extra what is happening.
Can you try and recreate the slider and see if the issue persist again? If not I may have to check your project and then only I can be sure about what’s happening.
Hi @kreeser I and the team looked into this, it’s not technically a bug but something that needs a little work. So in upcoming PG update it will get resolved.
By the way, I did check your project and everything you did looks good. So for now I can only request you to wait for the next update which is coming very soon.
Hi Abi. Thanks very much for reviewing my project. I’m not sure if you caught this with the slider pagination dots, but there’s additional dysfunctional behavior. Now, I’m seeing 1 or more missing dots from each of the sliders. From what I’ve experienced having created 2 projects with the Interactions 2.0 sliders, I’m afraid they’re just not ready for prime time. And, I’m not sure with whom lies the responsibility of properly testing and fixing this component—Pinegrow or Greensock.
Yes there seems to be some issues with the pagination dots and I’ve already mentioned it to @matjaz
I may not be the right person to know exactly what is causing the issue, but Matjaz knows it best.
And about testing and fixing the issues, as you may know Pinegrow has a very small team and at the same time Pinegrow is really a comprehensive product. This team does it best to provide what possibly can be done, even though sometime something can be missed. That is why community members like you are always valuable for reporting issues as they encounter, and that is also what helps make a product better.
