Hello
I'm trying to make an image slider for tourist accomodation pages. A big featured image first and under it thumbnails in a carousel. The additional images are set up in repeating fields and all are uploaded to their respective post already. So I need to use [wpv-for-each field="wpcf-filedname"]. I know hot to show the thumbnails like this but I need to add the carousel functionality for this. I've seen on the forum that the old image slider module was flexslider based but and it worked with [wpv-for-each] but I cannot find it anymore among the modules. The new approch is as I see to have a cpt for images and have post relationships and it is using the bootstrap carousel. But I cannot use this module because I cannot upload all the images again to a new cpt.
Can you helo me with this somehow? Maybe to implent the old flexslider approach?
Hi Jozsef,
Thank you for waiting.
For what you're planning to achieve, you can use "JQuery lightSlider" script:
hidden link
Please download the zip file from the link above and copy the folder named "dist" in your active theme's directory.
Next, in your content template, you can include the code for the carousel gallery like this:
<link type="text/css" rel="stylesheet" href="[wpv-bloginfo show='url']/wp-content/themes/twentynineteen/dist/css/lightslider.css" />
<script src="[wpv-bloginfo show='url']/wp-content/themes/twentynineteen/dist/js/lightslider.js"></script>
<ul id="imageGallery">
[wpv-for-each field="wpcf-image-field-slug"]
<li data-thumb="[types field='image-field-slug' url='true' size='thumbnail'][/types]">
<img src="[types field='image-field-slug' url='true' size='full'][/types]" />
</li>
[/wpv-for-each]
</ul>
Note: Please replace both instances of "twentynineteen" with the actual folder of your active theme and "image-field-slug" with the actual slug of your image field.
In your content template's "JS editor" tab, you can include the code to initialize the image carousel:
jQuery(document).ready(function() {
jQuery('#imageGallery').lightSlider({
gallery:true,
item:1,
loop:true,
thumbItem:9,
slideMargin:0,
enableDrag: false,
currentPagerPosition:'left',
});
});
Note: To read about the settings/options that this script supports, you can visit, the official reference at:
hidden link
I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
regards,
Waqar
This works like a charm! It's exactly what I needed. Thank you very much Waqar, you are great 🙂 🙂
My issue is resolved now. Thank you!
