3D cube with text

3D cube with text using Swiper's API. Touch is enabled.

by Robert Washbourne

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.7/js/swiper.min.js"></script>
<body>
  <!-- Swiper -->
  <div class="swiper-container swiper-container-h">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <h1>Horizontal 1</h1> Sed convallis lorem felis, eu feugiat lorem ultrices sed. Duis ex lorem, varius vel dignissim et, pretium sit amet sem. Integer at nisi diam. Nullam sagittis vestibulum ante vitae feugiat. Nunc in convallis odio, quis vestibulum lorem. Vestibulum
        varius convallis lobortis. Aliquam id rhoncus nibh. Nullam ut nisl condimentum, tempor enim sit amet, sodales elit. Nulla libero dolor, semper sit amet risus in, ornare volutpat orci. Nulla sed eleifend metus. Nam tincidunt est eros, a fermentum
        tortor mollis eu. Ut lacinia, nunc venenatis consectetur ultricies, nulla orci condimentum nulla, vel finibus neque neque vel neque. Vestibulum rhoncus nibh eu luctus volutpat. In maximus nunc non nulla luctus eleifend. Curabitur non tempus diam.
        Etiam nec erat aliquam, tempus lorem ac, semper ante. Duis quis lectus ex. Proin et eleifend mauris, vel pharetra tellus.
      </div>
      <div class="swiper-slide">
        <div class="swiper-container swiper-container-v">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <h1>Slide 1</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut magna ipsum. Duis maximus ex sed enim pulvinar eleifend. Donec laoreet, sem eu dapibus ultricies, leo tortor tempor felis, a congue augue diam eu erat. Phasellus condimentum
              iaculis orci ac sagittis. Phasellus ut ipsum viverra, finibus enim ut, faucibus nisl. Phasellus varius neque eros, quis sagittis eros porttitor vel. Nulla pharetra arcu non enim efficitur, sed semper metus pretium. Duis iaculis urna tincidunt
              tincidunt sagittis....

CSS

html,
body {
  position: relative;
  height: 100%;
}

body {
  overflow: hidden;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
}

.swiper-container {
  overflow: hidden;
  width: 90%;
  height: 100%;
}

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

.swiper-slide {
  font-size: 18px;
  background: #eee;
}

.swiper-container-v {
  background: #eee;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #007aff;
}

JavaScript

var swiperH = new Swiper('.swiper-container-h', {
      pagination: '.swiper-pagination-h',
      paginationClickable: true,
      effect: 'cube',
      loop: true,
      cube: {
        shadow: false,
        slideShadows: false,
      }
    });
    var swiperV = new Swiper('.swiper-container-v', {
      pagination: '.swiper-pagination-v',
      paginationClickable: true,
      direction: 'vertical',
      loop: true,
      effect: 'cube',
      cube: {
        shadow: false,
        slideShadows: false,
      }
    });