Feature Request: Inline Control

[andrewspy]

Great work for the carousel component, I would like to request inline control, which is pretty common for modern web.

If there is no intention to implement it for whatever reason, I hope an example in the demo will show user how it can be done using the following hacky CSS mixin:-

/* Make control inline */
skeleton-carousel {
  --skeleton-carousel-controls-horizontal: {
    position: fixed;
    margin-top: calc(300px - 56px); /* 300px is the min-height of carousel */
    width: 100%;
  }
}

Thanks again!

[ernysans]

@andrewspy We don't plan to add this for our next release but we can consider it in a couple of weeks, we are working on several components at this moment.
@stivaliserna please take note so we can review it for a future version.

[ernysans]

@andrewspy I recommend you to apply position absolute to --skeleton-carousel-nav-prev and --skeleton-carousel-nav-next for now. We try not to use it at this time but can be helpful for what you need.

[andrewspy]

@ernysans Noted. Thanks!

[andrewspy]

I have made some changes on using CSS mixin to fix iOS and alignment issue, with a smaller dots. Just for sharing purpose.

/* Make controls inline */
skeleton-carousel {
  --skeleton-carousel-controls-horizontal: {
    position: absolute;
    margin-top: calc(300px - 40px); /* 300px is the min-height of carousel */
    width: calc(100% - 16px);
  }

  /* Make dots smaller */
  --skeleton-carousel-dot: {
    width: 24px;
    height: 24px;
    padding: 4px;
  }
}

[ernysans]

Will be implemented with this issue -> #26