Rotation

Picture scrolling

example

  <AmberPictureRotation 
    :picture-list="list" 
    :img-width="250" 
    :img-height="200" 
    :gap-width="75" 
    :big-height="240" 
    @callback="handlePictureStretchClick" 
    @handleBigImgCallback="handlePictureStretchClick"
  />

  <script>
  export default {
    data() {
      return {
        list: [{
          url: '/amber-ui/1.png',
          name: '1.png'
        },{
          url: '/amber-ui/2.png',
           name: '2.png'
        },{
          url: '/amber-ui/3.png',
           name: '3.png'
        },{
          url: '/amber-ui/4.png',
           name: '4.png'
        },{
          url: '/amber-ui/5.png',
           name: '5.png'
        },{
          url: '/amber-ui/6.png',
           name: '6.png'
        }]
      }
    },
    methods: {
      handlePictureStretchClick(item) {

      },
      handlePictureStretchClick() {}
    }
  };
</script>

Expand Copy Copy

PictureRotation Attributes

params	explain	type	necessary	default
width	width	number	no	960px
height	height	number	no	300px
gap-width	Image gap	number	no	88px
big-width	big image width	number	no	600px
big-height	big image height	number	no	250px
img-width	image width	number	no	300px
img-height	image height	number	no	226px
picture-list	image list	Array	yes	-

PictureRotation Events

event	explain	params
callback	Picture click callback	Picture click callback value
handleBigImgCallback	big picture click callback	Picture click callback value