Carousel貌似不支持无缝切换

billwing commented 11 years ago

Carousel.js,因为在项目中经常的需求是，panels != step * n，这样就会导致element出现空白，而不是真正的无缝切换，请问这个问题应该怎样解决呢？

afc163 commented 11 years ago

旋转木马目前支持的效果很差，后续需要重构。

lizzie commented 11 years ago

暂时是可以这样解决的. 仅限 circular: false 的情况下,

内部有个 length 值表示有多少屏可以切换, 计算是 panels.length / step 上取整. 一般情况下, 配置中的 viewsize (可视区域大小) 应该和每一屏的大小是一致的, 这样在切换时就没有任何空白.

但很多需求不是这样的, 比如切一屏滚动一个, 但可视区域是多个, 这样有时就有空白.

类似于 http://aralejs.org/switchable/examples/carousel-special.html 这个例子, 但这里的配置项:

        step: 2,
        viewSize: [396],
        circular: false,

这里, 可视区域 viewsize 是你切换一屏时切几个 panel 的宽度, 这样就可以推算出, 需要切几屏, 类似例子中的, panels.length为 3 个, 每屏切一个, 避免空白后的屏数 length 应 2 屏, 那么, 可以根据 length == Math.ceil(this.panels.length / this.get('step')) 推算出 step 为 1.5 至 2.

当 panels.length 为 4 个, 每屏还是切一个, 正确地屏数是 3, 那么, 推算出 step 为 1.5 至 1.9.

依次类推. 这个方法是山寨了点, 但没重构前可以这样解决下~~

lizzie commented 11 years ago

重构可参考这个 http://gallery.kissyui.com/slide/1.1/guide/index.html?spm=0.0.0.0.y0MYuZ

leoner commented 11 years ago

这个组件最早就是源于 kissy 的. 今年 kissy 按照状态机的模式又重构了一遍,可以按照这个改下呀!

lizzie commented 11 years ago

转到 https://github.com/aralejs/switchable/issues/24

aralejs / switchable

Carousel貌似不支持无缝切换 #14