[Resolved] Swiper – Mobile Touch Slider

[Author]

Posts

[Adrian Robbins]

We are building a WebApp using Toolset, and it is essential we have a Mobile/Tablet friendly 'swipe' function on the various Views with a Pagination Progress Bar as per this example:

hidden link

We also need to be able to have Multiple Swipers as per this example:

hidden link

This is because there will be up to 6 separate views from one CPT (Restaurants in 6 different locations split into individual views).

We are making progress, but in the Swiper Get Started section (hidden link) it says we need to 'Initialize Swiper' and lists this code:

const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});

We tried adding it to the JS section in the View and that didn't work properly. Can you advise where this code needs to go?

Copied below is the View we are using:

[wpv-layout-start]
[wpv-items-found]

<!-- Slider main container -->
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-body view_template="loop-item-in-restaurants"]
</wpv-loop>
<!-- wpv-loop-end --></div>

...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>

[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

Many thanks

[Minesh]

Hello. Thank you for contacting the Toolset support.

The custom JS code should obviously added to the JS section of your view.

Could you please just try to wrap your code with jQuery(document).ready() method as given under and check if that help you to resolve your issue.

jQuery(document).ready(function($){


const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,

// If we need pagination
pagination: {
el: '.swiper-pagination',
},

// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});

});

[Adrian Robbins]

Hi Minesh

Thank you for getting back to me so quickly, and unfortunately your suggestion did not work.

Since we messaged yesterday, we have built a new 'test' page, so we can 'validate' the HTML code and associated JS, for what we want to achieve:

hidden link

If you 'slide' either of the three sliders, the scroll bar to indiciate progress through the data set dynamically appears. So we know the HTML code and JS is now OK.

However we now just need to get this working with Toolset, which is where we need some guidance please 🙂

Copied below is the code and JS we have used.

We need to have multiple slider views on the content template, all working indepedently of each other (they are being used to display restaurants in different locations), hence the meed for three sliders, and possibly more as the client wants to add in visitor attractions in the various locations. All populated by Toolset.

So, we now know this HTML code works:

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-scrollbar"></div>
</div>

<div class="swiper mySwiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-scrollbar"></div>
</div>

<div class="swiper mySwiper3">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-scrollbar"></div>
</div>

and this is the JS:

<script src="hidden link"></script>
<script>
var swiper = new Swiper(".mySwiper", {
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
});
var swiper2 = new Swiper(".mySwiper2", {
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
});
var swiper3 = new Swiper(".mySwiper3", {
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
});
</script>

Look forward to hearing back from you.

Kind regards
Ade

PS: All of this code has been taken from hidden link

[Minesh]

Can you please tell me what view content you want to display with the slider you integrated and share problem URL and admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please check now: hidden link

I've adjusted the view's "Loop Editor" section and JS section.
=> hidden link

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
<div class="swiper mySwiper-[wpv-attribute name='eating']">
<div class="swiper-wrapper">
	<wpv-loop>
      <div class="swiper-slide">[wpv-post-body view_template="loop-item-in-restaurants"]</div>
</wpv-loop>
 </div>
<div class="swiper-scrollbar"></div>
</div>

	<!-- wpv-loop-end -->
	[/wpv-items-found]

I've added the following JS code to JS editor of the above view:

jQuery(document).ready(function($){
var swiper = new Swiper(".swiper", {
scrollbar: {
el: ".swiper-scrollbar",
hide: true,
},
});
  
});

In addition to that, I've disable the pagination as we need to list all items at once to have effect of Swiper.

Can you please confirm it works as expected.

[Adrian Robbins]

Hi Minesh

Thank you so much for getting this working.

Just one last question, which hopefully is a simple one, at the moment all the Restaurant CPT Fields for each record are now being displayed horizontally.

How do we get them back to displaying vertically (like the hotels)?

I thought it might be the Content Template, but I have just checked and this doesn't appear to have changed. So I am not sure, what I need to do, to get all the fields for each restaurant vertically listed.

Many thanks for all your help.

Kind regards
Ade

[Minesh]

I can see that the fields are displayed vertically so you must have found a way to do that:
- hidden link

[Adrian Robbins]

The fields were all displayed vertically yesterday, before we added the swipe slider functionality.

I thought you might have changed a setting, which meant we had to rebuild the content template, but that looks to be all OK.

Just wondering how we can get the fields displayed correctly?

Is there some obscure setting in Toolset that might be causing this?

The records are swiping perfectly on a mobile/tablet, which is exactly what we needed. So, we now just need to sort the display of fields from horizontal to vertical.

[Minesh]

I've changed the loop editor code as given under:

<div class="swiper mySwiper-[wpv-attribute name='eating']">
<div class="swiper-wrapper">
	<wpv-loop>
      <div class="swiper-slide">
        	<div class="col-md-6">[wpv-post-body view_template="loop-item-in-restaurants"]
        </div>
     </div>
</wpv-loop>
 </div>
<div class="swiper-scrollbar"></div>
</div>

Can you please confirm it works as expected: hidden link

[Adrian Robbins]

Hi Minesh

Looks like your tweak has cracked it 🙂

We are so pleased to have this slider working with a swipe gesture and your help and support has been first class.

Many thanks for all your help.

Kind regards
Ade

[Adrian Robbins]

My issue is resolved now. Thank you!

[Minesh]

Glad to help are you're welcome to mark this ticket resolved.

[Minesh]

It seems we cross posted, please mark ticket resolve with some message as with standard message it will not allow you to mark resolve the ticket 🙂

[Minesh]

You are welcome to mark resolve this ticket 🙂

[Minesh]

This ticket issue is resolved. Thanks.