Home›Types Community Support›[Assigned] Creating a dynamically loading slider. Endless scroll left AND right.
[Assigned] Creating a dynamically loading slider. Endless scroll left AND right.
This support ticket is created 6 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.
No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.
Hello, I've begun working on a site theme I've been creating based on previous feedback from the Toolset support.
I'm trying to make a "somewhat" simple pagination widget.
THE IDEA:
-When you go to a "Project" on the website. It will take you to the project Library.
-This would bring you to a page similar to the mockup image I've included.
-Below the "Post Content" would be a horizontal slider that displays a list of thumbnails that pertain to child posts to the current post.
-There would be enough to span beyond the boundaries of the screen.
-When you scroll to the limit of either left or right, it would dynamically load the next 'n' thumbnails. If there are no more then it would scroll enough to indicate there are no more.
-Lastly, when you select the thumbnail, it would replace the post content displayed on the page with the content from the thumbnail linked post.
Firstly, please note that you are posting in the Community Forum for users of the free Types plugin. As a Toolset customer you can and should post in the Technical Support forum which we prioritise and where you should receive speedier service.
As I'm sure you realise Views doesn't include a slider such as the one you are describing.
You will need to make it yourself.
Views essentially has two parts, the first concerns itself with querying the database to retrieve required posts, the second with outputting markup to display those posts.
Other than having the option to output markup that corresponds to the Bootstrap UI library, it is not opinionated about the markup that is generated, it can be in whatever format you require, and you can add CSS and JS to achieve the look and functionality you need.
It includes some built-in options to add sliders between posts etc., but if these do not suit it basically provides the canvas for you to create your own.
So, I would suggest you use something like CodePen to creating a working example with static content. That may involve using 3rd-party JavaScript libraries for lazy loading images that come into the viewport. You may well find existing examples of the same if you search on CodePen.
If you have that then we can help you set up a View which does the same with dynamic content coming from your child posts.
Oh, my apologies. I thought both links directed to the same page.
Is Views able to detect maxing out on a horizontal scroll? I know it has an infinite scroll function.
It seems fairly simple to me if that exists:
-Create bar, 100% width of screen.
-Create 3 elements in bar: Pad (size of 2 panels + margins), Panels Container, Pad.
-Initial load, populate Panels Container with more panels than visible on screen (lets say 5). (Would this need to be php?)
-Using some JS conditions, set the focus on one of the panels and center it in the scroll.
-To start, simply focus at the first element. No need to center as with the pad it will already be centered.
-If (Scroll Maxed Out) query 5 next panels, append to Panels Container. (I can do this in JS easily, if I can properly query the info.)
-If (Scroll Min Out) query 5 prev panels, append to Panels Container.
I don't think Views pagination isn't going to be suitable for this.
If you are displaying a certain number of posts in a horizontal panel, when you paginate it replaces all of the existing content with new content.
You are right that infinite scroll works a little differently and appends the new results to the old results, but it works with vertical scroll and even if you hacked it to work with horizontal scroll it would only append results, not prepend.
It is not designed for what you are trying to do and I think making your own solution will be easier than trying to bend Views pagination to achieve it.
If I were doing this I would have the View output the markup for all of the images in a suitable container that showed, say, 3 images at once, and the other images would only lazy-load as they were brought into the viewport if there are lots of images.
It is not too hard to integrate something like a flexslider2 carousel to do this: hidden link
Or there are many other slider libraries which you could explore to see if one better suited your needs.
Here is a document which describes the basics of how to integrate flexslider2: hidden link
Considering what you're saying, I'm likely going to adjust my plans to adapt Slick Carousel to try and meet as many of the display functionality as I can. I'll get back to you once I've mocked up the display portion for advice on connecting it to views to access the post data.
hidden link
I would use:
Lazy Load, Slider Sync, Center Mode, and the Add/Remove Slide.
The Slider Sync would be to display the post body to the page. Which is at the core of what I'm trying to do.
Thanks for the reply. I'm currently juggling a lot of responsibilities as I am developing a cartoon series (which I'm hoping to host on this site) in parallel to a paying job and regular life demands.
I do still intend to return to this soon however I've had to prioritize other things recently.
It would be great if you could leave this ticket on standby. Otherwise, if you must close it, I'll simply link back to it when I get started again.
I greatly appreciate your support and the support of the rest of the toolset team. This site project is part of my career plan so I won't be leaving it for long.
That sounds great, and I look forward to seeing the site when it's finished.
I'm going to be away for most of next week, so I'll mark this as needing your feedback for now.
You'll get prompted to reply in about a week's time. If you want to just keep the thread open you can reply with a simple comment to that effect at the time.
