Tell us what you are trying to do?
I'm trying to use a dynamic content carousel (Toolset View slider) on an Elementor designed page. As the first attempt changed the slider direction from horizontal to vertical, I implemented the View with a short code. Now I can see the View slider correctly on desktop (see also: hidden link) However, the View settings (to show 3 columns on desktop, 2 columns on tablet and only 1 column on mobile) are not working. Instead I'll get 3 columns listed horizontally on mobile.
Is there any documentation that you are following?
Standard Toolset documentation and advise from Toolset support
Is there a similar example that we can see?
hidden link
What is the link to your site?
hidden link
One more issue regarding the View slider: For some reason the bullet points are sliding as well. Expected behavior would be that the bullet points remain in their place and don't move. Thanks in advance for your help!
Hello and thank you for contacting the Toolset support.
The issue of pagination links sliding with the slider is already reported to the developers and would be fixed in an upcoming release. We don't have an estimated time for it yet.
Regarding the issue from your first message, would you like to reproduce it minimally on one of our test sites? You can log into it with the following URL: hidden link
Toolset plugins are already installed, install the Elementor plugin(s) and reproduce the issue on a page. I'll check it to find a solution, otherwise, I'll escalate it to our 2nd Tier who may escalate it again to the compatibility team.
I know, this requires you to invest some time to reproduce the issue. But we need to reproduce a bug in our test sites before escalating it to other levels.
Thanks Jamal, I replicated the issue in the test environment. Please see: hidden link
Expected behavior is that the slider shows not only less columns but also less content (and only shows additional content once sliding) Desktop: 3 items in 3 columns in single row; tablet 3 items in 2 columns in single row; mobile: 1 item in 1 column in single row.
(you can see an example of how it should work [or at least what I have in mind] on hidden link > Dream Homes [section right under the main top section])
However, I believe the issue is that you can adjust the number of rows for each device, but you currently cannot adjust the number of items shown at a time per device. Would it be possible to link the two settings (View pagination: items per page & View loop grid settings: columns count) or find another solution that the content of a slider remains in a single row?
I hope that helped to understand the issue a bit better. Those multiple rows really don't make any sense for me on a mobile device and I hope a solution can be found. Thanks again for your help!
I believe the issue is that you can adjust the number of rows for each device, but you currently cannot adjust the number of items shown at a time per device. You are right, we can customize the number of columns per device/screen, but we can't customize the number of items.
I checked the slider in a non Elementor page such as the following and I don't see any differences between it and when it is used in Elementor hidden link
I believe that the example that you shared from hidden link uses CSS to make the slider overflow horizontally in small devices. Maybe this screenshot will explain it better hidden link
Let me know what do you think about it and we'll see what we can do to help.
Thanks Jamal, much appreciated. Yes, If you can help me to create a similar effect like on domain.com.au with the Toolset tools that would be great. Thanks in advance for your help! Kind regards, Andreas
I worked on this during the weekend and it turns out to be complicated to implement it using custom CSS because of so many blocks involved. Discussing with the team we ended up implementing it with two views/sliders inside two container block.
The first container block is configured to be hidden for mobile, and the second one is configured to be visible only on a mobile. Check this screenshot on how to make the container hidden for tablets hidden link
The first container holds the slider view that you have already prepared(3cols, 3items for Desktop. 2cols 3items for tablet ). And the second container holds a new slider view that has 1 column and 1 item.
Check the results here hidden link
I hope this is a viable solution for you. Let me know your feedback.
Thanks Jamal, I'll replicate this solution on my server soon. Many thanks and kind regards, Andreas
