JavaScript Swiper

Swiper is a free open-source touch slider with hardware-accelerated transitions. It's most useful for web apps on touch-screen mobile devices. Swiper works on iOS, Android, Windows Phone 8 and modern Desktop browsers. The Swiper website provides details of the Swiper API and demonstration code.

This topic uses JavaScript to create and populate a swiper control, but you can also add a swiper using the Swiper Control in the page designer.

Example

In the following simplified example, an instance of Swiper (optimised for a mobile device) is added to the first cell in a MRI Dreamscape Container control, "myContainer". The slide contents are hard-coded, and the container uses default values.

If you are deploying this example to a desktop device, set the container width to 30% in Appearance properties.

JavaScript

The web app page JavaScript for the example.

Note | The string: /*global Swiper*/ must be added at the top of the JavaScript, before any code, and is not a comment; it allows validation to succeed when the Swiper open source library is being used. It could also be placed at the top of the web app's Global JavaScript and would then be effective for all pages in the app.

/*global Swiper*/
var swiper;
function AddSwiper() {
  var swipe = '<div class="swiper-container">' +
    '<div class="swiper-wrapper">' +
    '</div>' +
    '</div>';
  $("[data-control-id='myContainer'] .col1.row1").append(swipe);
  // Init Swiper
  swiper = new Swiper('.swiper-container', {
    // Parameters
    direction: 'horizontal',
    loop: true,
    mousewheelControl: true,
    keyboardControl: true,
    slidesPerView: 1,
    grabCursor: true,
    freeMode: false
  });
   var slide5 = '<div class="swiper-slide">Slide 5</div>';
   swiper.appendSlide(slide5);  
   var slide4 = '<div class="swiper-slide">Slide 4</div>';
   swiper.appendSlide(slide4);
   var slide3 = '<div class="swiper-slide">Slide 3</div>';
   swiper.appendSlide(slide3);
   var slide2 = '<div class="swiper-slide">Slide 2</div>';
   swiper.appendSlide(slide2);
   var slide1 = '<div class="swiper-slide">Slide 1</div>';
   swiper.appendSlide(slide1);
   swiper.update(true);
}

Global CSS

The web app Global CSS for the swiper example.

.swiper-wrapper {
  position: absolute !important;
  width: 100% !important;
}

.swiper-container {
  width: 100%;
  height: 100px;
}

.swiper-slide{
  background: #d9fcd9;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-radius: 5px;
  border-color: #BFBFBF;
  overflow:hidden;
  height:auto;
  font-size: 24px;
  text-align: center;
  padding-top: 30px !important;
}

Adding an image to a swiper slide

Embedded image

var slide = '<div class="swiper-slide" ><img src="data:image/png;base64,*image code here*"></img></div>';
swiper.appendSlide(slide);

for example—

var slide = '<div class="swiper-slide" ><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAADcSURBVFiF7ZexTQNBEEXfnSMkHJiMFqgG+rARJfhMCYgIt4BFCbgFB+4Ai8gOCIjQc3BOgA3Wo9Ndsl+aZLTz9bT6Wu1AQOpIfVR3p2rUOuIVkvrgf933CbBOALxHvKLXNkn0rvoE6EwFoAAUgAJQqSNgBtwCl5lzN8DFn943sM2c/wLegCfUReJd70tNpe6A60zyrvU5dAZ+auBlQIBlZfuTmQJ3wDhzsIsQroDnzPO/pW4SgdpEvIbOQAEoAAWgAIQBDonevk+AVaL3GvQ6X2ptu5J/nGpucD0/AtxKCHjfAxt2AAAAAElFTkSuQmCC"></img></div>';
  swiper.appendSlide(slide);

Adding an image from an image panel

This example populates the slide with an image selected in an Image Panel control and includes an onclick event.

var image = fsi.getById('myImagePanel');
  var slide = 
  '<div class="swiper-slide" onClick="myFunction()"><img src="'+ image +'">'+'</div>';
  swiper.appendSlide(slide);