├── .gitignore ├── carousel-1 ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── index.html └── styles.css └── carousel-2 ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── index.html └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /carousel-1/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-1/1.jpg -------------------------------------------------------------------------------- /carousel-1/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-1/2.jpg -------------------------------------------------------------------------------- /carousel-1/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-1/3.jpg -------------------------------------------------------------------------------- /carousel-1/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-1/4.jpg -------------------------------------------------------------------------------- /carousel-1/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-1/5.jpg -------------------------------------------------------------------------------- /carousel-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Carousel 1 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 | 25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /carousel-1/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | * { 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body, 11 | .carousel { 12 | height: 100%; 13 | } 14 | 15 | .carousel { 16 | overflow: hidden; 17 | position: relative; 18 | width: 100%; 19 | } 20 | 21 | .carousel-images { 22 | position: absolute; 23 | top: 0; 24 | left: 0; 25 | z-index: 1; 26 | display: flex; 27 | width: 300%; 28 | height: 100%; 29 | transition: 0.5s; 30 | } 31 | 32 | .carousel img { 33 | width: 100%; 34 | object-fit: cover; 35 | } 36 | 37 | .carousel-controls { 38 | position: absolute; 39 | z-index: 2; 40 | width: 100%; 41 | height: 100%; 42 | display: flex; 43 | align-items: flex-end; 44 | justify-content: flex-end; 45 | } 46 | 47 | input { 48 | display: none; 49 | } 50 | 51 | input, 52 | label { 53 | position: relative; 54 | z-index: 2; 55 | } 56 | 57 | label { 58 | display: block; 59 | width: 24px; 60 | height: 24px; 61 | border-radius: 50%; 62 | background: rgba(255, 255, 255, 0.5); 63 | opacity: 0.3; 64 | backdrop-filter: blur(20px); 65 | cursor: pointer; 66 | transition: 0.3s; 67 | } 68 | 69 | .dots { 70 | position: absolute; 71 | z-index: 2; 72 | left: 0; 73 | bottom: 0; 74 | width: 100%; 75 | height: 400px; 76 | background: linear-gradient(transparent, #000 90%); 77 | display: flex; 78 | gap: 12px; 79 | align-items: flex-end; 80 | justify-content: center; 81 | padding-bottom: 50px; 82 | } 83 | 84 | input:nth-child(1):checked ~ .dots label:nth-child(1), 85 | input:nth-child(2):checked ~ .dots label:nth-child(2), 86 | input:nth-child(3):checked ~ .dots label:nth-child(3) { 87 | background: rgba(255, 255, 255, 0.95); 88 | opacity: 1; 89 | backdrop-filter: none; 90 | } 91 | 92 | input:nth-child(1):checked ~ .carousel-images { 93 | translate: 0; 94 | } 95 | 96 | input:nth-child(2):checked ~ .carousel-images { 97 | translate: -100vw; 98 | } 99 | 100 | input:nth-child(3):checked ~ .carousel-images { 101 | translate: -200vw; 102 | } 103 | -------------------------------------------------------------------------------- /carousel-2/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/1.jpg -------------------------------------------------------------------------------- /carousel-2/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/2.jpg -------------------------------------------------------------------------------- /carousel-2/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/3.jpg -------------------------------------------------------------------------------- /carousel-2/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/4.jpg -------------------------------------------------------------------------------- /carousel-2/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/5.jpg -------------------------------------------------------------------------------- /carousel-2/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/6.jpg -------------------------------------------------------------------------------- /carousel-2/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/frontend-joe/css-carousels/0ca75f4845695539568249c6b8caaaeb78a36b7f/carousel-2/7.jpg -------------------------------------------------------------------------------- /carousel-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Carousel 2 8 | 9 | 10 | 11 |
12 |
    13 |
  1. 14 |
    18 |
    2. 19 |
  2. 20 |
    24 |
    3. 25 |
  3. 26 |
    30 |
    4. 31 |
  4. 32 |
    36 |
    5. 37 |
  5. 38 |
    42 |
    6. 43 |
  6. 44 |
    48 |
    7. 49 |
  7. 50 |
    54 |
    8. 55 |
56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /carousel-2/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | place-items: center; 4 | margin: 0; 5 | height: 100vh; 6 | padding: 0 50px; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | scrollbar-color: transparent transparent; /* thumb and track color */ 12 | scrollbar-width: 0px; 13 | } 14 | 15 | *::-webkit-scrollbar { 16 | width: 0; 17 | } 18 | 19 | *::-webkit-scrollbar-track { 20 | background: transparent; 21 | } 22 | 23 | *::-webkit-scrollbar-thumb { 24 | background: transparent; 25 | border: none; 26 | } 27 | 28 | * { 29 | -ms-overflow-style: none; 30 | } 31 | 32 | ol, 33 | li { 34 | list-style: none; 35 | margin: 0; 36 | padding: 0; 37 | } 38 | 39 | .carousel { 40 | position: relative; 41 | width: 100%; 42 | height: 30vh; 43 | perspective: 100px; 44 | overflow: hidden; 45 | } 46 | 47 | .carousel__viewport { 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | bottom: 0; 52 | left: 0; 53 | display: flex; 54 | overflow-x: scroll; 55 | counter-reset: item; 56 | scroll-behavior: smooth; 57 | scroll-snap-type: x mandatory; 58 | } 59 | 60 | .carousel::before, 61 | .carousel::after { 62 | content: ""; 63 | position: absolute; 64 | z-index: 2; 65 | left: 50%; 66 | translate: -50% 0; 67 | width: 500%; 68 | height: 500%; 69 | border-radius: 50%; 70 | background: #ffffff; 71 | } 72 | 73 | .carousel::before { 74 | top: -480%; 75 | } 76 | 77 | .carousel::after { 78 | bottom: -480%; 79 | } 80 | 81 | .carousel__slide { 82 | position: relative; 83 | flex: 0 0 33.33%; 84 | width: 33.33%; 85 | counter-increment: item; 86 | } 87 | 88 | .carousel__slide:before { 89 | content: counter(item); 90 | position: absolute; 91 | top: 50%; 92 | left: 50%; 93 | transform: translate3d(-50%, -40%, 70px); 94 | } 95 | 96 | .carousel__snapper { 97 | position: absolute; 98 | top: 0; 99 | left: 0; 100 | width: 100%; 101 | height: 100%; 102 | scroll-snap-align: center; 103 | background-size: cover; 104 | background-position: 50%; 105 | border: 10px solid #ffffff; 106 | } 107 | --------------------------------------------------------------------------------