Hi,
I need to create a slideshow with the content of a Custom Post Type.
Please find attached the visual result I am trying to achieve.
In detail I have one Custom Post Type called Residenze (buildings with accomodations) and another post type called Luoghi (places of interest around the buildings). I have already set up the relationship between them.
The Luoghi custom post type has 3 information: title, content and thumbnail.
I want to create a slideshow that shows Luoghi in a single building page.
Using the block visual editor, I have created a View with pagination and front-end but the result is not the best (updating url and no touch integration).
Then I have used your new module Img Slider but it seems impossibile to connect with dynamic source and display the information I need.
Do you have some advices to reach the result I want?
Thanks.
M.
Hello M. and thank you for contacting the Toolset support.
Currently, Toolset modules that offer a slider or a carousel do not support touch events for mobile devices. You can suggest this feature here https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/
You may want to create some Javascript code to make them work using jQuery mobile events:
hidden link (also look for swipeleft and swiperight)
hidden link (trigger click)
Or you may create your own slider with a 3rd party library like:
- hidden link
- hidden link
The trick would be to wrap the content of the loop inside a Toolset Container block and give it a class in "ID & Classes" setting section of the container block. Check this article that explains how to use Flickity on a regular webpage, this may inspire you for a Toolset view powred by blocks.
hidden link
I hope this helps. Let me know if you have any questions.
Hi Jamal,
thanks for the help and the useful links.
I've been able to implement Flickity with the strategy you suggested (create a loop and wrap it with a container etc.)
I have another question related to the img slideshow block you implemented with the latest update.
Is there a way to display the dot navigation? In the setting I do not see this king of feature and on frontend there are only prev and next arrow.
How can I display even the dot nav?
This time I cannot use the loop strategy + flickity.
I need to create a simple slideshow with images from the same Room (accomodation website) and the loop doesn't work with repeatable fields.
Looking forward to hearing form you.
Thanks.
M.
Hello M.
There is no setting right now to use dot navigation for any of Toolset sliders. If you think this should be added to our blocks, please ask it here https://toolset.com/contact-us/suggest-a-new-feature-for-toolset/
In the meantime, you can use a Repeating block to display the images. It will render images in an ordered list close to this:
<div id="an-id" class="tb-repeating-field">
<ol class="tb-repeating-field--ordered">
<li><img src="url-to-image-1.jpg"></li>
<li><img src="url-to-image-1.jpg"></li>
</ol>
</div>
And you will need to load the Javascript/CSS for your library and create the desired slideshow.
You may want to wrap the repeating fields in one or more container and use ID&Classes section to adapt them to your library, such as:
- Container(for the slider)
--- Container(for the images)
----- Repeating Field Block
--- Container(for the dots)
----- Repeating Field Block
--- Container(for the navigation)
----- Button Block for Previous
----- Button Block for Next
Or you may use a Repeating Field to add the images and create a javascript function that will build the whole slider on the frontend using the images from the Repeating Field. The function will also hide the Repeating Field.
hidden link
In both ways, I would suggest creating all this in a content template to reuse it across your website. The content template does not need to be assigned to any post type and will inherit the context(which post) when it is used.
