swiper-slider.html

<link href="../polymer/polymer.html" rel="import">

<!--
`swiper-slider` is a slider based on Swiper.

##### Example

    <swiper-slider next prev>
      <slide>NO. ONE</slide>
      <slide>ITEM TWO</slide>
      <slide background="http://lorempixel.com/800/600">THE THIRD</slide>
    </swiper-slider>

@element swiper-slider
@blurb Element providing a slider based on Swiper.
@status alpha
@homepage http://leoj3n.github.com/swiper-slider
-->

<script src="../swiper/dist/js/swiper.min.js"></script>

<polymer-element name="swiper-slider">

  <template attributes="next prev scrollbar pagination">

    <link href="../swiper/dist/css/swiper.min.css" rel="stylesheet">

    <style>

      /*
       * @TODO(leoj3n): broken data:image inlines
       * blocked by https://github.com/Polymer/polymer/issues/1276
       */

      .swiper-button-prev,
      .swiper-container-rtl .swiper-button-next {
        background-image: url("images/prev.svg");
        left: 10px;
        right: auto;
      }
      .swiper-button-prev.swiper-button-black,
      .swiper-container-rtl .swiper-button-next.swiper-button-black {
        background-image: url("images/prev_black.svg");
      }
      .swiper-button-prev.swiper-button-white,
      .swiper-container-rtl .swiper-button-next.swiper-button-white {
        background-image: url("images/prev_white.svg");
      }
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev {
        background-image: url("images/next.svg");
        right: 10px;
        left: auto;
      }
      .swiper-button-next.swiper-button-black,
      .swiper-container-rtl .swiper-button-prev.swiper-button-black {
        background-image: url("images/next_black.svg");
      }
      .swiper-button-next.swiper-button-white,
      .swiper-container-rtl .swiper-button-prev.swiper-button-white {
        background-image: url("images/next_white.svg");
      }
      .swiper-lazy-preloader:after {
        background-image: url("images/preloader.svg");
      }
      .swiper-lazy-preloader-white:after {
        background-image: url("images/preloader_white.svg");
      }

      /* end @TODO */

      .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

    </style>

    <div class="swiper-container" id="swiper">
      <div class="swiper-wrapper" id="wrapper">
        <content select="slide"></content>
      </div>
    </div>

  </template>

  <script>

    Polymer({
      ready: function() {
        this.nextEl = document.createElement('div');
        this.prevEl = document.createElement('div');
        this.scrollbarEl = document.createElement('div'),
        this.paginationEl = document.createElement('div');
        this.nextEl.className = 'swiper-button-next';
        this.prevEl.className = 'swiper-button-prev';
        this.scrollbarEl.className = 'swiper-scrollbar';
        this.paginationEl.className = 'swiper-pagination';
        this.slides = this.querySelectorAll("slide");
      },
      domReady: function() {
        var swiper = new Swiper( this.$.swiper, {
          nextButton: this.nextEl,
          prevButton: this.prevEl,
          spaceBetween: 30
        });
      },
      attached: function() {
        var i = 0,
          result = '';

        for ( ; i < this.slides.length; i++ ) {
          var slide = this.slides.item(i),
            hasHTML = ( slide.innerHTML !== '' ),
            hasBackground = slide.hasAttribute('background');

          if ( hasHTML || hasBackground ) {
            result += '<div class="swiper-slide"';

            if ( hasBackground ) {
              result += ' style="background-image:url(' + slide.getAttribute('background') + ');"';
            }

            result += '>';

            if ( hasHTML ) {
              result += slide.innerHTML;
            }

            result += '</div>';
          }
        }

        this.injectBoundHTML( result, this.$.wrapper );

        if ( this.hasAttribute('next') ) {
          this.$.swiper.appendChild(this.nextEl);
        }
        if ( this.hasAttribute('prev') ) {
          this.$.swiper.appendChild(this.prevEl);
        }
        if ( this.hasAttribute('scrollbar') ) {
          this.$.swiper.appendChild(this.scrollbarEl);
        }
        if ( this.hasAttribute('pagination') ) {
          this.$.swiper.appendChild(this.paginationEl);
        }
      }
    });

  </script>

</polymer-element>