[Resolved] Making 4 column slider with random posts

[Author]

Posts

[CommMgr]

For reference, here is the URL to the page where I am testing my slider:
hidden link

This site is for a cat rescue organization and is in development. I have a Divi theme and am using the Toolset Types and Views plugins only.

Using Views, I am attempting to create a 4 column slider for our home page. I have been able to create the 4 columns and to style the look of the post/slide, with each slide linking to its post.

This is what I need help with:
* Each column having post images in random order based on cat name (right now the same cat is appearing in each column)
* Post transition - fade
* Next/Previous arrows for manual scrolling on the outside of Column 1 and Column 4

For reference, I have a screenshot of the slider on the test page and also screenshots of the Edit View page sections so you can see the code I am using. Please tell me in detail what I need to do, or give me specific code to add, to achieve my list above. I am also happy to give you administrative access to my site if needed.

SCREENSHOT 1
The page with the current slider as it is now and example of what I want it to look like.

SCREENSHOTS 2, 3 and 4
The Edit View sections for this slider so you can see the coding.

- - - - -

I am self-taught on Toolset and have accomplished some amazing things including an extensive cat database and custom search.

This slider is not something that I am grasping. Looking through the support forum, I have found, and reviewed, these slider tutorial pages already, so please don't refer me to these pages...I need more than these tutorials:
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/
https://toolset.com/documentation/beyond-the-basics/showcase-content-using-post-sliders/

(Unfortunately, these tutorials are much lacking in clear, step-by-step instructions. I learn by SEEING and these pages are not thorough enough in their explanation or visual examples of how to code each section.)

I thank you for your kind assistance.
CommMgr

[Beda]

I think you can set up practically everything needed with the GUI.

I am not sure what the status of those images is.
Are those featured images (each post featured image) or a Custom Field (eventually, repeating?), or is it something else?
This is crucial to know, I leave this part out for now, therefore.

To create the slider, you first create your Post type and add fields; then you create some posts.
I did a similar setup as yours:
- cats' post type
- a breed as field
- native post data

I then created a few cats and then added a View, and queried those cats.

Then in the "Pagination and Sliders Settings" I set up the rules for my pagination (slider).
I chose three items, a fade effect, and saved.

I then headed to the Loop editor, and with the Wizard I created a Bootstrap GRID with three columns
I chose the extended HTML format with a container.

After, I inserted pagination previous and next links with the GUI, just before the loop begins.
These can be placed anywhere, unless IN the loop, as otherwise, they would repeat for each post.

Then, those can be style with Custom CSS as well.

After, this View is placed to a Page, and when loaded, it will display the three posts in a row, just as you show with your ScreenShot, and the pagination allows to slide it, with a fade effect.

Of course, each post can be styled and information added thru the content Template used in the loop.

The only remaining issue is the random image order.

Here I am confused, can you accurately show me how you set up those images, and how you plan to iterate thru them?
Eventually, a nested Child View will be needed.

Thanks!

[CommMgr]

Hi, Beda...

I appreciate your reply.

The images in the example above are generated by the View Template code in the View slider I setup using data from the Field Groups I created. See image 3 of 4 above (GM_slider_issue_view_template.jpg).

Each cat has it's own post that includes:

A thumbnail image (not a featured image - this is an additional image added to the field groups specifically for this slider)
Cat name
Cat age
Cat Gender

The above list are the elements I used to create the cat info boxes for the slider as you can see in the first example image above (GM_slider_issue_slide_output.jpg).

The look of the data that is output is not the issue. That is working.

I have the View slider setup for 4 column grid. The problem is:

1. Each column shows the same cat (see example in the first image above).
2. The slides are not "sliding"...there is no animation or change.
3. I need Next/Previous arrows on the left and right side of the 4 columns.
4. I need the posts to appear in random order by cat name in the 4 columns...not by post date...and not in alphabetical order. Just random.

Thanks for your assistance.
CommMgr

[Beda]

This is unusual.

It seems to me you somehow misplaced your content or removed the loop in the view.
But according to your screenshots this is all there.

Can you send me a site's snapshot, so I can analyse this directly?
https://toolset.com/faq/provide-supporters-copy-site/

Thank you!

[Beda]

1. You have limited the whole View to 4 items only.
Are you sure you want to do that?
I see you have 70 cat posts. I assume you want to include them all in the Slider, right?
Hence, please set the View's setting "Limit and Offset" to "no limit".

2. When you insert the View, you once more restrict the output:

[wpv-view name="catalog-slider-for-home-page" limit="1" offset="0"]

3. Then in the View's Loop, you have 4 times the same HTML calling a Content Template.
This will be repeating for each cat in the loop, that is why you see the cat replicated 4 times.

If you want to create such a GRID that is paginated, please consult the View I created for you directly on your Site.
admin.php?page=views-editor&view_id=2246

It is not visible on the Front End, to see it you need to insert it somewhere with:

[wpv-view name="toolset-test-not-visible"]

To set a View to randomly order, you would do so in the View's "Ordering" settings but when you paginate, random order is not allowed, for logical reasons.
Pagination and random ordering do not work together and would produce unexpected results.

I hope with this I was able to provide you valid informations please do not hesitate to ask me in case something is not clear.

PS:
All the contents in my Test View, are created with the Wizards. I made no Custom Code (HTML) edits.

[CommMgr]

Hi, Beda...

Thank you for the instructions above. It was very helpful. I was able to get the slider to show only 4 cats, and in random order, and the fade animation is working. Here is the url to the test page hidden link

The last thing I need help with is putting next and previous arrows to the left and right of the 4 columns.

The Tech Support login is the same, in case you want to go into the site. The View that needs the next/previous controls is CATalog slider - home page 2

Thank you for your assistance.
CommMgr

[Minesh]

Hello Chris - Beda is on vacation. This is Minesh here and I'll take care of this ticket. I hope this is OK with you.

Well - I tried to check with your test site but your test site link is I think redirected to your live site now.
As you have already Doc with you to create sliders:
=> https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

To add pagination controls you just need to add pagination controls and style it according to your requirement so that it should display as correct position as per your requirement.

More info:
=> hidden link