aiforge/templates/custom/home/home_user_experience.tmpl

<style>
  .homeuserexp-bg {  
    background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(0.04900000000000009%2C%201.104%2C%20-0.06118479166666667%2C%200.04900000000000009%2C%200.339%2C%20-0.107)%22%3E%3Cstop%20stop-color%3D%22%23ffffff%22%20stop-opacity%3D%220.33%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23e5e7eb%22%20stop-opacity%3D%220.3%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
  }
  .homeuserexp {
    padding-top: 5em;
    padding-bottom: 2em;
  }

  .homeuserexp .swiper-prev {
    position: absolute;
    top: 104px;
    left: 14px;
    z-index: 10;
  }

  .homeuserexp .swiper-next {
    position: absolute;
    top: 104px;
    right: 14px;
    z-index: 10;
  }
  
  .homeuserexp .prev-next-i {    
    font-size: 22px;
    border: 1px solid rgb(0, 122, 255);
    border-radius: 100%;
    color: rgb(0, 122, 255);
    cursor: pointer;
  }
  
  .homeuserexp .swiper-prev.swiper-button-disabled .prev-next-i, .homeuserexp .swiper-next.swiper-button-disabled .prev-next-i {
    opacity: 0.35;
    cursor: default;
  }

  .home-user-exp-list {    
    position: relative;
    z-index: 9;
    padding: 0em 1.2em 3em 1.2em;
    overflow: hidden;
  }

  .home-user-exp-list .user-card {
    width: 240px;
    height: 180px;    
    color: rgb(16, 16, 16);
    border-radius: 6px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .home-user-exp-list .swiper-slide {
    display: flex;
    justify-content: center;
  }

  .home-user-exp-list .user-card>div {
    width:100%;
    display: flex;   
    justify-content: center;
  }

  .home-user-exp-list .user-card .content {
    width:100%;   
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding: 0 10px;
  }

  .home-user-exp-list .user-card .img-c {   
    font-size: 14px;
    color: #101010;
    display:flex;
    justify-content: center;
    align-items: center;   
    height: 74px;
    margin-bottom: 8px;
  }

  .home-user-exp-list .user-card .img {
    border: 3px solid rgb(243, 240, 164);
    border-radius: 100%;    
    box-shadow: rgb(255 220 144) 0px 0px 0px 2px;
    height: 60px;
    width: 60px;
    display: block;
    background-size:cover;
  }

  .home-user-exp-list .user-card .label {
    font-size: 14px;
    color: #101010;
    margin-bottom: 8px;
    font-weight: 550;
  }

  .home-user-exp-list .user-card .descr {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    font-size:12px;
    color:rgb(136,136,136);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 50px;
    height: 40px;
    white-space: break-spaces;
  }
</style>
<div class="homeuserexp-bg">
  <div class="ui container homeuserexp _hm-container">
    <div class="ui stackable grid">
      <div class="sixteen wide tablet four wide computer column mobile-text-align-center">
        <h2>{{.i18n.Tr "home.experience_officer"}}</h2>
        <p><a href="https://openi.org.cn/index.php?m=content&c=index&a=lists&catid=220">{{.i18n.Tr "home.openi_experience_officer_plan"}}</a><span class="ui text grey">{{.i18n.Tr "home.more_benefits"}}</span></p>
      </div>
      <div class="sixteen wide tablet twelve wide computer column">      
        <div class="home-user-exp-list">
          <div class="swiper-wrapper" id="home_user-exp"></div>
          <div style="display:none;" class="swiper-button-prev"></div>
          <div style="display:none;" class="swiper-button-next"></div>
        </div>
        <div class="swiper-prev"><i class="ri-arrow-left-line prev-next-i"></i></div>
        <div class="swiper-next"><i class="ri-arrow-right-line prev-next-i"></i></div>
      </div>
    </div>        
  </div>
</div>