Carousel 走马灯

旋转木马,一组轮播的区域。

何时使用

  • 当有一组平级的内容。
  • 当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
  • 常用于一组图片或卡片轮播。

    代码演示

Carousel走马灯 - 图1

基本

最简单的用法。

  1. <template>
  2. <a-carousel :after-change="onChange">
  3. <div><h3>1</h3></div>
  4. <div><h3>2</h3></div>
  5. <div><h3>3</h3></div>
  6. <div><h3>4</h3></div>
  7. </a-carousel>
  8. </template>
  9. <script>
  10. export default {
  11. methods: {
  12. onChange(a, b, c) {
  13. console.log(a, b, c);
  14. },
  15. },
  16. };
  17. </script>
  18. <style scoped>
  19. /* For demo */
  20. .ant-carousel >>> .slick-slide {
  21. text-align: center;
  22. height: 160px;
  23. line-height: 160px;
  24. background: #364d79;
  25. overflow: hidden;
  26. }
  27. .ant-carousel >>> .slick-slide h3 {
  28. color: #fff;
  29. }
  30. </style>

Carousel走马灯 - 图2

位置

位置有 4 个方向。

  1. <template>
  2. <div>
  3. <a-radio-group v-model="dotPosition" style="margin-bottom: 8px">
  4. <a-radio-button value="top">
  5. Top
  6. </a-radio-button>
  7. <a-radio-button value="bottom">
  8. Bottom
  9. </a-radio-button>
  10. <a-radio-button value="left">
  11. Left
  12. </a-radio-button>
  13. <a-radio-button value="right">
  14. Right
  15. </a-radio-button>
  16. </a-radio-group>
  17. <a-carousel :dot-position="dotPosition">
  18. <div><h3>1</h3></div>
  19. <div><h3>2</h3></div>
  20. <div><h3>3</h3></div>
  21. <div><h3>4</h3></div>
  22. </a-carousel>
  23. </div>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. dotPosition: 'top',
  30. };
  31. },
  32. };
  33. </script>
  34. <style scoped>
  35. /* For demo */
  36. .ant-carousel >>> .slick-slide {
  37. text-align: center;
  38. height: 160px;
  39. line-height: 160px;
  40. background: #364d79;
  41. overflow: hidden;
  42. }
  43. .ant-carousel >>> .slick-slide h3 {
  44. color: #fff;
  45. }
  46. </style>

Carousel走马灯 - 图3

渐显

切换效果为渐显。

  1. <template>
  2. <a-carousel effect="fade">
  3. <div><h3>1</h3></div>
  4. <div><h3>2</h3></div>
  5. <div><h3>3</h3></div>
  6. <div><h3>4</h3></div>
  7. </a-carousel>
  8. </template>
  9. <script>
  10. export default {};
  11. </script>
  12. <style scoped>
  13. /* For demo */
  14. .ant-carousel >>> .slick-slide {
  15. text-align: center;
  16. height: 160px;
  17. line-height: 160px;
  18. background: #364d79;
  19. overflow: hidden;
  20. }
  21. .ant-carousel >>> .slick-slide h3 {
  22. color: #fff;
  23. }
  24. </style>

Carousel走马灯 - 图4

自动切换

定时切换下一张。

  1. <template>
  2. <a-carousel autoplay>
  3. <div><h3>1</h3></div>
  4. <div><h3>2</h3></div>
  5. <div><h3>3</h3></div>
  6. <div><h3>4</h3></div>
  7. </a-carousel>
  8. </template>
  9. <script>
  10. export default {};
  11. </script>
  12. <style scoped>
  13. /* For demo */
  14. .ant-carousel >>> .slick-slide {
  15. text-align: center;
  16. height: 160px;
  17. line-height: 160px;
  18. background: #364d79;
  19. overflow: hidden;
  20. }
  21. .ant-carousel >>> .slick-slide h3 {
  22. color: #fff;
  23. }
  24. </style>

