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