# Swap events cards and timeline (Carousel layout)

**URL:** <https://community.elfsight.com/t/swap-events-cards-and-timeline-carousel-layout/127007>\
**Category:** Timeline\
**Created:** [June 19, 2025, 2:10pm UTC](https://community.elfsight.com/t/swap-events-cards-and-timeline-carousel-layout/127007 "2025-06-19T14:10:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 19, 2025, 2:10pm UTC](https://community.elfsight.com/t/swap-events-cards-and-timeline-carousel-layout/127007/1 "2025-06-19T14:10:55Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your [Timeline](https://elfsight.com/timeline-widget/) widget’s settings:

```auto
.es-snap-carousel-item {
    flex-direction: column-reverse;
  }
  
  .es-snap-carousel-item 
  [class*="carousel__Column-sc"]:last-child {
    margin-top: 0;
    margin-bottom: 20px;
  }
  .es-carousel-track-fog {
    top: 0 !important;
    bottom: calc(100% - 75px) !important;
  }
  
  .es-carousel-track-container {
    top: 20px !important;
    bottom: unset !important;
  }

```