List Carousel – Move ImageTitle Same line

To create a List Carousel with style like this.

You can add a List Carousel and enable these options

In each item, use info like this

Next, use this code to Page Header Injection

<!-- @tuanphan - 01/10/2024 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
   setTimeout(function(){
   $('.list-item-content__title').each(function() {
    var title = $(this);
    var mediaContainer = title.closest('.list-item').find('.user-items-list-carousel__media-container');
    title.appendTo(mediaContainer);
  });
                 }, 3000);
  
});

</script>
<style>
li.user-items-list-carousel__slide.list-item {
    flex-direction: column-reverse;
}
.user-items-list-carousel__media-container {
    display: flex;
    align-items: center;
}
.user-items-list-carousel__media-inner {
    padding: unset !important;
    height: auto !important;
    width: 50px;
    height: 50px;
}
img.user-items-list-carousel__media {
    position: relative !important;
    border-radius: 50%;
}
h2.list-item-content__title {
    font-weight: 600;
    font-size: 18px !important;
    margin-left: 20px !important;
}
  .list-item-content {
    margin-bottom: 20px;
}
</style>

Result