quasar-framework/src/components/carousel/carousel.mat.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-carousel
  overflow hidden
  position relative

.q-carousel-inner
  position relative
  height 100%

.q-carousel-slide
  flex 0 0 100%
  margin 0
  padding $carousel-padding

.q-carousel-track
  padding 0
  margin 0
  will-change transform
  display flex
  flex-wrap nowrap
  height 100%

  &.infinite-left > div:nth-last-child(2)
    order -1000
    margin-left -100%

  &.infinite-right > div:nth-child(2)
    order 1000

.q-carousel-left-arrow,
.q-carousel-right-arrow
  top 50%
  transform translateY(-50%)
  background $carousel-quick-nav-background
.q-carousel-left-arrow
  left 5px
.q-carousel-right-arrow
  right 5px

.q-carousel-quick-nav
  padding 2px 0
  background $carousel-quick-nav-background
  .q-icon
    font-size $carousel-quick-nav-icon-font-size !important
  .q-btn.inactive
    opacity .5
    .q-icon
      font-size $carousel-quick-nav-icon-inactive-font-size !important

.q-carousel-thumbnails
  will-change transform
  transition transform .3s
  transform translateY(105%)
  width 100%
  height auto
  max-height 60%
  overflow auto
  background black
  padding .5rem
  text-align center
  box-shadow 0 -3px 6px rgba(0, 0, 0, .16), 0 -5px 6px rgba(0, 0, 0, .23)

  &.active
    transform translateY(0)

  img
    height auto
    width 100%
    display block
    opacity .5
    will-change opacity
    transition opacity .3s
    cursor pointer
    border 1px solid black

  > div > div
    flex 0 0 108px

    &.active img, img.active
      opacity 1
      border-color white

.q-carousel-thumbnail-btn
  background $carousel-quick-nav-background
  top 5px
  right 5px

body.desktop .q-carousel-thumbnails img:hover
  opacity 1