Split: Can't figure out Flexslider

This thread is resolved. Here is a description of the problem and solution.

Problem:

Create a flexsider with Types custom image fields.

Solution:

See the solution here:
https://toolset.com/forums/topic/split-cant-figure-out-flexslider/#post-948100

Relevant Documentation:

This support ticket is created 6 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

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.

This topic is split from https://toolset.com/forums/topic/cant-figure-out-flexslider/

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)

Tagged: Content Templates, Views plugin

This topic contains 3 replies, has 2 voices.

Last updated by Luo Yang 6 years, 6 months ago.

Assisted by: Luo Yang.

Author

Posts

July 16, 2018 at 7:04 am #948098

jasonw-2

That is great and I'm really happy for the help, but I thought there was a way to show the pictures at the bottom for the navigation? I know I'm asking a lot but it's so close to be exactly the way I want it. 🙂

July 16, 2018 at 7:13 am #948100

Luo Yang

Hello,

I assume we are talking about this kind of sliders:
hidden link

If it is, you just need to setup the HTML codes according to above document, for example, edit the content template, use below codes:

<div class="flexslider">
    <ul class="slides">
      [wpv-for-each field="wpcf-more-images"]
<li data-thumb="[types field="more-images" url="true" width="120" height="" size="thumbnail"][/types]">
  <img src="[types field="more-images" url="true" width="120" height=""][/types]" alt="[wpv-post-title]">
</li>
  [/wpv-for-each]
    </ul>
</div>

modify the JS codes as below:

( function( $ ) {
    $( document ).ready( function(){
      $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
      });
    });
})( jQuery );

Then test it in front-end:
hidden link

Please let me know if it is what you want

July 16, 2018 at 5:22 pm #948488

jasonw-2

Yes. It's perfect.

I VERY MUCH appreciate you helping me with this. Thank you so much.

July 17, 2018 at 3:26 am #948914

Luo Yang

You are welcome