This thread is resolved. Here is a description of the problem and solution.
Problem:
The native Bootstrap Carousel will display on each slide one piece of information (we could easily rebuild that in a View loop, but it would always display one post each slide).
What if we want a column structure in each slide, each column representing one post?
Solution:
You would work with 2 post types.
- A "Slides" Post Type (those are the "containers" which hold the columns, hence, the Bootstrap 4 slide items).
- A "Display" post type where you store the information you want to display in each column of each slide (traditionally that would be the posts you want to display in the slider).
The Slides post type is a parent to the Display post type, where you can exactly that many Display posts to a Slide, as you will have columns in each slide.
For example, a 3 column slide means you will have max 3 child Display Posts each Parent Slide Post.
After creating the posts and connections, create a View where you query Slides, and output a raw View loop where you generate the HTML for the Bootstrap 4 slides.
Note that the View LOOP will repeat what is inside the wpv-loop shortcode and hence, you will add the Bootstrap HTML adequately wrapping that Loop and adding IN the loop only the HTML for the slides, but not their content (columns and Display post information). Pay attention to pass a active class by default to the first slide!
The loop of this view should look something like this:
<wpv-loop>
[wpv-item index=1]
<div class="carousel-item active">
//insert Child View here
</div>
[wpv-item index=other]
<div class="carousel-item ">
//insert child view here
</div>
</wpv-loop>
Now create another view for the Display post type, add a query filter to display the Display Posts that are a child to the post set in the parent view, and add in this View loop the HTML for EACH Display Post.
This means, the columns and post Display information is inserted in this loop, which also should be returned raw.
This view is now inserted to the View displaying Slides.
That is the type you will query in the View where you build the slides.
When now the slides view is inserted to a page, you'll see a slider that each slide has N columns (as many you chose to have) each displaying particular post data.
Follow the thread below in detail for a real-life example with the code for the loops, particularly https://toolset.com/forums/topic/boostrap-4-carousel-is-not-working/#post-1301915
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| - | - | 14:00 – 20:00 | 14:00 – 20:00 | 14:00 – 20:00 | 14:00 – 20:00 | 14:00 – 20:00 |
| - | - | - | - | - | - | - |
Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)
This topic contains 6 replies, has 2 voices.
Last updated by 5 years, 5 months ago.
Assisted by: Beda.
