I am trying to make my sliders automatically slide but when I do, the formatting breaks.
See screenshots for more. (The inline two-column view is correct, then, when it slides to the next page the posts drop to one column).
Hello and thank you for contacting the Toolset support.
I visited the homepage and I could not reproduce the same issue on the "Top picks" slider. Can you elaborate a bit on the problem? Where can I see it? How to trigger it? If you can record a short video with Loom or screencastify, that would be awesome.
Looking forward to your reply.
Thank you for the video, it explains the issue clearly. Now I'll need to take a closer look at how you have built your view. To check what custom styles are involved and why are they missing when using AJAX.
If it is not possible to login to your website, please provide a Duplicator copy and let me check locally.
Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
I could not login with the provided details, I tried resetting credentials and try the same password again to no avail.
Please double-check the password and update your last message or provide it in your next message.
Thank you Oscar.
I fixed the issue by adding an overflow and a left float to the slides. Check the view custom CSS, I added the following code:
#featured-events .single-event {
overflow: hidden;
float: left;
}
I hope this helps. Let us know your feedback.
Hi Jamal,
Thank you so much for this. I can see the slider now works as it should. The nav arrows have now disappeared, however, is there a way to display these again?
Many thanks,
Oscar
I noticed that the nav arrows are missing, but when I checked the view, the view code does not have pagination shortcodes. If no shortcodes are added, it is expected to not have nav arrows.
You can add pagination by adding shortcodes to the view, check all the pagination controls shortcode here :
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#pagination-controls-2
Hi Jamal,
I have tried a few variations of the pagination and I cannot get it to how I want it to look.
Is there any way you could provide the shortcode and I can then style with css?
Many thanks
I believe you should use the following shortcodes:
- wpv-pager-prev-page
- wpv-pager-next-page
Check this article for more details https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-153239
[wpv-pager-prev-page class="slick-prev slick-arrow"]Previous[/wpv-pager-prev-page]
[wpv-pager-next-page class="slick-next slick-arrow"]Next[/wpv-pager-next-page]
I updated your view, and I had to switch temporarily to a non-AJAXified slider to verify which CSS classes are used.
Let me know if I updated something wrongly.
