Skip Navigation

[Resolved] Trying to create an image slider on a custom post type

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

Problem: I would like to create a slider using a repeating image field, however when I try to implement the Flexslider library it's not working as expected. I also have some sliders I created in Avada without Toolset, and they seem to break when I try to add the Flexslider code.

Solution: Don't enqueue the Flexslider library again if Avada already includes it. When initializing sliders created with wpv-for-each and Types fields, be sure to only initialize those sliders and not other sliders already created in Avada. For example, you can add a CSS class "elevations" to this particular flexslider, and initialize it like so:

( function( $ ) {
    $( document ).ready( function(){
  
      $('.flexslider.elevations').flexslider({
        animation: "slide"
      });
  
    });
})( jQuery );
This support ticket is created 5 years, 11 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.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 5 replies, has 2 voices.

Last updated by johnC-35 5 years, 10 months ago.

Assisted by: Christian Cox.

Author
Posts
#1178284

I am trying to:
create an image slider on a custom post type
Link to a page where the issue can be seen:
hidden link
I expected to see:
a slider
Instead, I got: Followed Nigels instructions on creating an image slider using flexslider. https://toolset.com/forums/topic/how-to-display-the-pics-i-uploaded-as-a-slider/#post-518295

Now my default theme slides Avada, felxslider seems to be interfering with this. Is there a way to use my existing flexslider library to make this work?

Best Regards, JOhn

#1178592

Sorry I don't understand your question. Are you saying that the Flexslider solution provided by Nigel is not working, or are you saying that the Flexslider solution provided by Nigel is causing problems with other sliders you created with Avada's slider module?

#1178889
elevations-slider.png

Hi Christian

1. I could not get the flexslider to work.
2. When I added the flexslider as in his example my existing slider (Avada - Fusion Slider) at the top of the page stopped working.

The layout is for a home builder. We will have the main house images using the avada slider and then display Home Elevations and Blueprints as smaller slider elements below.

#1179192

I'm not sure if this Flexslider component is compatible with Avada sliders, but I can log in to your wp-admin area and take a look. Please provide login credentials in the private reply fields here.

#1179362

Okay I made a couple of adjustments. Please check the Content Template here:
hidden link

I edited the flexslider div so that it has another classname, "elevations." Then I modified the wpv-for-each shortcode to use the wpcf- prefix (this is why no images appeared in the lower slider). Finally I modified the JS in the JS panel to target only the elevations slider:

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

Now I can see both groups of images appear here: hidden link
Can you take a look and let me know if you're able to continue working on this now?

#1179384

My issue is resolved now. Thank you!