This thread is resolved. Here is a description of the problem and solution.
Problem:
The customer wanted to create a slider for videos similar to an existing image slider on their site. Although the videos were set up as custom fields, they were currently displayed in a row on the page instead of a slider format.
Solution:
We advised the customer that Toolset does not have a built-in feature to directly display multiple videos from a custom field in a slider. Instead, we provided a custom HTML structure using the [wpv-for-each] shortcode to wrap the video outputs, along with custom CSS to style the videos in a slider-like format. This allowed the videos to be visually organized, improving their appearance.
You can start by wrapping your video outputs in a custom HTML structure like this:
<div class="video-slider-wrapper">
[wpv-for-each field="wpcf-youtube-videos"]
<div class="video-slide-item">
<div class="video-frame">
[types field="youtube-videos"][/types]
</div>
</div>
[/wpv-for-each]
</div>
Then, add the following custom CSS to your content template to style these videos in a slider format:
.video-slider-wrapper {
display: block;
overflow: hidden;
}
.video-slider-wrapper .video-slide-item {
float: none;
width: 98%;
overflow: hidden;
margin: 1% 1% 4% 1%;
background: #fff;
padding: 1%;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}
.video-slider-wrapper .video-slide-item .video-frame {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-slider-wrapper .video-slide-item .video-frame iframe,
.video-slider-wrapper .video-slide-item .video-frame object,
.video-slider-wrapper .video-slide-item .video-frame embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (min-width: 801px) {
.video-slider-wrapper .video-slide-item {
float: left;
width: 30%;
overflow: hidden;
margin: 1% 2% 2% 1%;
}
}
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 |
|---|---|---|---|---|---|---|
| - | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | 9:00 – 12:00 | - |
| - | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | 13:00 – 18:00 | - |
Supporter timezone: America/Sao_Paulo (GMT-03:00)
This topic contains 5 replies, has 2 voices.
Last updated by 1 year, 2 months ago.
Assisted by: Mateus Getulio.
Okay, so I would setup a custom field as which field type to do this?
And then I would enter the shortcode you provided into my content template?
