Swiper / 3D Cube Format

Swiper is a modern mobile touch slider with hardware accelerated transitions and native behaviour. It is intended to be used in mobile websites and mobile apps (ad-slot). The Swiper is not compatible with all platforms, for instance the 3D Cube (setting) will not work well in older Internet Explorer versions and Android phones with the native "browser" or even old Chrome browsers.

We have some basic format banners with the swiper library already imported and ready to use. Formats like a 300x250, 320x240 and full-page (interstitial). Please contact support@weborama.nl for these templates.

If you have a different format where you would like to add a swiper library, or you already have a creation and would like to add the swiper library, follow the instructions bellow.

Add the Swiper Library to existing creation

1. Add the Swiper library from our CDN 

   <script type="text/javascript" src="//media.adrcdn.com/ad-resources/swiper/weborama.swiper.1.0.7.min.js"></script>

2. Add the Swiper CSS from our CDN

   <link rel="stylesheet" href="//media.adrcdn.com/ad-resources/swiper/weborama.swiper.1.0.7.min.css">

3. Add the Swiper basic HTML

   <div class="webo-swiper-icon"></div>
   
   <div class="swiper-container">
   
    <!-- Pagination -->
    <div class="swiper-pagination"></div>
    <!-- You can adjust the color of the paginationType in styles.css-->
   
    <!-- Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
    <!-- You can adjust the color to black by changing "white" into "black"
    Add the class swipe-up and swipe-down to the arrows if you make use of a vertical direction -->
   
    <div class="swiper-wrapper">
    <div data-report="slide001" class="swiper-slide" style="background-image:url(side_01.jpg)" onclick="screenad.click();"></div>
    <div data-report="slide002" class="swiper-slide" style="background-image:url(side_02.jpg)" onclick="screenad.click('extra1');"></div>
    <div data-report="slide003" class="swiper-slide" style="background-image:url(side_03.jpg)" onclick="screenad.click('extra2');"></div>
    <div data-report="slide004" class="swiper-slide" style="background-image:url(side_04.jpg)" onclick="screenad.click('extra3');"></div>
    <!-- You can easily add more slides to the swiper container, just copy-paste the above div and adjust the background image -->
    </div>
   </div>

4. Initialize Swiper

   var swiper = new Swiper('.swiper-container', {
    effect: 'cube',
    direction: 'horizontal',
    speed: 700,
    autoplay: 1500,
    loop: true
   });

5. Add optional callbacks for the swiper

   swiper.on('onSlideChangeEnd', function () {
    console.log('current slide: ', swiper.slides[swiper.activeIndex]);
    console.log('data-report: ', swiper.slides[swiper.activeIndex].getAttribute('data-report'));
    console.log('user engaged?: ', swiper.userEngaged());
   });

Swiper Parameters

<!-- hold this slide for 2 seconds -->
<div class="swiper-slide" data-swiper-autoplay="2000">

fade: {
  crossFade: false
}

cube: {
  slideShadows: true,
  shadow: true,
  shadowOffset: 20,
  shadowScale: 0.94
}

coverflow: {
  rotate: 50,
  stretch: 0,
  depth: 100,
  modifier: 1,
  slideShadows : true
}

flip: {
  slideShadows : true
  limitRotation: true
}

var swiper = new Swiper('.swiper-container', {
  //...
  paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});