[Resolved] Slider with thumbnails

[Author]

Posts

[MerleV713]

Tell us what you are trying to do?
Dear, I am trying to create this: hidden link

what I found on this page:
https://toolset.com/forums/topic/flexslider-tutorial-or-example-please/

Any code examples how i can create this slider for a single product?

kind regards

[Shane]

Hi Merle,

Thank you for contacting our support forum.

Before I can propose a proper solution, could you let me know if the images are stored in a repeatable field ? Meaning you can add multiple images.

Please let me know and we can go from there.

Thanks,
Shane

[MerleV713]

Dear shane,

At this moment I used 8 single image fields or just the image field and than checked the box multiple values can be added.

regards Merle

[Shane]

Hi Merle,

Have a look at the link below.
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/how-to-create-a-wordpress-thumbnail-slider-in-minutes/

This should be able to guide you through the process. Its a content template you want to apply the slider to correct?

If so then you can skip some steps. Instead of creating a view to list the items. You just add the code directly to the content template.

This one is loading it through multiple Posts, but what you want is through a single post.

So you can read the documentation jsut to see how it works but I would advise that you allow me to have access to help with the setup.

Thanks,
Shane

[MerleV713]

Dear shane,
thanks a lot. I already downlaoded this module.
yes i created a content template for a custom post type and now I wanted to have a slider like that in it.
Do I have to use only the template code or also the loop code?

[MerleV713]

[wpv-items-found]
<div id="main-slider" class="main-carousel carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=1]
<div class="item active">

<div class="slide">
[types field='foto-op' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' resize='proportional'][/types]
<div class="slide-inner-box">
<p>Portfolio category: [wpv-post-taxonomy type="portfolio-category"]</p>
<h2>[wpv-post-link]</h2>
[wpv-post-excerpt length="40" count="word" more=" "]
Read more
</div>
</div>

</div>
[wpv-item index=other]
<div class="item">
<div class="slide">
[types field='foto-op' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='400' resize='proportional'][/types]
<div class="slide-inner-box">
<p>Portfolio category: [wpv-post-taxonomy type="portfolio-category"]</p>
<h2>[wpv-post-link]</h2>
[wpv-post-excerpt length="40" count="word" more=" "]
Read more
</div>
</div>

</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
</div>
<div data-target="#main-slider" data-slide-to="[wpv-loop-index offset="-1"]" class="thumb">
[types field='foto-op' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='150' height='150' resize='crop'][/types]
</div>

[/wpv-items-found]

this is what i have now but nothing is displayed.........

[MerleV713]

p.s. i do not use repeatable groups, i use the image field and checked the box more values available

[Shane]

Hi Merle,

I think its better if I logged in to see what is being done.

The private fields have been enabled for your next response.

Thanks,
Shane

[MerleV713]

Dear shane,

I prefer to become helped by written text 😉

this is the custom field that I use. or I would like to use just max. 10 single image fields to avoid to many pictures.

[MerleV713]

Dear shane,

it works with this code:

<div class="product-slider">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> [types field='f1' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types] </div>
<div class="item"> [types field='f2' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='1200' height='800' resize='crop'][/types] </div>
<div class="item"> [types field='f3' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='1200' height='800' resize='crop'][/types] </div>
<div class="item"> [types field='f4' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='1200' height='800' resize='crop'][/types] </div>
</div>
</div>
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb">[types field='f1' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='100' height='80' resize='crop'][/types]</div>
<div data-target="#carousel" data-slide-to="1" class="thumb">[types field='f2' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='100' height='80' resize='crop'][/types]</div>
<div data-target="#carousel" data-slide-to="2" class="thumb">[types field='f3' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='100' height='80' resize='crop'][/types]</div>
<div data-target="#carousel" data-slide-to="3" class="thumb">[types field='f4' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='100' height='80' resize='crop'][/types]</div>

</div>

</div>
<!-- /carousel-inner -->
</div>
<!-- /thumbcarousel -->

</div>
</div>

now i have a slider with thumbnails.

however i have still one little problem

the main carousel does not stay fixed quasi the size. so i used resize='crop' but it still sometime becomes longer .... instead of the fixed size...

[Shane]

Hello,

Great to see that you have it up and running.
The code looks fine to me but I would like to see what it looks like on the frontend to get a better idea of whats wrong.

Could you send me a link to site so that I can see it ?

Thanks,
Shane