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

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.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