Fixed height, dynamic width

Hello @jokermanu ! I’m happy that you found the plugin useful. You can create fixed heights with custom CSS. There is no option for dynamic widths however I will add the feature for possible implementation in a future version. At this moment the carousel uses minimal styling, giving developers all the control. Custom CSS is required for layouts with fixed heights.

@jokermanu i would need a link to your website to see the carousel.

@jokermanu try adding this to your custom CSS (at the end of all stylesheets)

.wp-block-cb-carousel .slick-track {
  display: flex;
}

.wp-block-cb-carousel .wp-block-cb-slide {
  height: auto;
}

.wp-block-cb-carousel .gb-container, .wp-block-cb-carousel .gb-inside-container {
  height: 100%;
}

.wp-block-cb-carousel .wp-block-image {
  position: relative;
  overflow: hidden;
}

.wp-block-cb-carousel .wp-block-image:before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.wp-block-cb-carousel .wp-block-image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
}

It will set all the slides to same height (based on the tallest slide). It also sets all the images to the same height but may cause some cropping so make sure you’re using proper image sizes. If you want to change the height of images just adjust padding-bottom: 100%; in .wp-block-cb-carousel .wp-block-image:before { ... }. You can go above 100% if you want the images to be higher.

Just a note, the first two selectors will set all the slides to be the same height:

.wp-block-cb-carousel .slick-track {
  display: flex;
}

.wp-block-cb-carousel .wp-block-cb-slide {
  height: auto;
}

For any inner slide blocks, use height 100% to expand and custom CSS. Each block will need different CSS to expand.

The CSS that I provided is based on the blocks that you have now in the slides. Of course if you change the blocks/html the CSS might not work. For this reason it is up to the developer to use custom CSS. it will be different for each block.

• This reply was modified 4 years, 1 month ago by Virgildia.
• This reply was modified 4 years, 1 month ago by Virgildia.
• This reply was modified 4 years, 1 month ago by Virgildia.
• This reply was modified 4 years, 1 month ago by Virgildia.

@jokermanu great! If you are happy with plugin please feel free to leave a rating/review 🙂 All the best!

• This reply was modified 4 years, 1 month ago by Virgildia.