This thread is resolved. Here is a description of the problem and solution.
Problem:
I want to have Dynamic Carousel image Slider from Repeated Image Custom Field as my header for Custom post type called "Listings"
Solution:
Views built-in sliders works when you are using Views plugin to query multiple posts, in your case, it is a Repeated Image Custom Field of single post, you can integrate other slider JS framework, for example flexslider, see their domo:
http://flexslider.woothemes.com/carousel-min-max.html
See details here:
https://toolset.com/forums/topic/dynamic-carousel-image-slider-from-repeated-image-custom-field/#post-1141069
Relevant Documentation:
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 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | 9:00 – 13:00 | - |
| - | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | 14:00 – 18:00 | - |
Supporter timezone: Asia/Hong_Kong (GMT+08:00)
Tell us what you are trying to do?
I want to have Dynamic Carousel image Slider from Repeated Image Custom Field as my header for Custom post type called "Listings"
So, I ant to ask how can I achieved it like in the image that I attached.
- images are in the same height
- The Carousel image Slider section are full width
- Pop up lightbox slider when click
Is there any documentation that you are following?
I just jump between documentation and forum.
Link after link.
I get so confused and don't know what to look for.
Is there a similar example that we can see?
- example : hidden link
What is the link to your site?
Site under development but if you need I will push it only for you.
Tell me what I can do for you to make it easier.
Thank you in advance,
Topper
It's not working
This is what I do :
1.Add below codes into your theme/functions.php:
function add_flexslider_slider_js() {
wp_enqueue_script( 'flexslider-js', '<em><u>hidden link</u></em>', array( 'jquery' ));
wp_enqueue_style( 'flexslider-css', '<em><u>hidden link</u></em>');
}
add_action( 'wp_enqueue_scripts', 'add_flexslider_slider_js' );
2. Create a content template for the single post:
<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-image"]
<li>[types field="image" id="" size="large"][/types]</li>
[/wpv-for-each]
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
[wpv-for-each field="wpcf-image"]
<li>[types field="image" id="" size="thumbnail"][/types]</li>
[/wpv-for-each]
</ul>
</div>
3.Add below JS codes to the content template:
jQuery(window).load(function() {
// The slider being synced must be initialized first
jQuery('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
jQuery('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
And when I check the front end it's not working
