Marquee

文字以及内容的横向纵向轮播

示例

水平正向内容跑马灯

<nut-marquee class="demo1" :gap='gap' :speed="10">
    <template slot >
        <div v-for="(d, idx) in slotDatas" :key='idx' class="txt"><a>www.jd.com</a>{{d}}</div>
    </template>
</nut-marquee>

水平逆向内容跑马灯

我是一个轮播图，我有好多数字，一个屏幕看不到，只能看到一部分，轮播开始了1,前提是我必须超过屏幕容器的宽度才可以哦，这么长的文字都没有超过

我是一个轮播图，我有好多数字，一个屏幕看不到，只能看到一部分，轮播开始了1,前提是我必须超过屏幕容器的宽度才可以哦，这么长的文字都没有超过

<nut-marquee class="demo1" :gap='gap' :reverse="true" :speed='30'>
    <template slot>
        <div class="txt">我是一个轮播图，我有好多数字，一个屏幕看不到，只能看到一部分，轮播开始了1,前提是我必须超过屏幕容器的宽度才可以哦，这么长的文字都没有超过</div>
    </template>
</nut-marquee>

垂直正向内容跑马灯

<nut-marquee class="demo1" 
    :speed='30' 
    :height="demo3Height" 
    :direction='v'
    :gap="gap">
    <div class="txt1">我是垂直轮播图1</div>
    <div class="txt1">我是垂直轮播图2</div>
    <img class="img" src='//nutui.jd.com/asset/img/nutui-logo-2.png'/>
    <div class="txt1">我是垂直轮播图3</div>
</nut-marquee>

垂直逆向内容跑马灯

<nut-marquee class="demo1" 
    :speed='10' 
    :gap= 'gap'
    :height="demo3Height" 
    :direction='v'
    :reverse="true">
    <div class="txt1">我是垂直轮播图1</div>
    <div class="txt1">我是垂直轮播图2</div>
    <img class="img" src='//nutui.jd.com/asset/img/nutui-logo-2.png'/>
    <div class="txt1">我是垂直轮播图3</div>
    <div class="txt1">我是垂直轮播图4</div>
</nut-marquee>

Props