Carousel走马灯 - 图5

自定义分页

自定义分页展示。

  1. <template>
  2. <a-carousel arrows dots-class="slick-dots slick-thumb">
  3. <a slot="customPaging" slot-scope="props">
  4. <img :src="getImgUrl(props.i)" />
  5. </a>
  6. <div v-for="item in 4">
  7. <img :src="baseUrl + 'abstract0' + item + '.jpg'" />
  8. </div>
  9. </a-carousel>
  10. </template>
  11. <script>
  12. const baseUrl =
  13. 'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/';
  14. export default {
  15. data() {
  16. return {
  17. baseUrl,
  18. };
  19. },
  20. methods: {
  21. getImgUrl(i) {
  22. return `${baseUrl}abstract0${i + 1}.jpg`;
  23. },
  24. },
  25. };
  26. </script>
  27. <style scoped>
  28. /* For demo */
  29. .ant-carousel >>> .slick-dots {
  30. height: auto;
  31. }
  32. .ant-carousel >>> .slick-slide img {
  33. border: 5px solid #fff;
  34. display: block;
  35. margin: auto;
  36. max-width: 80%;
  37. }
  38. .ant-carousel >>> .slick-thumb {
  39. bottom: -45px;
  40. }
  41. .ant-carousel >>> .slick-thumb li {
  42. width: 60px;
  43. height: 45px;
  44. }
  45. .ant-carousel >>> .slick-thumb li img {
  46. width: 100%;
  47. height: 100%;
  48. filter: grayscale(100%);
  49. }
  50. .ant-carousel >>> .slick-thumb li.slick-active img {
  51. filter: grayscale(0%);
  52. }
  53. </style>

Carousel走马灯 - 图6

自定义箭头

自定义箭头展示。

  1. <template>
  2. <a-carousel arrows>
  3. <div
  4. slot="prevArrow"
  5. slot-scope="props"
  6. class="custom-slick-arrow"
  7. style="left: 10px;zIndex: 1"
  8. >
  9. <a-icon type="left-circle" />
  10. </div>
  11. <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
  12. <a-icon type="right-circle" />
  13. </div>
  14. <div><h3>1</h3></div>
  15. <div><h3>2</h3></div>
  16. <div><h3>3</h3></div>
  17. <div><h3>4</h3></div>
  18. </a-carousel>
  19. </template>
  20. <script>
  21. export default {};
  22. </script>
  23. <style scoped>
  24. /* For demo */
  25. .ant-carousel >>> .slick-slide {
  26. text-align: center;
  27. height: 160px;
  28. line-height: 160px;
  29. background: #364d79;
  30. overflow: hidden;
  31. }
  32. .ant-carousel >>> .custom-slick-arrow {
  33. width: 25px;
  34. height: 25px;
  35. font-size: 25px;
  36. color: #fff;
  37. background-color: rgba(31, 45, 61, 0.11);
  38. opacity: 0.3;
  39. }
  40. .ant-carousel >>> .custom-slick-arrow:before {
  41. display: none;
  42. }
  43. .ant-carousel >>> .custom-slick-arrow:hover {
  44. opacity: 0.5;
  45. }
  46. .ant-carousel >>> .slick-slide h3 {
  47. color: #fff;
  48. }
  49. </style>

API

参数说明类型默认值版本
afterChange切换面板的回调function(current)
autoplay是否自动切换booleanfalse
beforeChange切换面板的回调function(from, to)
dotPosition面板指示点位置,可选 top bottom left rightstringbottom1.5.0
dots是否显示面板指示点booleantrue
dotsClass面板指示点类名stringslick-dots
easing动画效果stringlinear
effect动画效果函数,可取 scrollx, fadestringscrollx

方法

名称描述版本
goTo(slideNumber, dontAnimate)切换到指定面板, dontAnimate = true 时,不使用动画
next()切换到下一面板
prev()切换到上一面板

更多参数可参考:vc-slick props