diff options
1 files changed, 33 insertions, 20 deletions
| -rw-r--r-- | src/carousels.less | 53 |
diff --git a/src/carousels.less b/src/carousels.less index e826840..99b0a9c 100644 --- a/src/carousels.less +++ b/src/carousels.less @@ -11,7 +11,6 @@ height: 100%; left: 0; position: relative; - //animation: carousel-autoplay 15s infinite; .carousel-item { animation: carousel-slideout 1s 1; @@ -22,12 +21,36 @@ position: absolute; top: 0; width: 100%; + + &:hover { + .item-prev, + .item-next { + opacity: 1; + } + } + } + + .item-prev, + .item-next { + background: fade(@light-gray-color, 25%); + border-color: fade(@light-gray-color, 50%); + color: @light-gray-color; + opacity: 0; + position: absolute; + top: 50%; + transition: all .4s ease; + transform: translateY(-50%); + z-index: 99; + } + .item-prev { + left: 2rem; + } + .item-next { + right: 2rem; } } .carousel-locator { - display: none; - &:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1), &:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2), &:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3), @@ -74,6 +97,12 @@ } } } + + &.carousel-autoplay { + .carousel-item { + //animation: carousel-autoplay .15s infinite; + } + } } @supports (object-fit: cover) { @@ -86,23 +115,6 @@ } } -@keyframes carousel-autoplay { - 0% { - transform: translateX(0); - } - 25% { - transform: translateX(-25%); - } - 50% { - transform: translateX(-50%); - } - 75% { - transform: translateX(-75%); - } - 100% { - transform: translateX(0); - } -} @keyframes carousel-slidein { 0% { transform: translateX(100%); @@ -111,6 +123,7 @@ transform: translateX(0); } } + @keyframes carousel-slideout { 0% { opacity: 1; |