flyonui/components/carousel.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.carousel{border-radius:var(--radius-2xl);width:100%;position:relative;overflow:hidden}.carousel-body{flex-wrap:nowrap;display:flex}.carousel-prev,.carousel-next{cursor:pointer;justify-content:center;align-items:center;height:max-content;margin-block:auto;display:inline-flex;position:absolute;inset-block:0}.carousel-prev.disabled,.carousel-next.disabled{pointer-events:none}.carousel-prev{border-start-start-radius:var(--radius-2xl);border-end-start-radius:var(--radius-2xl)}.carousel-next{border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-2xl)}.carousel-box{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);width:2.5rem;height:.25rem}.carousel-dot{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);border-radius:3.40282e38px;width:.75rem;height:.75rem}.carousel-body,.carousel-slide{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.7s;transition-duration:.7s}@media (width>=640px){.sm\:carousel{border-radius:var(--radius-2xl);width:100%;position:relative;overflow:hidden}.sm\:carousel-body{flex-wrap:nowrap;display:flex}.sm\:carousel-prev,.sm\:carousel-next{cursor:pointer;justify-content:center;align-items:center;height:max-content;margin-block:auto;display:inline-flex;position:absolute;inset-block:0}.sm\:carousel-prev.disabled,.sm\:carousel-next.disabled{pointer-events:none}.sm\:carousel-prev{border-start-start-radius:var(--radius-2xl);border-end-start-radius:var(--radius-2xl)}.sm\:carousel-next{border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-2xl)}.sm\:carousel-box{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);width:2.5rem;height:.25rem}.sm\:carousel-dot{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);border-radius:3.40282e38px;width:.75rem;height:.75rem}.sm\:carousel-body,.sm\:carousel-slide{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.7s;transition-duration:.7s}}@media (width>=768px){.md\:carousel{border-radius:var(--radius-2xl);width:100%;position:relative;overflow:hidden}.md\:carousel-body{flex-wrap:nowrap;display:flex}.md\:carousel-prev,.md\:carousel-next{cursor:pointer;justify-content:center;align-items:center;height:max-content;margin-block:auto;display:inline-flex;position:absolute;inset-block:0}.md\:carousel-prev.disabled,.md\:carousel-next.disabled{pointer-events:none}.md\:carousel-prev{border-start-start-radius:var(--radius-2xl);border-end-start-radius:var(--radius-2xl)}.md\:carousel-next{border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-2xl)}.md\:carousel-box{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);width:2.5rem;height:.25rem}.md\:carousel-dot{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);border-radius:3.40282e38px;width:.75rem;height:.75rem}.md\:carousel-body,.md\:carousel-slide{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.7s;transition-duration:.7s}}@media (width>=1024px){.lg\:carousel{border-radius:var(--radius-2xl);width:100%;position:relative;overflow:hidden}.lg\:carousel-body{flex-wrap:nowrap;display:flex}.lg\:carousel-prev,.lg\:carousel-next{cursor:pointer;justify-content:center;align-items:center;height:max-content;margin-block:auto;display:inline-flex;position:absolute;inset-block:0}.lg\:carousel-prev.disabled,.lg\:carousel-next.disabled{pointer-events:none}.lg\:carousel-prev{border-start-start-radius:var(--radius-2xl);border-end-start-radius:var(--radius-2xl)}.lg\:carousel-next{border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-2xl)}.lg\:carousel-box{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);width:2.5rem;height:.25rem}.lg\:carousel-dot{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);border-radius:3.40282e38px;width:.75rem;height:.75rem}.lg\:carousel-body,.lg\:carousel-slide{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.7s;transition-duration:.7s}}@media (width>=1280px){.xl\:carousel{border-radius:var(--radius-2xl);width:100%;position:relative;overflow:hidden}.xl\:carousel-body{flex-wrap:nowrap;display:flex}.xl\:carousel-prev,.xl\:carousel-next{cursor:pointer;justify-content:center;align-items:center;height:max-content;margin-block:auto;display:inline-flex;position:absolute;inset-block:0}.xl\:carousel-prev.disabled,.xl\:carousel-next.disabled{pointer-events:none}.xl\:carousel-prev{border-start-start-radius:var(--radius-2xl);border-end-start-radius:var(--radius-2xl)}.xl\:carousel-next{border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-2xl)}.xl\:carousel-box{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);width:2.5rem;height:.25rem}.xl\:carousel-dot{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);border-radius:3.40282e38px;width:.75rem;height:.75rem}.xl\:carousel-body,.xl\:carousel-slide{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.7s;transition-duration:.7s}}@media (width>=1536px){.\32 xl\:carousel{border-radius:var(--radius-2xl);width:100%;position:relative;overflow:hidden}.\32 xl\:carousel-body{flex-wrap:nowrap;display:flex}.\32 xl\:carousel-prev,.\32 xl\:carousel-next{cursor:pointer;justify-content:center;align-items:center;height:max-content;margin-block:auto;display:inline-flex;position:absolute;inset-block:0}.\32 xl\:carousel-prev.disabled,.\32 xl\:carousel-next.disabled{pointer-events:none}.\32 xl\:carousel-prev{border-start-start-radius:var(--radius-2xl);border-end-start-radius:var(--radius-2xl)}.\32 xl\:carousel-next{border-start-end-radius:var(--radius-2xl);border-end-end-radius:var(--radius-2xl)}.\32 xl\:carousel-box{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);width:2.5rem;height:.25rem}.\32 xl\:carousel-dot{cursor:pointer;background-color:color-mix(in oklab,var(--color-neutral)30%,transparent);border-radius:3.40282e38px;width:.75rem;height:.75rem}.\32 xl\:carousel-body,.\32 xl\:carousel-slide{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.7s;transition-duration:.7s}}}