12 lines
14 KiB
HTML
12 lines
14 KiB
HTML
<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/carousel.b7047a3d.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet><link href=client/chunk.fb378401.css rel=stylesheet><link href=client/chunk.94a6e723.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="Carousel | Svelma" property=og:title><meta content=跑马灯 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="has-shadow is-spaced navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="brand navbar-item svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>Carousel</h1> <h2 class=subtitle>跑马灯</h2></header> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input name=parameters type=hidden value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAYVQWo6sKg5kkGq1XHMAHJjSNUOEeFqR5bHLAlbg6xAyHAHeYANpxEeQ1rtChyih3COobwdTEDOWoP0AfVhXeIyjKcCCxB8kIApKTlR-7gAxX8_x4ClwgARxmVAwDYChkVwQhnWYQC4AAdkAgBZAAGDDALuIlAIAUTuQDkQAaQoAAhAA2KAAAVlAAFgAVRgZUACUSJonhlWVciGOnDoABkABFiGQ49qEKCgvz_K8_TQ3AKCCIjcP_ZhlFDbBQmgX8iX_X8KVJCkMPwO4MOQoIdP_RTUBECBUksv922lK4HOrJcHP0wzjNM1CVL_UCOjCOzbAcgBODCADJ6iud9mGaL8fz0_9gLAiCoPQGC4IQiLsx8UyMLuCK4AgAAvIowFCyrQpkIysMi0CfFQAAOSL0B8SKKHa9AIrALhmB8CSYAoAB-WE3wpSiKVColwqaolkIi_rsEo5CKWwIkMLWzAjKa5CwFJbBQopVBUGQzAiXopqwEo3EMJgEcZAZHc4qhfdD2PbBT0wc9-jKWSYDvXFXyfF830_b9AMAlLwNGdLMvg7IkN8v9MOw_9cII5S_1IijqLopiWPYzjuN4-j-OE0TxMk6T_vkxTlN0v81I0rSoA8u4DKMkyzIsvzrNs-y_KcstecZtyeHZznvLMhyAqCwXGfCqKwRi8HEoA5KQJhyDoNghHmBytU8qwwrirKnwKqqmq6vqxqWoitqOq6nq-oGyTRpgcbJum2b5sWnxltW9bNuwbaMN2_bDuO07zsu67bvux7Tme5o9zKA8uCPE8zwvP7Rlve9gefV9YviiGkqArW0t1rLEf_FD0KwnC8P_QjiLIqjaIY5i2I4rieL4oJBJEsSaGp0kZPzmA6aUhzma4TTTzZvzPK5nzRasoIbOChzheCVytQlleOa87nfMZuWXAV_8leioJS4l8uNcr1LYZr_XDZ4Y2CqK0ryqq6qtUsIRQas1Vq7UIqdQwt1Xq_VBojTGj4CaU0Zrhz9ktFaa0NpbR2ntA6R0TpnQuldG6qA7oPSeruaEGcs6fRzr9f6gMHwgxLmrSGmtX46wynrBCSNG5oz_BjVuWMcad3xj3Im_dSbkxHlTIaNMp4zwZqpdSC9WaS1PuvBy_Md5C2chvP84sNFrxln5S-ujFaRTvg_BK7CX7azhjw7In9v6mz_hbAB1s6ogLtuAp20CXZwPdog5BPs0ELQwUHbBodcGRwITHYh8cyH3TiAAXXjJYLkVYax1gcJyTs3ZezmCXMwFc6A4A-GACUspcABwckcHmEAPBUDEFcNeOEtB6DIBAFocs3TQgrCEOOUY4QlCoF4LAEAcgxBBGKl0kAFJCAYSWVMkAaYRBCRgIURQ6BiAQHgBwboXBwhD3QOELYQgAB69FKSECJKsrUUAoAdB4FcxZRlKQPNwE8l5U5nkHjOf0LgZAJS6EuaFMkhB6JfJ-TwP5HQAXhHQDyGAJy0RQDEFcm5x5SQwueXCvgCKFDhHHIIMFJJlm4rkI8_F8LEXBFhEELFSyoWrOKkEEQkQXBXMpZ8kUaZtlpl2fshA3TSUll0PwVgbw2VFlGEIKV8AZRyAAAIIkVCiNEKwygIhYJqugKxwiaiyAqgQSrVlDAnKa6VMoRTZNrMwUVoAhjQEwEIGlLzzCRFWRmZguAXVQDdboD16pIheuRKs9Z7quhTnMG8LszBEDrNtB0P1Aa3VyHjYqIZEAOXmB4B0bALhiBsp9ImqNuh2UiHzYW4tXrwhRukE2oAA> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div class="preview svelte-1wq1kbn" slot=preview><div class="carousel-container svelte-ojpgsr swiper-container"><div class=swiper-wrapper><div class=swiper-slide><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e" style=width:100%;height:100%> </div><div class=swiper-slide><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e" style=width:100%;height:100%> </div><div class=swiper-slide><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e" style=width:100%;height:100%> </div><div class=swiper-slide><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e" style=width:100%;height:100%> </div></div> <div class=swiper-pagination></div> <div class=swiper-button-prev></div> <div class=swiper-button-next></div></div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
|
import { Carousel } from 'svelma-pro'
|
|
|
|
let options = [
|
|
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e',
|
|
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e',
|
|
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e',
|
|
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp1-q.mafengwo.net%2Fs7%2FM00%2F25%2FE2%2FwKgB6lPh4UeARKPpAABh4pruLDc72.jpeg%3FimageMogr2%252Fthumbnail%252F%21310x207r%252Fgravity%252FCenter%252Fcrop%252F%21310x207%252Fquality%252F90&refer=http%3A%2F%2Fp1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619590857&t=b671b501bd1087f3b91aa7d548f6ea0e'
|
|
];
|
|
</script>
|
|
|
|
<Carousel options={options} /></code></pre></figure></div> </div></div> <hr class=is-medium> <section><h2 class="title is-4">API</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>options</code></td> <td>图片列表(url路径数组)</td> <td>Array</td> <td>—</td> <td><code></code></td> <tr><td><code>pagination</code></td> <td>底部指示器</td> <td>Boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>navigation</code></td> <td>左右导航按钮</td> <td>Boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>autoplay</code></td> <td>自动播放</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>delay</code></td> <td>自动播放时长</td> <td>Number</td> <td>—</td> <td><code>3000</code></td> <tr><td><code>direction</code></td> <td>方向</td> <td>String</td> <td>horizontal,vertical</td> <td><code>horizontal</code></td> <tr><td><code>loop</code></td> <td>循环</td> <td>Boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>disableOnInteraction</code></td> <td>滑动禁止自动播放</td> <td>Boolean</td> <td>—</td> <td><code>true</code></td> <tr><td><code>effect</code></td> <td>切换特效</td> <td>String</td> <td>slide,fade,cube,coverflow,flip</td> <td><code>slide</code></td> </table></div></section> </div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b,c,d){return {jsdoc:[{description:"图片列表(url路径数组)",type:["Array"],defaultvalue:[],name:"options",values:a},{description:"底部指示器",type:[b],defaultvalue:c,name:"pagination",values:a},{description:"左右导航按钮",type:[b],defaultvalue:c,name:"navigation",values:a},{description:"自动播放",type:[b],defaultvalue:false,name:"autoplay",values:a},{description:"自动播放时长",type:["Number"],defaultvalue:3000,name:"delay",values:a},{description:"方向",type:[d],defaultvalue:"horizontal",name:"direction",values:"horizontal,vertical"},{description:"循环",type:[b],defaultvalue:c,name:"loop",values:a},{description:"滑动禁止自动播放",type:[b],defaultvalue:c,name:"disableOnInteraction",values:a},{description:"切换特效",type:[d],defaultvalue:"slide",name:"effect",values:"slide,fade,cube,coverflow,flip"}]}}("","Boolean",true,"String"))]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script> |