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, 4 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

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, 4 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