[Resolved] Add slider in a view

[Author]

Posts

[markusK-6]

Hello,

how can I add a imageslider in a existing loop view?
The images for the slider are in a Post Type Post as Custom fields.
Every Post has its own images.

hidden link

please help

Nice regard
Markus

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Markus,

Thank you for contacting our support forum.

You can actually do this by using the flexslider plugin and it can be downloaded by going to the link below.
https://woocommerce.com/flexslider/

Area your pages currently using a content template ? If so then you use this to display the images for the flexslider.

<ul>
  [wpv-for-each field="wpcf-image_1"]
  <li>[types field="image_1" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li>
  [/wpv-for-each]
</ul>

Where you will need to replace wpcf-image with the slug of your image field.

You can check this ticket for further reference
https://toolset.com/forums/topic/flexslider-settings/

Please let me know if this helps or if you need further assistance.

Thanks,
Shane

[markusK-6]

Hi Shane,

thank you but is there a possibility with in other slider not woocommerce?
I do not want to install woocommerce.

Nice regards
Markus

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Markus,

I managed to create a flexslider plugin that should be able to help your.

Download and install the plugin in the link below.
hidden link

Then create a content template for your post and add the following.

<div class="flexslider">
  <ul class="slides">
   [wpv-for-each field="wpcf-image_1"]
  <li>[types field="image_1" size="medium" align="none" resize="pad" padding_color="#FFF"][/types]</li>
  [/wpv-for-each]
  </ul>
</div>

After doing this then you will need to add the script for it to work.

Add this to the js section of the content template.

 jQuery(window).load(function() {
    jQuery('.flexslider').flexslider();
  });

Please let me know if this helps.
Thanks,
Shane

[markusK-6]

Hi Shane,

thank you very much for good help, it works!!!
But there is a small failure with "AJAX results update when visitors change any filter values".
If AJAX results update when visitors change any filter values" is set so the slider disappears.

Example: hidden link

Nice regards
Markus

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Markus,

Awesome. On your view there should be a JS section where you added the filters.

On that JS section you should see a button called "Frontend Events" click this and then insert the code for after the view results have been updated.

Within that function that was added just add this callback.

jQuery(window).load(function() {
   jQuery('.flexslider').flexslider();
 });

Please let me know if this helps.
Thanks,
Shane

[markusK-6]

Hi Shane,

unfortunately that does not work.

here the code of my JS editor section:

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
	
  	jQuery(window).load(function() {
	jQuery('.flexslider').flexslider();
	});
  
}); 

Is that correct?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Markus,

Would you mind providing me with admin access to the website so that I can have a look?

The private fields will be enabled for your next response.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Markus,

All that was needed was this line
jQuery('.flexslider').flexslider();

It should now be working.

Thanks,
Shane

[markusK-6]

Thank You for all!!! It works!