Ant Design Vue revolving lantern realizes carousel of multiple pictures on a single page

A recent project has a demand for this kind of carousel effect of scrolling one picture at a time with multiple pictures on a single page. The project component library is antd, vue3

 

However, the revolving lantern with antd looks like this

 We can see that the api provided by the official website does not have this function, and Baidu mostly uses css, which is cumbersome after all. What are we? We are programmers, and programmers should look like programmers. How can we write cumbersome things, and how can we improve the efficiency of company projects! ! !

​

However, there are too many contents that make me dazzled. In the end, I try to read the literal meaning one by one. The hard work pays off. That’s it, go Pikachu

​

:slides-to-show="5"//Show 5 pictures on a single page :slides-to-scroll="1" //Scroll 1 picture each time

<template>
  <div class="layoutFootBottoms" id="Footer">
      <a-carousel arrows :dots="false" :autoplay="false"  :slides-to-show="6" :slides-to-scroll="1">
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
            <img src="../assets/img/recommend_left.png" alt="">
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 20px">
            <img src="../assets/img/recommend_right.png" alt="">
          </div>
        </template>
          <div v-for="(item,index) in layoutHeaderRs" :key="item.key">
              <div @click="clickModal(item.titleText)"  class="layoutfootTogethers" style="align-items: center;witdh:288px;padding:60px">
                  <div class="layoutHeaderRs_footIamgs">
                    <img  :src="item.url" alt=""  />
                  </div>
                  <h2 class="layoutfootTextCor">{
   
   {item.titleText }}</h2>
              </div>
          </div>
      </a-carousel>

      <div class="common-layout-footer-text">
        Copyright2023   华宝都鼎（上海）融资租赁有限公司   版权所有
      </div>
            
       <div class="addappliactionModal">
          <a-modal
              v-model:visible="visible"
              title="添加至我的平台"
              centered
              :confirm-loading="confirmLoading"
              @ok="handleOk"
            >
                  <div class="addappliactionF" >
                    <a-checkbox
                      v-model:checked="checkAll"
                      :indeterminate="indeterminate"
                      @change="onCheckAllChange"
                      style="width:14%"
                    >
                    全部
                    </a-checkbox>
                    <a-checkbox-group v-model:value="checkedList" :options="plainOptions" style="width: 70%;margin-left:1rem">
                        <a-row>
                          <template v-for="option in plainOptions">
                            <a-col :span="8">
                              <a-checkbox :value="option">{
   
   { option }}</a-checkbox>
                            </a-col>
                          </template>
                        </a-row>
                    </a-checkbox-group>
                  </div>
          </a-modal>
       </div>
  </div>
</template>
<script >
import {ref, defineComponent, reactive, toRefs, watch } from 'vue';
import getAssetURL from "@/utils/publicuse.js";
const  plainOptions = ['大单租赁', '投资核心系统', 'CRM','数据中心','智慧报告','小微租赁'];
const  layoutHeaderRs= [ { key: "1",url: getAssetURL("financeLeasing.png"), titleText:"大单租赁"},
        {key: "2", url: getAssetURL("investCoresystem.png"), titleText:"投资核心系统"},
        { key: "3",url: getAssetURL("crmSystem.png"),titleText:"CRM"},
        {key: "4",url: getAssetURL("dataCenter.png"),titleText:"数据中心" },
        {key: "5",url: getAssetURL("wisdomReports.png"),titleText:"智慧报告"},
        {key: "6",url: getAssetURL("add_application.svg"),titleText:"我的应用" },
       ]
