[Resolved] Create slider from images in multiple fields

[Author]

Posts

[BorislavM8913]

I have Field group with image field that's set to "Allow multiple-instances of this field", is it possible to create slider based on those pictures submitted?
Or if that's not possible would it be doable with having multiple image fields that receives only 1 image, and i loop through those image fields?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

Yes - You can use the image field to create the slider. Please look at the following Doc:
=> https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

For a repeating field, you need to use a [wpv-for-each loop] shortcode:
=> https://toolset.com/documentation/views-shortcodes/#wpv-for-each

I suggest you should go through the slider doc and that will help you to achieve what you need.

[BorislavM8913]

This isn't working.
User create Ad, and in that Ad he adds images via image field that's set to "Allow multiple-instances of this field". When user finish submitting ad later he can view all those images with slider. Take a look at screen 1. That is 3 images user submitted each bellow. I want to slide through them not to be like that. With slider in screen1 i can slide only through Ads image field, so every ad on page is in slider. I need slider to have only images of single Ad.
Or take a look at hidden link this is where u can see Ad with images, how to make slider from them? Tutorial works only for complete ad listings not images inside ad.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Can I have test site access details?

You can see how the slider is configured with real estate site at top of the page:
=> hidden link

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - I see you shared test site access details rather than discover-wp.com site.

Can I have problem URL where you tried to implement the slider?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

So as I understand you want to build a slider view that displays the all the images uploaded by user for the current ad (for the single ad page) - correct?

[BorislavM8913]

yes exactly that!

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Well - you have two ways here:

Either setup images as child post and add all image field to the child post and then create a slider view filter by child post.

But as you already setup image filed as repeating field you can use jquery plugin cycle here:
=> hidden link

You can find complete solution with steps to integrate with the following reply:
=> https://toolset.com/forums/topic/slider-from-multiple-image-types-field/#post-209373

[BorislavM8913]

1st solution requires to have unique image field for every image, no repeating field will be used?
What happens if user submit only 3 images and there are 5 image field created in Post Fields ?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

1st solution requires to have unique image field for every image, no repeating field will be used?
==> Yes - exactly. Each image should be added as child post. So for example if you want to have 10 images for a single post, then you need to add 10 child posts with the uploading single image to each post.

What happens if user submit only 3 images and there are 5 image field created in Post Fields ?
==> Well again, this will not help to create a slider. You can display only 3 images as only 3 images will have values.

[BorislavM8913]

Can you pls log into my web and see what am i doing wrong with 2nd solution ?
View that should perform slides is called "Slider"
This confuses me:

[wpv-for-each field="wpcf-slider-images"]
          [types field="slider-images" id=""][/types] 

I don't know what am i supposed to enter here to make my images slide.

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Could you please check now:
=> hidden link

I've changed the view output as:

<wpv-loop> 
          <div id="the_images">
          [wpv-for-each field="wpcf-slika"]
          [types field="slika"][/types] 
          [/wpv-for-each]
          </div>
        </wpv-loop>

And added following code to JS box:

jQuery(document).ready(function($){
  $('#the_images') 
.before('<div id="nav">') 
.cycle({ 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav' 
});
  
});

[BorislavM8913]

Nice thank you.
Too bad this has poor support on mobile view, you can't slide with finger u need to click on 1 2 3 links and that is kinda hard to do on smartphone. Do you know any way to solve this?

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

You can try following code:
=> hidden link

Or (better you google it out for better result)

See the following article:
hidden link

As this it needs custom programming and that is beyond the scope of our support policy but here my duty to guide you in right direction and for that you can follow above links. If you need custom programming for your project, please feel free to contact our certified partners:
=> https://toolset.com/consultant/

[BorislavM8913]

Nice, it works, thx