# How-to create a slider with ONLY 3 items (Pinegrow Blueprint) **URL:** \ **Category:** Pinegrow Interactions Add-on\ **Tags:** slider, blueprint\ **Created:** [October 28, 2022, 12:49pm UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148 "2022-10-28T12:49:40Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\ **Post date:** [October 28, 2022, 12:49pm UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/1 "2022-10-28T12:49:40Z")
As we discussed recently, this one is a question for you @abirana 🙂 - [Sliders | Pinegrow Web Editor](https://pinegrow.com/docs/interactions/blueprints/sliders/) - [Creating a Slider with Pinegrow Interaction 2 | Pinegrow Web Editor](https://pinegrow.com/tutorials/creating-a-slider-with-interactions-2/) 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. Thank you in advance for your insightful advice! ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [November 1, 2022, 4:14pm UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/2 "2022-11-01T16:14:28Z")
Hey guys, couldn’t reply you early, as I’ve been traveling. @kreeser I did check the message and I think I understood your issue, but achieving 3 slides per page is similar to achieving 4 or 8 slides. So here is an example slide I made [https://pinegrow.online/edit/abi/pgia-slider-with-3-items/](https://pinegrow.online/edit/abi/pgia-slider-with-3-items/) 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. ---
**Author:** ![kreeser](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kreeser](https://forum.pinegrow.com/u/kreeser)\ **Post date:** [November 2, 2022, 1:50am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/3 "2022-11-02T01:50:47Z")
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. ---
**Author:** ![kreeser](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kreeser](https://forum.pinegrow.com/u/kreeser)\ **Post date:** [November 2, 2022, 1:52am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/4 "2022-11-02T01:52:38Z")
Emmanuel, Thanks very much for posting my issue and forwarding to Abirana. ---
**Author:** ![kreeser](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kreeser](https://forum.pinegrow.com/u/kreeser)\ **Post date:** [November 8, 2022, 12:33am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/5 "2022-11-08T00:33:37Z")
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. ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [November 23, 2022, 11:39am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/6 "2022-11-23T11:39:08Z")
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. ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [November 25, 2022, 5:42am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/7 "2022-11-25T05:42:28Z")
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. ---
**Author:** ![kreeser](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@kreeser](https://forum.pinegrow.com/u/kreeser)\ **Post date:** [November 25, 2022, 9:13am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/8 "2022-11-25T09:13:34Z")
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. ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [November 25, 2022, 10:58am UTC](https://forum.pinegrow.com/t/how-to-create-a-slider-with-only-3-items-pinegrow-blueprint/7148/9 "2022-11-25T10:58:02Z")
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.