export default defineComponent({
  setup() {
    const modalText = ref("Content of the modal");
    const visible = ref(false);
    const confirmLoading = ref(false);
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: ['大单租赁', '投资核心系统', 'CRM','数据中心','智慧报告','小微租赁'],
    });

    const clickModal =(application)=>{
      console.log(application);
      if(application=='我的应用'){
        visible.value = true;
      }
    }
    const onCheckAllChange = e => {
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
      });
    };
    const handleOk = () => {
        modalText.value = "The modal will be closed after two seconds";
        confirmLoading.value = true;
        setTimeout(() => {
          visible.value = false;
          confirmLoading.value = false;
        }, 2000);
      };
    watch(() => state.checkedList, val => {
      state.indeterminate = !!val.length && val.length < plainOptions.length;
      state.checkAll = val.length === plainOptions.length;
    });
    return {
      ...toRefs(state),
      visible,
      confirmLoading,
      handleOk,
      plainOptions,
      layoutHeaderRs,
      onCheckAllChange,
      clickModal
    };
  },
});
</script>

<style scoped lang="less">
:deep .slick-slide slick-active slick-cloned {
  width:0px;
}
.layoutHeaderRs_footIamgs {
  width: 10rem;
  height:10rem;
  margin-left: 1.2rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
  &:hover,
  &.active {
    border: 2px solid #27ba9b;
  }
}


.layoutFootBottoms{
  width: 100vw;
  position: fixed;
  bottom: 0;
  
}
/* For demo */
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  background: #fdfdfd;
  overflow: hidden;
}

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) img {
  width: 2.5rem;
  height:  2.5rem;
  font-size:  3.5rem;
  // color: #fff;
  // background-color: rgba(31, 45, 61, 0.11);
  // opacity: 1;  
  // z-index: 1;
}
// .ant-carousel :deep(.custom-slick-arrow:before) {
//   background: #EEEEEE;
//   box-shadow: 1px 0 3px 0 rgba(218,218,218,0.70);
//   display: none;
// }
.ant-carousel :deep(.custom-slick-arrow:hover) {
  // opacity: 0.5;
  // background: #EEEEEE;
  // box-shadow: 1px 0 3px 0 rgba(218,218,218,0.70);
}

// .ant-carousel :deep(.slick-slide h3) {
//   color: #fff;
// }
.layoutfootTextCor{
  font-family: MicrosoftYaHei-Bold;
  font-size: 12px;
  color: #232323;
  text-align: center;
  font-weight: 700;
  position: absolute;
  margin-top: 12rem;
}
// .layoutfootTextCor1{
//   font-family: MicrosoftYaHei-Bold;
//   font-size: 12px;
//   color: #fff;
//   text-align: center;
//   font-weight: 700;
//   position: absolute;
//   margin-top: 12rem;
// }
:deep .layoutfootTogethers{
  display: flex;
  justify-content: center;
  height: 16.5rem;
  cursor: pointer;
  background-image: linear-gradient(225deg, #FFFFFF 0%, #F7F7F7 100%);
  border: 1px solid #ECECEC;
  // background-image: linear-gradient(227deg, #EF3856 0%, #B30031 100%);
  // box-shadow: 0 0 6px 0 #6C081C;
}
// :deep .layoutHeaderRs_footIamgs1{
//   height:23rem;
//   img {
//     width: 100%;
//     height: 100%;
//   }
//   display: flex;
//   justify-content: center;
//   position: absolute;
//   background-image: linear-gradient(227deg, #EF3856 0%, #B30031 100%);
//   box-shadow: 0 0 6px 0 #6C081C;
// }

.common-layout-footer-text{
  height: 4.4rem;
  line-height: 4.4rem;
  background: #ffffff;
}
:deep  .ant-checkbox-group-item {
  margin-right: .8rem;
  margin-bottom: 2.8rem;
}

/deep/ .addappliactionModal  :deep(.ant-modal-content) {
    position: relative;
    background-clip: padding-box;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    pointer-events: auto;
    background: #F4F4F5 ;
    border: 5px solid rgba(0,0,0,0.26) ;
    border-radius: 10p ;
}
.addappliactionF{
  display:flex;
  padding:20px;
  background: #FFFFFF;
  border: 1px solid #C8C8C8;
  border-radius: 12px;
}
</style>

Finally, a display of the effect