The HTML source of this page may be viewed at index.html, and the JavaScript that drives the following demos can be found in demos.js.
Each element that you place inside of the component will be wrapped in its own card of appropriate width. The height if the cards should be constant, and defined by how you style the elements you put in the component. By default, the <vue-swipe-cards> component assigns card widths to be the same as their parent element.
If you would like your full-width slider to start on a card other than index 0, you may set the :startIndex="1" prop to a positive, non-zero number. The slider will not animate to this card position on mount, but will start in that state.
Partial card widths are practical for illustrating to users that there is more content in this category to see if they scroll or swipe horizontally.
If writing your component template in Markup, you would use the attribute :num-cards-visible="2.5" to scale the cards such that 2.5 cards are visible within the width of the parent element.
If writing your component template in String Templates, you would use the attribute :numCardsVisible="3.5" to scale the cards such that 3.5 cards are visible within the width of the parent element.
This component makes use of a touch handling mixin which other components may benefit from using. You may add it to your component by means of mixins: [touchHandlingMixin], then adding @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" event listeners to the desired object.
The above event handlers will call locally defined methods of dragStart, dragMove, and dragEnd. Parameters provided are point and event. Coordinates of the point are localized to the coordinates of the interior of the element the listeners are bound to.