“Prev” or “Next” button not cycling through pages

[oneezy]

I'm trying to write my script declaratively..but running into Uncaught ReferenceError: selectedTestimonial is not defined

Also, the code is set to only allow 3 items in the array (0,1,2) , but I need to write it so that it can have an infinite number of items.

The problem code is here:

<script>

    Polymer({
      is: "page-testimonials",

      properties: {
          selectedTestimonial: {
              type: Number,
              value: 0
          },
      },

      _PrevClick: function() {
          selectedTestimonial = selectedTestimonial === 0 ? 2 : (selectedTestimonial - 1);
      },

      _NextClick: function() {
          selectedTestimonial = selectedTestimonial === 2 ? 0 : (selectedTestimonial + 1);
      }

    });

</script>

Here's all of the code for reference:

    <!--
    :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
        TESTIMONIALS (page)
    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
    <link rel="import" href="../../bower_components/polymer/polymer.html">
    <link rel="import" href="../components/component-page.html">

    <dom-module id="page-testimonials">
    <template>

        <style>
        :host {
            display: block;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        component-page {  }

        iron-swipeable-pages { z-index: 1; }
        iron-swipeable-pages > * {
            padding: 2rem;
            -webkit-user-select: none;  /* Chrome all / Safari all */
            -moz-user-select: none;     /* Firefox all */
            -ms-user-select: none;      /* IE 10+ */
            user-select: none;          /* Likely future */
            cursor: default;
        }
        .page { height: 100%; }

        img {
            border-radius: 100%;
            -webkit-backface-visibility: hidden;
            outline: transparent solid 1px;
            border: 12px solid rgba(0, 0, 0, .25);
        }

        h3 { color: rgba(246, 255, 140, 1); font-size: 2rem; font-weight: 300; text-transform: uppercase; padding: 1rem 0 0; }
        h4 { color: rgba(246, 255, 140, .5); font-size: 15px; font-weight: 300; text-transform: uppercase; opacity: .48; position: relative; }
        h4::after { content: ""; display: block; width: 200%; height: 3px; background: rgba(0, 0, 0, .25); position: absolute; top: calc(100% + 10px); left: -50%; }
        p { color: #fff; position: relative; z-index: 1; font-size: 1rem; font-weight: 100; margin: 1rem 78px; padding: 1rem 0; }

        .next-click,
        .prev-click {
            color: rgba(255, 255, 255, .25);
            position: absolute;
            top: calc(50% - 40px);
            z-index: 10;
        }

        .prev-click { left: 0; }
        .next-click { right: 0; }

    @media (min-width: 769px) {
        img { border: 22px solid rgba(0, 0, 0, .25) }
        h4::after { height: 2px; }
        p {  }
        .next-click,
        .prev-click {
            color: rgba(255, 255, 255, .25);
            position: absolute;
            top: calc(50% - 70px);
            z-index: 10;
        }
        .prev-click { left: 50px; }
        .next-click { right: 50px; }
    }

        </style>

        <!--  Content
        ---------------------------------------------------------------------------------------------------------------->
            <component-page grid="vertical" layout="start-center" min-height="1">

                <!-- Arrows -->
                <paper-icon-button class="prev-click" mobile-size="72" tablet-size="112" desktop-size="150" icon="hardware:keyboard-arrow-left" on-click="_PrevClick"></paper-icon-button>
                <paper-icon-button class="next-click" mobile-size="72" tablet-size="112" desktop-size="150" icon="hardware:keyboard-arrow-right" on-click="_NextClick"></paper-icon-button>

                <!-- Testimonial -->
                <iron-swipeable-pages on-selected-changed="_onSelectedChanged" selected="{{selectedTestimonial}}" flex="1" width="100" show-arrow>
                    <div class="page" grid="vertical" layout="center-center">
                        <img src="https://randomuser.me/api/portraits/men/7.jpg" size="300" mobile-size="150">
                        <h3>Justin O'Neill</h3>
                        <h4>Beaumont, Texas</h4>
                        <p mobile-width=".8" tablet-width=".75" desktop-width=".5" desktop-max-width="600px">This company is top notch, on task, and gets the job done! Clearly outstanding, honest, and reliable in work and service--AND a reasonable price! The estimate bid was on the money exactly.</p>
                    </div>

                    <div class="page" grid="vertical" layout="center-center">
                        <img src="https://randomuser.me/api/portraits/men/17.jpg" size="300" mobile-size="150">
                        <h3>Justin O'Neill</h3>
                        <h4>Beaumont, Texas</h4>
                        <p mobile-width=".8" tablet-width=".75" desktop-width=".5" desktop-max-width="600px">This company is top notch, on task, and gets the job done! Clearly outstanding, honest, and reliable in work and service--AND a reasonable price! The estimate bid was on the money exactly.</p>
                    </div>

                    <div class="page" grid="vertical" layout="center-center">
                        <img src="https://randomuser.me/api/portraits/men/27.jpg" size="300" mobile-size="150">
                        <h3>Justin O'Neill</h3>
                        <h4>Beaumont, Texas</h4>
                        <p mobile-width=".8" tablet-width=".75" desktop-width=".5" desktop-max-width="600px">This company is top notch, on task, and gets the job done! Clearly outstanding, honest, and reliable in work and service--AND a reasonable price! The estimate bid was on the money exactly.</p>
                    </div>
                </iron-swipeable-pages>

                <fx-skew bg="white"></fx-skew>
            </component-page>
        <!--  Content
        ---------------------------------------------------------------------------------------------------------------->

    </template>

    <script>

        Polymer({
          is: "page-testimonials",

          properties: {
              selectedTestimonial: {
                  type: Number,
                  value: 0
              },
          },

          _PrevClick: function() {
              selectedTestimonial = selectedTestimonial === 0 ? 2 : (selectedTestimonial - 1);
          },

          _NextClick: function() {
              selectedTestimonial = selectedTestimonial === 2 ? 0 : (selectedTestimonial + 1);
          }

        });

    </script>

    </dom-module>

[MeTaNoV]

in your _PrevClick and _NextClick, you should use this.selectedTestimonial! But this is not really an issue with the component itself! :)

[oneezy]

Hi @MeTaNoV , thanks! Apologies.. didn't mean to make it sound like there was an issue with your component.

I've made the changes and it is working..however, when clicking on "prev/next" arrows, it's not simulating the "swipe/slide" effect..instead, it's a "hide/show" effect.

Sorry to be so cumbersome.. I'm still trying to get the gist of the declarative approach w/ custom elements.

Here's what I currently have:

<!-- Testimonial -->
<iron-swipeable-pages id="swipe" selected="{{selectedTestimonial}}" flex="1" width="100" show-arrow>
    <div class="page" grid="vertical" layout="center-center">
        1
    </div>

    <div class="page" grid="vertical" layout="center-center">
        2
    </div>

    <div class="page" grid="vertical" layout="center-center">
        3
    </div>
</iron-swipeable-pages>

<script>

    Polymer({
      is: "page-testimonials",

      properties: {
          selectedTestimonial: {
              type: Number,
              value: 0
          },
      },

      _PrevClick: function() {
        var pages = this.$.swipe.querySelectorAll('.page');
        var max = (pages && pages.length - 1) || 0;
        this.selectedTestimonial = this.selectedTestimonial === 0 ? max : (this.selectedTestimonial - 1);
      },

      _NextClick: function() {
        var pages = this.$.swipe.querySelectorAll('.page');
        var max = (pages && pages.length - 1) || 0;
        this.selectedTestimonial = this.selectedTestimonial === max ? 0 : (this.selectedTestimonial + 1);
      }

    });

</script>

[MeTaNoV]

there was a small issue introduced with 1.2.4, are you using the latest version of the element? (1.2.5) The latest should be working fine normally! Also, if you find the component useful, do not hesitate to star it here on GH! :)

[oneezy]

@MeTaNoV , updated to 1.2.5 and it works like a charm! Appreciate the tip. Also, you should update the version number in your bower.json, I noticed that it's still showing 1.2.3

Stared.

[MeTaNoV]

bower.json updated, thx! ;)