Is it possible to integrate Swiper API into mobile application development?

Is it possible to integrate Swiper API into mobile application development?

  

Hello


I need to implement a swipe effect without loading new contents within the same page based on which part users want to see.

In order to achieve that, I'm trying to integrate Swiper API into my own OutSystems mobile application.

The API works fine in both PC / Mobile HTML5 environments and you can preview the swipe effect HERE.

Swiper's homepage said that "It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps", so I suppose it should also works fine with OutSystems.

I've imported all necessary CSS/JS files and HTML elements into my OutSystems project and all the codes are identical with the demonstration I provided above. However the swipe function (or even the touch function) doesn't work at all.

You can find the preview of my OutSystems project HERE.

I've also attached my .oml file for your convenience.

In addition, please let me know if there are any better solutions other than using Swiper API to achieve this swipe effect in OutSystems mobile app development.

Thanks very much.


Kind Regards,

Mofeng

Hi Mofeng,

Have you checked the SwipeEvents pattern from Silk UI/OutSystems UI Mobile? You have documentation explaining how to use it here.

Jorge Martins wrote:

Hi Mofeng,

Have you checked the SwipeEvents pattern from Silk UI/OutSystems UI Mobile? You have documentation explaining how to use it here.

Hi Jorge

Thanks for you reply but that's not what I need.

What I need to achieve is basically to divide a html into three parts and users can swipe between those three parts by swiping anywhere on the screen by finger or mouse.

In order to achieve this, I imported Swiper API into my original project and it works pretty well.

I've also tried to import Swiper API into a web application created by OutSystems by copy&paste all the necessary JS/CSS codes, but again, the API seems not working either. 

I've attached the .oml file for your reference. 


Solution

Hi Mofeng,

From what you describe, I still believe the SwipeEvents would be the simplest solution... with anywhere between one and three screens (one for each "part" that you may want to swipe).

Unfortunately your upload is still processing, but I also don't have the availability to look into your OML. Where are you initialising your Swiper object? it needs to be at least when the screen is Ready.

What's the problem with your web application project? when are you initialising the Swiper object on that one? OutSystems Web uses jQuery, so you can follow the Swiper recommendation (adjusted to your settings):

  $(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper(".swiper-container", {
      // Optional parameters
        effect: "coverflow",
        grabCursor: true,
        slidesPerView: "auto",
        parallax: true,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false
        }
      });
  });


Solution

Jorge Martins wrote:

Hi Mofeng,

From what you describe, I still believe the SwipeEvents would be the simplest solution... with anywhere between one and three screens (one for each "part" that you may want to swipe).

Unfortunately your upload is still processing, but I also don't have the availability to look into your OML. Where are you initialising your Swiper object? it needs to be at least when the screen is Ready.

What's the problem with your web application project? when are you initialising the Swiper object on that one? OutSystems Web uses jQuery, so you can follow the Swiper recommendation (adjusted to your settings):

  $(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper(".swiper-container", {
      // Optional parameters
        effect: "coverflow",
        grabCursor: true,
        slidesPerView: "auto",
        parallax: true,
        coverflowEffect: {
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false
        }
      });
  });



I changed my own JavaScript code into JQuery and it works in web application!

Haven't tried it in mobile application but thanks a lot!

@Jorge: using jQuery is advised against for Mobile, because of possible performance problems.

Kilian,

that's why I was explicit about OutSystems Web using jQuery (emphasis now)

What's the problem with your web application project? when are you initialising the Swiper object on that one? OutSystems Web uses jQuery, so you can follow the Swiper recommendation (adjusted to your settings)

For OutSystems Mobile the solution (like I tried to explain) would be to call Mofeng's Swiper initialization in a Client Action configured as Event Handler for OnReady (emphasis now) 

Unfortunately your upload is still processing, but I also don't have the availability to look into your OML. Where are you initialising your Swiper object? it needs to be at least when the screen is Ready.


Thanks, I should learn how to better read :).