Display carousel slider image and text side by side

Site URL: https://papaya-armadillo-7acs.squarespace.com/

Hello!

I need help with displaying the image on the left and the text on the right in my carousel slider found on the home page and also on this page.

I've managed to use code to get the proportions how I want it but just cannot find how to get the image to display on the side. Please help!!

You mean List Carousel: Client Experiences?

54 minutes ago, tuanphan said:

You mean List Carousel: Client Experiences?

Yes!!

Add to Page Header

<style>
  @media screen and (min-width:768px) {
  .user-items-list-carousel[data-alignment-vertical="top"] .user-items-list-carousel__slide {
    flex-direction: row !important;
    align-items: center;
}
.user-items-list-carousel__media-container {
    width: 50% !important;
}
.user-items-list-carousel__media {
    width: 50% !important;
}
  }
</style>

@tuanphan

Hi! I used your above code on my site but need help with the positioning of the image. Would like to move the image to the right so it is not overlapping with the arrows. How would I achieve this?

Thank you!

Site: https://clotheslyne.squarespace.com/
PW: loveandwar

On 2/21/2023 at 1:57 AM, ysong said:

@tuanphan

Hi! I used your above code on my site but need help with the positioning of the image. Would like to move the image to the right so it is not overlapping with the arrows. How would I achieve this?

 

Thank you!

Site: https://clotheslyne.squarespace.com/
PW: loveandwar

Which page are you referring to? I don't see it on homepage

@tuanphan Is it possible to achieve this with an ordinary carousel as well? Or only using the list carousel? I'm trying to utilise it to display blog carousels in this same way.

https://cinnamon-chinchilla-hg2d.squarespace.com/our-treatments
pw: essence

On 7/6/2023 at 7:15 AM, TheBrandMethod said:

@tuanphan Is it possible to achieve this with an ordinary carousel as well? Or only using the list carousel? I'm trying to utilise it to display blog carousels in this same way.

https://cinnamon-chinchilla-hg2d.squarespace.com/our-treatments
pw: essence

You can add this to Design > Custom CSS

/* Our Treatments Summary */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1688535711232_22373 .summary-thumbnail-outer-container {
    float: left;
    width: 20%;
    margin-right: 20px;
}
}

On 7/7/2022 at 5:37 PM, tuanphan said:

Add to Page Header

<style>
  @media screen and (min-width:768px) {
  .user-items-list-carousel[data-alignment-vertical="top"] .user-items-list-carousel__slide {
    flex-direction: row !important;
    align-items: center;
}
.user-items-list-carousel__media-container {
    width: 50% !important;
}
.user-items-list-carousel__media {
    width: 50% !important;
}
  }
</style>

@tuanphan Does this work if you only have the Personal Plan? If not, is there a workaround for those with the less expensive plan?

On 8/25/2023 at 9:22 AM, Cowfish23 said:

 

Yes. Possible with Personal Plan. 2 options

Option 1. You can edit current page > Add a Code Block (anywhere) > Then paste the code

Option 2. Add Page ID before the code and add to Custom CSS box. With this way, you need to share link to page where you use carousel, we can check Page ID and give you code

Hi @tuanphan,

I copied your initial script code to my list carroussel.

<style>
  @media screen and (min-width:768px) {
  .user-items-list-carousel[data-alignment-vertical="top"] .user-items-list-carousel__slide {
    flex-direction: row !important;
    align-items: center;
}
.user-items-list-carousel__media-container {
    width: 50% !important;
}
.user-items-list-carousel__media {
    width: 50% !important;
}
  }
</style>

But the image is way too far from the text. Is it possible to put both the image and the text in the center of the container?

Also, I dont know why the other slide appears since I didnt enable that function...

website page: https://okra-owl-sxw4.squarespace.com/services
pw: freelance

Thank you for your help!

On 10/18/2023 at 10:56 PM, abbiericher said:

Hi @tuanphan,

I copied your initial script code to my list carroussel.

<style>
  @media screen and (min-width:768px) {
  .user-items-list-carousel[data-alignment-vertical="top"] .user-items-list-carousel__slide {
    flex-direction: row !important;
    align-items: center;
}
.user-items-list-carousel__media-container {
    width: 50% !important;
}
.user-items-list-carousel__media {
    width: 50% !important;
}
  }
</style>

But the image is way too far from the text. Is it possible to put both the image and the text in the center of the container?

Also, I dont know why the other slide appears since I didnt enable that function...

website page: https://okra-owl-sxw4.squarespace.com/services
pw: freelance

Thank you for your help!

Use this code

<style>
  @media screen and (min-width:768px) {
  .user-items-list-carousel[data-alignment-vertical="top"] .user-items-list-carousel__slide {
    flex-direction: row !important;
    align-items: center;
}
.user-items-list-carousel__media-container {
    width: 50% !important;
}
.user-items-list-carousel__media {
    width: 50% !important;
}
    .user-items-list-carousel__media {
    left: unset !important;
    right: 0 !important;
}

.list-item-content__text-wrapper>* {
    margin-left: 10px !important;
}
  }
</style>

On 10/21/2023 at 7:29 AM, tuanphan said:

Use this code

<style>
  @media screen and (min-width:768px) {
  .user-items-list-carousel[data-alignment-vertical="top"] .user-items-list-carousel__slide {
    flex-direction: row !important;
    align-items: center;
}
.user-items-list-carousel__media-container {
    width: 50% !important;
}
.user-items-list-carousel__media {
    width: 50% !important;
}
    .user-items-list-carousel__media {
    left: unset !important;
    right: 0 !important;
}

.list-item-content__text-wrapper>* {
    margin-left: 10px !important;
}
  }
</style>

Awesome!!! Thank you so much!