├── README.md ├── assets ├── css │ ├── reset.css │ ├── style.css │ └── style.map ├── img │ ├── slide-1.jpg │ ├── slide-2.jpg │ ├── slide-3.jpg │ └── slide-4.jpg ├── js │ └── main.js └── scss │ └── style.scss └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # pure-css-js-slider 2 | 3 | A pure CSS/JS slider layout developed for Toptal engineering blog article. 4 | 5 | Working demo: https://stefan.lynxdev.io/projects/fullscreen-slider/ 6 | -------------------------------------------------------------------------------- /assets/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /* line 10, D:/WEB/Projects/Slider/assets/scss/style.scss */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* line 14, D:/WEB/Projects/Slider/assets/scss/style.scss */ 7 | img { 8 | max-width: 100%; 9 | height: auto; 10 | } 11 | 12 | /* line 19, D:/WEB/Projects/Slider/assets/scss/style.scss */ 13 | ul { 14 | padding: 0; 15 | } 16 | 17 | /* line 23, D:/WEB/Projects/Slider/assets/scss/style.scss */ 18 | li { 19 | list-style-type: none; 20 | } 21 | 22 | /* line 27, D:/WEB/Projects/Slider/assets/scss/style.scss */ 23 | a, 24 | a:visited, 25 | a:hover { 26 | color: inherit; 27 | text-decoration: none; 28 | outline: none; 29 | } 30 | 31 | /* line 35, D:/WEB/Projects/Slider/assets/scss/style.scss */ 32 | html { 33 | font-size: 16px; 34 | } 35 | 36 | /* line 39, D:/WEB/Projects/Slider/assets/scss/style.scss */ 37 | html, 38 | body { 39 | overflow: hidden; 40 | height: 100vh; 41 | } 42 | 43 | /* line 45, D:/WEB/Projects/Slider/assets/scss/style.scss */ 44 | body { 45 | font-family: "Muli", sans-serif; 46 | color: #030303; 47 | } 48 | 49 | /* line 50, D:/WEB/Projects/Slider/assets/scss/style.scss */ 50 | #slides-main, #slides-main:after, #slides-main .slide-image, #slides-main .abs-mask, #slides-main .slide { 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | height: 100%; 55 | width: 100%; 56 | } 57 | 58 | /* line 58, D:/WEB/Projects/Slider/assets/scss/style.scss */ 59 | .mask { 60 | overflow: hidden; 61 | } 62 | 63 | /* #LAYOUT - START*/ 64 | /* line 69, D:/WEB/Projects/Slider/assets/scss/style.scss */ 65 | #hero-slider { 66 | position: relative; 67 | height: 100vh; 68 | display: flex; 69 | background: #030303; 70 | } 71 | 72 | /* line 75, D:/WEB/Projects/Slider/assets/scss/style.scss */ 73 | #hero-slider:not(.ready) { 74 | visibility: hidden; 75 | } 76 | 77 | /* line 80, D:/WEB/Projects/Slider/assets/scss/style.scss */ 78 | #slideshow { 79 | position: relative; 80 | flex: 1 1 80%; 81 | display: flex; 82 | align-items: flex-end; 83 | padding: 2rem; 84 | } 85 | 86 | /* line 92, D:/WEB/Projects/Slider/assets/scss/style.scss */ 87 | #slides-main:after { 88 | content: ''; 89 | background-color: rgba(0, 0, 0, 0.25); 90 | z-index: 100; 91 | } 92 | 93 | /* line 99, D:/WEB/Projects/Slider/assets/scss/style.scss */ 94 | #slides-main .slide-image { 95 | background-position: center; 96 | background-size: cover; 97 | z-index: -1; 98 | } 99 | 100 | /* line 107, D:/WEB/Projects/Slider/assets/scss/style.scss */ 101 | #slides-aux { 102 | position: relative; 103 | top: 1.25rem; 104 | width: 100%; 105 | } 106 | 107 | /* line 112, D:/WEB/Projects/Slider/assets/scss/style.scss */ 108 | #slides-aux .slide-title { 109 | position: absolute; 110 | z-index: 300; 111 | font-size: 4vw; 112 | font-weight: 700; 113 | line-height: 1.3; 114 | color: transparent; 115 | -webkit-text-stroke: 1px #fff; 116 | } 117 | 118 | /* line 122, D:/WEB/Projects/Slider/assets/scss/style.scss */ 119 | #info { 120 | position: relative; 121 | flex: 1 1 20%; 122 | padding: 2rem; 123 | background-color: #fff; 124 | } 125 | 126 | /* line 128, D:/WEB/Projects/Slider/assets/scss/style.scss */ 127 | #info .slider-title-wrapper { 128 | position: absolute; 129 | top: 2rem; 130 | left: calc(100% - 2rem); 131 | transform-origin: 0% 0%; 132 | transform: rotate(90deg); 133 | color: transparent; 134 | -webkit-text-stroke: 1px #030303; 135 | } 136 | 137 | /* line 137, D:/WEB/Projects/Slider/assets/scss/style.scss */ 138 | #info .slider-title { 139 | position: relative; 140 | font-size: 9vmax; 141 | line-height: 1.3; 142 | white-space: nowrap; 143 | font-weight: 700; 144 | text-align: center; 145 | text-indent: -1%; 146 | } 147 | 148 | /* line 147, D:/WEB/Projects/Slider/assets/scss/style.scss */ 149 | #info .line { 150 | position: absolute; 151 | top: 0; 152 | left: 0; 153 | height: 12px; 154 | width: 100%; 155 | background: #030303; 156 | } 157 | 158 | /* line 156, D:/WEB/Projects/Slider/assets/scss/style.scss */ 159 | #info .about { 160 | position: absolute; 161 | bottom: 2rem; 162 | right: 2rem; 163 | text-align: right; 164 | max-width: 85%; 165 | font-size: .8rem; 166 | line-height: 1.2; 167 | } 168 | 169 | /* line 165, D:/WEB/Projects/Slider/assets/scss/style.scss */ 170 | #info .about a:hover { 171 | opacity: .8; 172 | } 173 | 174 | /* line 171, D:/WEB/Projects/Slider/assets/scss/style.scss */ 175 | #logo { 176 | position: absolute; 177 | top: 2rem; 178 | left: 2rem; 179 | padding-right: 2rem; 180 | z-index: 300; 181 | } 182 | 183 | /* line 178, D:/WEB/Projects/Slider/assets/scss/style.scss */ 184 | #logo .logo-text { 185 | position: relative; 186 | font-size: 2rem; 187 | font-weight: 300; 188 | color: #fff; 189 | } 190 | 191 | /* line 185, D:/WEB/Projects/Slider/assets/scss/style.scss */ 192 | #logo:after { 193 | content: ''; 194 | position: absolute; 195 | top: 0; 196 | right: 0; 197 | height: 100%; 198 | width: 1px; 199 | background-color: #fff; 200 | } 201 | 202 | /* line 196, D:/WEB/Projects/Slider/assets/scss/style.scss */ 203 | #slider-nav { 204 | position: absolute; 205 | top: 2rem; 206 | right: calc(20% - 130px/2); 207 | display: flex; 208 | align-items: center; 209 | justify-content: space-around; 210 | z-index: 500; 211 | } 212 | 213 | /* line 205, D:/WEB/Projects/Slider/assets/scss/style.scss */ 214 | #slider-nav .current { 215 | color: #fff; 216 | } 217 | 218 | /* line 209, D:/WEB/Projects/Slider/assets/scss/style.scss */ 219 | #slider-nav .sep:before, #slider-nav .sep:after { 220 | content: ''; 221 | position: absolute; 222 | height: 100%; 223 | width: 50%; 224 | } 225 | 226 | /* line 216, D:/WEB/Projects/Slider/assets/scss/style.scss */ 227 | #slider-nav .sep { 228 | position: relative; 229 | width: 40px; 230 | height: 2px; 231 | margin: 0 1rem; 232 | } 233 | 234 | /* line 222, D:/WEB/Projects/Slider/assets/scss/style.scss */ 235 | #slider-nav .sep:before { 236 | background-color: #fff; 237 | left: 0; 238 | } 239 | 240 | /* line 228, D:/WEB/Projects/Slider/assets/scss/style.scss */ 241 | #slider-nav .sep:after { 242 | background-color: currentColor; 243 | right: 0; 244 | } 245 | 246 | /* line 235, D:/WEB/Projects/Slider/assets/scss/style.scss */ 247 | #slider-nav .total { 248 | color: #030303; 249 | } 250 | 251 | /* line 239, D:/WEB/Projects/Slider/assets/scss/style.scss */ 252 | #slider-nav > span { 253 | font-size: 1.5rem; 254 | } 255 | 256 | /* #LAYOUT - END*/ 257 | /* #INITIAL ANIMATION - START */ 258 | /* line 249, D:/WEB/Projects/Slider/assets/scss/style.scss */ 259 | #hero-slider #logo:after { 260 | transform: scaleY(0); 261 | transform-origin: 50% 0; 262 | transition: transform 0.35s cubic-bezier(0.694, 0, 0.335, 1); 263 | } 264 | 265 | /* line 255, D:/WEB/Projects/Slider/assets/scss/style.scss */ 266 | #hero-slider .logo-text { 267 | display: block; 268 | transform: translate3d(120%, 0, 0); 269 | opacity: 0; 270 | transition: transform .8s .2s, opacity .5s .2s; 271 | } 272 | 273 | /* line 262, D:/WEB/Projects/Slider/assets/scss/style.scss */ 274 | #hero-slider .current, 275 | #hero-slider .sep:before { 276 | opacity: 0; 277 | transition: opacity .4s 1.3s; 278 | } 279 | 280 | /* line 268, D:/WEB/Projects/Slider/assets/scss/style.scss */ 281 | #hero-slider #info { 282 | transform: translate3d(100%, 0, 0); 283 | transition: transform 1s cubic-bezier(0.694, 0, 0.335, 1) 0.6s; 284 | } 285 | 286 | /* line 273, D:/WEB/Projects/Slider/assets/scss/style.scss */ 287 | #hero-slider .line { 288 | transform-origin: 0% 0; 289 | transform: scaleX(0); 290 | transition: transform 0.7s cubic-bezier(0.694, 0, 0.335, 1) 1s; 291 | } 292 | 293 | /* line 279, D:/WEB/Projects/Slider/assets/scss/style.scss */ 294 | #hero-slider .slider-title { 295 | overflow: hidden; 296 | } 297 | 298 | /* line 282, D:/WEB/Projects/Slider/assets/scss/style.scss */ 299 | #hero-slider .slider-title > span { 300 | display: block; 301 | transform: translate3d(0, -100%, 0); 302 | transition: transform .5s 1.5s; 303 | } 304 | 305 | /* line 290, D:/WEB/Projects/Slider/assets/scss/style.scss */ 306 | #hero-slider.ready #logo:after { 307 | transform: scaleY(1); 308 | } 309 | 310 | /* line 294, D:/WEB/Projects/Slider/assets/scss/style.scss */ 311 | #hero-slider.ready .line { 312 | transform: scaleX(1); 313 | } 314 | 315 | /* line 298, D:/WEB/Projects/Slider/assets/scss/style.scss */ 316 | #hero-slider.ready .logo-text { 317 | opacity: 1; 318 | transform: translate3d(0, 0, 0); 319 | } 320 | 321 | /* line 303, D:/WEB/Projects/Slider/assets/scss/style.scss */ 322 | #hero-slider.ready #info, 323 | #hero-slider.ready .slider-title > span { 324 | transform: translate3d(0, 0, 0); 325 | } 326 | 327 | /* line 308, D:/WEB/Projects/Slider/assets/scss/style.scss */ 328 | #hero-slider.ready .current, 329 | #hero-slider.ready .sep:before { 330 | opacity: 1; 331 | } 332 | 333 | /* line 315, D:/WEB/Projects/Slider/assets/scss/style.scss */ 334 | #hero-slider:not(.loaded) .slide:not(:first-child) { 335 | visibility: hidden; 336 | } 337 | 338 | /* #INITIAL ANIMATION - END */ 339 | /* #SLIDESHOW - START */ 340 | /* line 324, D:/WEB/Projects/Slider/assets/scss/style.scss */ 341 | #slides-main { 342 | overflow: hidden; 343 | } 344 | 345 | /* line 327, D:/WEB/Projects/Slider/assets/scss/style.scss */ 346 | #slides-main .abs-mask { 347 | overflow: hidden; 348 | } 349 | 350 | /* line 333, D:/WEB/Projects/Slider/assets/scss/style.scss */ 351 | #slides-main .slide { 352 | overflow: hidden; 353 | will-change: transform; 354 | } 355 | 356 | /* line 338, D:/WEB/Projects/Slider/assets/scss/style.scss */ 357 | #slides-main .slide .slide-image { 358 | will-change: transform; 359 | } 360 | 361 | /* line 342, D:/WEB/Projects/Slider/assets/scss/style.scss */ 362 | #slides-main .slide.prev { 363 | z-index: 5; 364 | transform: translate3d(-100%, 0, 0); 365 | transition: 1s cubic-bezier(0.694, 0, 0.335, 1); 366 | } 367 | 368 | /* line 347, D:/WEB/Projects/Slider/assets/scss/style.scss */ 369 | #slides-main .slide.prev .abs-mask { 370 | transform: translateX(80%); 371 | transition: 1s cubic-bezier(0.694, 0, 0.335, 1); 372 | } 373 | 374 | /* line 357, D:/WEB/Projects/Slider/assets/scss/style.scss */ 375 | #slides-main .slide.active { 376 | z-index: 10; 377 | transform: translate3d(0, 0, 0); 378 | transition: transform 1s cubic-bezier(0.694, 0, 0.335, 1); 379 | } 380 | 381 | /* line 362, D:/WEB/Projects/Slider/assets/scss/style.scss */ 382 | #slides-main .slide.active .abs-mask { 383 | transform: translate3d(0, 0, 0); 384 | transition: transform 1s cubic-bezier(0.694, 0, 0.335, 1); 385 | } 386 | 387 | /* line 373, D:/WEB/Projects/Slider/assets/scss/style.scss */ 388 | #slides-main .slide:not(.prev):not(.active) { 389 | z-index: -1; 390 | transform: translate3d(100%, 0, 0); 391 | } 392 | 393 | /* line 377, D:/WEB/Projects/Slider/assets/scss/style.scss */ 394 | #slides-main .slide:not(.prev):not(.active) .abs-mask { 395 | transform: translateX(-50%); 396 | } 397 | 398 | /* line 389, D:/WEB/Projects/Slider/assets/scss/style.scss */ 399 | #hero-slider.prev #slides-main .slide.prev { 400 | transform: translate3d(100%, 0, 0); 401 | } 402 | 403 | /* line 392, D:/WEB/Projects/Slider/assets/scss/style.scss */ 404 | #hero-slider.prev #slides-main .slide.prev .abs-mask { 405 | transform: translate3d(-80%, 0, 0); 406 | } 407 | 408 | /* line 397, D:/WEB/Projects/Slider/assets/scss/style.scss */ 409 | #hero-slider.prev #slides-main .slide:not(.prev):not(.active) { 410 | transform: translate3d(-100%, 0, 0); 411 | } 412 | 413 | /* line 400, D:/WEB/Projects/Slider/assets/scss/style.scss */ 414 | #hero-slider.prev #slides-main .slide:not(.prev):not(.active) .abs-mask { 415 | transform: translate3d(50%, 0, 0); 416 | } 417 | 418 | /* line 410, D:/WEB/Projects/Slider/assets/scss/style.scss */ 419 | #slides-aux .slide:not(.active) { 420 | transform: translateX(-20%); 421 | opacity: 0; 422 | } 423 | 424 | /* line 415, D:/WEB/Projects/Slider/assets/scss/style.scss */ 425 | #slides-aux .slide.prev { 426 | transition: transform .0s .2s, opacity .2s; 427 | } 428 | 429 | /* line 419, D:/WEB/Projects/Slider/assets/scss/style.scss */ 430 | #slides-aux .slide.active { 431 | transition: opacity 0.6s 0.8s, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.8s; 432 | } 433 | 434 | /* #SLIDESHOW - END */ 435 | /* #RESPONSIVE - START*/ 436 | /* Landscape */ 437 | @media only screen and (max-device-width: 812px) and (orientation: landscape) { 438 | /* line 432, D:/WEB/Projects/Slider/assets/scss/style.scss */ 439 | #info .line, 440 | #info .about { 441 | display: none; 442 | } 443 | /* line 437, D:/WEB/Projects/Slider/assets/scss/style.scss */ 444 | #info .slider-title-wrapper { 445 | top: auto; 446 | bottom: 2rem; 447 | left: calc(70% + 11px); 448 | transform-origin: 35% -100%; 449 | } 450 | /* line 445, D:/WEB/Projects/Slider/assets/scss/style.scss */ 451 | #slides-aux { 452 | top: 0; 453 | } 454 | } 455 | 456 | @media only screen and (max-device-width: 768px) and (orientation: portrait) { 457 | /* line 451, D:/WEB/Projects/Slider/assets/scss/style.scss */ 458 | #info { 459 | display: none; 460 | } 461 | /* line 455, D:/WEB/Projects/Slider/assets/scss/style.scss */ 462 | #slides-aux { 463 | display: flex; 464 | align-items: flex-end; 465 | top: 0; 466 | } 467 | /* line 460, D:/WEB/Projects/Slider/assets/scss/style.scss */ 468 | #slides-aux .slide-title { 469 | font-size: 3rem; 470 | } 471 | /* line 465, D:/WEB/Projects/Slider/assets/scss/style.scss */ 472 | #slider-nav { 473 | right: 2rem; 474 | } 475 | } 476 | 477 | @media only screen and (max-device-width: 680px) and (orientation: portrait) { 478 | /* line 473, D:/WEB/Projects/Slider/assets/scss/style.scss */ 479 | #slides-aux .slide-title { 480 | font-size: 2.5rem; 481 | } 482 | /* line 478, D:/WEB/Projects/Slider/assets/scss/style.scss */ 483 | #slider-nav { 484 | top: 6rem; 485 | right: auto; 486 | left: 2rem; 487 | } 488 | } 489 | 490 | /* #RESPONSIVE - END*/ 491 | 492 | /*# sourceMappingURL=../css/style.map */ -------------------------------------------------------------------------------- /assets/css/style.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "../scss/style.css", 4 | "sources": [ 5 | "../scss/style.scss" 6 | ], 7 | "sourcesContent": [ 8 | "$main-font: 'Muli', sans-serif;\n$offset: 2rem;\n$dark-color: #030303;\n$main-width: 80%;\n$side-width: 100% - $main-width;\n$nav-size: 130px;\n$title-size: 9vmax;\n$easing: cubic-bezier(.694, 0, .335, 1);\n\n* {\n box-sizing: border-box;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nul {\n padding: 0;\n}\n\nli {\n list-style-type: none;\n}\n\na,\na:visited,\na:hover {\n color: inherit;\n text-decoration: none;\n outline: none;\n}\n\nhtml {\n font-size: 16px;\n}\n\nhtml,\nbody {\n overflow: hidden;\n height: 100vh;\n}\n\nbody {\n font-family: $main-font;\n color: $dark-color;\n}\n\n%abs {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n}\n\n.mask {\n overflow: hidden;\n}\n\n@mixin outlined($color: $dark-color, $size: 1px) {\n color: transparent;\n -webkit-text-stroke: $size $color;\n}\n\n/* #LAYOUT - START*/\n\n#hero-slider {\n position: relative;\n height: 100vh;\n display: flex;\n background: $dark-color;\n\n &:not(.ready) {\n visibility: hidden;\n }\n}\n\n#slideshow {\n position: relative;\n flex: 1 1 $main-width;\n display: flex;\n align-items: flex-end;\n padding: $offset;\n\n}\n\n#slides-main {\n @extend %abs;\n\n &:after {\n content: '';\n @extend %abs;\n background-color: rgba(0, 0, 0, .25);\n z-index: 100;\n }\n\n .slide-image {\n @extend %abs;\n background-position: center;\n background-size: cover;\n z-index: -1;\n }\n}\n\n#slides-aux {\n position: relative;\n top: 1.25rem;\n width: 100%;\n\n .slide-title {\n position: absolute;\n z-index: 300;\n font-size: 4vw;\n font-weight: 700;\n line-height: 1.3;\n @include outlined(#fff);\n }\n}\n\n#info {\n position: relative;\n flex: 1 1 $side-width;\n padding: $offset;\n background-color: #fff;\n\n .slider-title-wrapper {\n position: absolute;\n top: $offset;\n left: calc(100% - #{$offset});\n transform-origin: 0% 0%;\n transform: rotate(90deg);\n @include outlined;\n }\n\n .slider-title {\n position: relative;\n font-size: $title-size;\n line-height: 1.3;\n white-space: nowrap;\n font-weight: 700;\n text-align: center;\n text-indent: -1%;\n }\n\n .line {\n position: absolute;\n top: 0;\n left: 0;\n height: 12px;\n width: 100%;\n background: $dark-color;\n }\n\n .about {\n position: absolute;\n bottom: $offset;\n right: $offset;\n text-align: right;\n max-width: 85%;\n font-size: .8rem;\n line-height: 1.2;\n\n a:hover {\n opacity: .8;\n }\n }\n}\n\n#logo {\n position: absolute;\n top: $offset;\n left: $offset;\n padding-right: $offset;\n z-index: 300;\n\n .logo-text {\n position: relative;\n font-size: 2rem;\n font-weight: 300;\n color: #fff;\n }\n\n &:after {\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n height: 100%;\n width: 1px;\n background-color: #fff;\n }\n}\n\n#slider-nav {\n position: absolute;\n top: 2rem;\n right: calc(#{$side-width} - #{$nav-size}/2);\n display: flex;\n align-items: center;\n justify-content: space-around;\n z-index: 500;\n\n .current {\n color: #fff;\n }\n\n %pseudo {\n content: '';\n position: absolute;\n height: 100%;\n width: 50%\n }\n\n .sep {\n position: relative;\n width: 40px;\n height: 2px;\n margin: 0 1rem;\n\n &:before {\n @extend %pseudo;\n background-color: #fff;\n left: 0;\n }\n\n &:after {\n @extend %pseudo;\n background-color: currentColor;\n right: 0;\n }\n }\n\n .total {\n color: $dark-color;\n }\n\n >span {\n font-size: 1.5rem;\n }\n}\n\n/* #LAYOUT - END*/\n\n/* #INITIAL ANIMATION - START */\n\n#hero-slider {\n #logo:after {\n transform: scaleY(0);\n transform-origin: 50% 0;\n transition: transform .35s $easing;\n }\n\n .logo-text {\n display: block;\n transform: translate3d(120%, 0, 0);\n opacity: 0;\n transition: transform .8s .2s, opacity .5s .2s;\n }\n\n .current,\n .sep:before {\n opacity: 0;\n transition: opacity .4s 1.3s;\n }\n\n #info {\n transform: translate3d(100%, 0, 0);\n transition: transform 1s $easing .6s;\n }\n\n .line {\n transform-origin: 0% 0;\n transform: scaleX(0);\n transition: transform .7s $easing 1s;\n }\n\n .slider-title {\n overflow: hidden;\n\n >span {\n display: block;\n transform: translate3d(0, -100%, 0);\n transition: transform .5s 1.5s;\n }\n }\n\n &.ready {\n #logo:after {\n transform: scaleY(1);\n }\n\n .line {\n transform: scaleX(1);\n }\n\n .logo-text {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n\n #info,\n .slider-title>span {\n transform: translate3d(0, 0, 0);\n }\n\n .current,\n .sep:before {\n opacity: 1;\n }\n }\n\n &:not(.loaded) {\n .slide:not(:first-child) {\n visibility: hidden;\n }\n }\n}\n\n/* #INITIAL ANIMATION - END */\n\n/* #SLIDESHOW - START */\n#slides-main {\n overflow: hidden;\n\n .abs-mask {\n @extend %abs;\n overflow: hidden;\n // will-change: transform;\n }\n\n .slide {\n @extend %abs;\n overflow: hidden;\n will-change: transform;\n\n .slide-image {\n will-change: transform;\n }\n\n &.prev {\n z-index: 5;\n transform: translate3d(-100%, 0, 0);\n transition: 1s $easing;\n\n .abs-mask {\n transform: translateX(80%);\n transition: 1s $easing;\n }\n\n // .slide-image {\n // transition: transform 0s 1s;\n // }\n }\n\n &.active {\n z-index: 10;\n transform: translate3d(0, 0, 0);\n transition: transform 1s $easing;\n\n .abs-mask {\n transform: translate3d(0, 0, 0);\n transition: transform 1s $easing;\n }\n\n // .slide-image {\n // transform: scale(1.01);\n // transition: transform 1s $easing;\n // }\n }\n\n &:not(.prev):not(.active) {\n z-index: -1;\n transform: translate3d(100%, 0, 0);\n\n .abs-mask {\n transform: translateX(-50%);\n }\n }\n\n // &:not(.active) {\n // .slide-image {\n // transform: scale(1.21);\n // }\n // }\n\n @at-root #hero-slider.prev & {\n &.prev {\n transform: translate3d(100%, 0, 0);\n\n .abs-mask {\n transform: translate3d(-80%, 0, 0);\n }\n }\n\n &:not(.prev):not(.active) {\n transform: translate3d(-100%, 0, 0);\n\n .abs-mask {\n transform: translate3d(50%, 0, 0);\n }\n }\n }\n }\n}\n\n#slides-aux {\n .slide {\n &:not(.active) {\n transform: translateX(-20%);\n opacity: 0;\n }\n\n &.prev {\n transition: transform .0s .2s, opacity .2s;\n }\n\n &.active {\n transition: opacity .6s .8s, transform .5s cubic-bezier(0.23, 1, 0.32, 1) .8s;\n }\n }\n}\n\n/* #SLIDESHOW - END */\n\n/* #RESPONSIVE - START*/\n/* Landscape */\n@media only screen and (max-device-width: 812px) and (orientation: landscape) {\n #info {\n\n .line,\n .about {\n display: none;\n }\n\n .slider-title-wrapper {\n top: auto;\n bottom: 2rem;\n left: calc(70% + 11px);\n transform-origin: 35% -100%;\n }\n }\n\n #slides-aux {\n top: 0;\n }\n}\n\n@media only screen and (max-device-width: 768px) and (orientation: portrait) {\n #info {\n display: none;\n }\n\n #slides-aux {\n display: flex;\n align-items: flex-end;\n top: 0;\n\n .slide-title {\n font-size: 3rem;\n }\n }\n\n #slider-nav {\n right: 2rem;\n }\n}\n\n\n@media only screen and (max-device-width: 680px) and (orientation: portrait) {\n #slides-aux {\n .slide-title {\n font-size: 2.5rem;\n }\n }\n\n #slider-nav {\n top: 6rem;\n right: auto;\n left: 2rem;\n }\n}\n\n/* #RESPONSIVE - END*/" 9 | ], 10 | "mappings": "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", 11 | "names": [] 12 | } -------------------------------------------------------------------------------- /assets/img/slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitass/pure-css-js-slider/fadec2c9d27c8e5ce492adb16eea09288af51a1a/assets/img/slide-1.jpg -------------------------------------------------------------------------------- /assets/img/slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitass/pure-css-js-slider/fadec2c9d27c8e5ce492adb16eea09288af51a1a/assets/img/slide-2.jpg -------------------------------------------------------------------------------- /assets/img/slide-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitass/pure-css-js-slider/fadec2c9d27c8e5ce492adb16eea09288af51a1a/assets/img/slide-3.jpg -------------------------------------------------------------------------------- /assets/img/slide-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vitass/pure-css-js-slider/fadec2c9d27c8e5ce492adb16eea09288af51a1a/assets/img/slide-4.jpg -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utility functions 3 | */ 4 | function utils() { 5 | /** 6 | * Returns max height value for a nodelist 7 | * @param {NodeList} nodeList The node list to calculate max height of 8 | */ 9 | const calcMaxHeight = function (items) { 10 | let maxHeight = 0; 11 | 12 | items.forEach(item => { 13 | const h = item.clientHeight; 14 | maxHeight = h > maxHeight ? h : maxHeight; 15 | }); 16 | return maxHeight; 17 | } 18 | 19 | /** 20 | * Removes Classes from NodeList 21 | * @param {NodeList} nodeList The node list to remove classes from 22 | * @param {Array} cssClasses Array of CSS classes to be removed 23 | */ 24 | function removeClasses(nodeList, cssClasses) { 25 | for (let i = 0; i < nodeList.length; i++) { 26 | nodeList[i].classList.remove(...cssClasses); 27 | } 28 | } 29 | 30 | /** 31 | * Adds Classes from NodeList 32 | * @param {NodeList} nodeList The node list to add classes to 33 | * @param {Array} cssClasses Array of CSS classes to be added 34 | */ 35 | function addClasses(nodeList, cssClasses) { 36 | for (let i = 0; i < nodeList.length; i++) { 37 | nodeList[i].classList.add(...cssClasses); 38 | } 39 | } 40 | 41 | /** 42 | * Behaves the same as setInterval except uses requestAnimationFrame() where possible for better performance 43 | * @param {function} fn The callback function 44 | * @param {int} delay The delay in milliseconds 45 | */ 46 | const requestInterval = function (fn, delay) { 47 | const requestAnimFrame = (function () { 48 | return window.requestAnimationFrame || function (callback, element) { 49 | window.setTimeout(callback, 1000 / 60); 50 | }; 51 | })(); 52 | 53 | let start = new Date().getTime(), 54 | handle = {}; 55 | 56 | function loop() { 57 | const current = new Date().getTime(), 58 | delta = current - start; 59 | 60 | if (delta >= delay) { 61 | fn.call(); 62 | start = new Date().getTime(); 63 | } 64 | 65 | handle.value = requestAnimFrame(loop); 66 | } 67 | 68 | handle.value = requestAnimFrame(loop); 69 | return handle; 70 | }; 71 | 72 | /** 73 | * Behaves the same as clearInterval except uses cancelRequestAnimationFrame() where possible for better performance 74 | * @param {int|object} handle The callback function 75 | */ 76 | const clearRequestInterval = function (handle) { 77 | window.cancelAnimationFrame ? window.cancelAnimationFrame(handle.value) : 78 | clearInterval(handle); 79 | }; 80 | 81 | return { 82 | calcMaxHeight, 83 | removeClasses, 84 | addClasses, 85 | requestInterval, 86 | clearRequestInterval 87 | } 88 | } 89 | 90 | 91 | /** 92 | * Main Slider function 93 | */ 94 | function heroSlider() { 95 | const slider = { 96 | hero: document.querySelector('#hero-slider'), 97 | main: document.querySelector('#slides-main'), 98 | aux: document.querySelector('#slides-aux'), 99 | current: document.querySelector('#slider-nav .current'), 100 | handle: null, 101 | idle: true, 102 | activeIndex: -1, 103 | interval: 3500 104 | }; 105 | 106 | const setHeight = function (holder, items) { 107 | const h = utils().calcMaxHeight(items); 108 | holder.style.height = `${h}px`; 109 | } 110 | 111 | const leadingZero = function () { 112 | return arguments[1] < 10 ? '0' + arguments[1] : arguments[1]; 113 | } 114 | 115 | const setCurrent = function () { 116 | slider.current.innerText = leadingZero `${slider.activeIndex + 1}`; 117 | } 118 | 119 | const changeSlide = function (direction) { 120 | slider.idle = false; 121 | slider.hero.classList.remove('prev', 'next'); 122 | if (direction == 'next') { 123 | slider.activeIndex = (slider.activeIndex + 1) % slider.total; 124 | slider.hero.classList.add('next'); 125 | } else { 126 | slider.activeIndex = (slider.activeIndex - 1 + slider.total) % slider.total; 127 | slider.hero.classList.add('prev'); 128 | } 129 | 130 | //reset classes 131 | utils().removeClasses(slider.items, ['prev', 'active']); 132 | 133 | //set prev 134 | const prevItems = [...slider.items] 135 | .filter(item => { 136 | let prevIndex; 137 | if (slider.hero.classList.contains('prev')) { 138 | prevIndex = slider.activeIndex == slider.total - 1 ? 0 : slider.activeIndex + 1; 139 | } else { 140 | prevIndex = slider.activeIndex == 0 ? slider.total - 1 : slider.activeIndex - 1; 141 | } 142 | 143 | return item.dataset.index == prevIndex; 144 | }); 145 | 146 | //set active 147 | const activeItems = [...slider.items] 148 | .filter(item => { 149 | return item.dataset.index == slider.activeIndex; 150 | }); 151 | 152 | utils().addClasses(prevItems, ['prev']); 153 | utils().addClasses(activeItems, ['active']); 154 | setCurrent(); 155 | 156 | const activeImageItem = slider.main.querySelector('.active'); 157 | activeImageItem.addEventListener('transitionend', waitForIdle, { 158 | once: true 159 | }); 160 | } 161 | 162 | const stopAutoplay = function () { 163 | slider.autoplay = false; 164 | utils().clearRequestInterval(slider.handle); 165 | } 166 | 167 | const waitForIdle = function () { 168 | !slider.autoplay && autoplay(false); //restart 169 | slider.idle = true; 170 | } 171 | 172 | const wheelControl = function () { 173 | slider.hero.addEventListener('wheel', e => { 174 | if (slider.idle) { 175 | const direction = e.deltaY > 0 ? 'next' : 'prev'; 176 | stopAutoplay(); 177 | changeSlide(direction); 178 | } 179 | }); 180 | } 181 | 182 | const autoplay = function (initial) { 183 | slider.autoplay = true; 184 | slider.items = slider.hero.querySelectorAll('[data-index]'); 185 | slider.total = slider.items.length / 2; 186 | 187 | const loop = () => changeSlide('next'); 188 | 189 | initial && requestAnimationFrame(loop); 190 | slider.handle = utils().requestInterval(loop, slider.interval); 191 | } 192 | 193 | const loaded = function () { 194 | slider.hero.classList.add('loaded'); 195 | } 196 | 197 | const touchControl = function () { 198 | const touchStart = function (e) { 199 | slider.ts = parseInt(e.changedTouches[0].clientX); 200 | window.scrollTop = 0; 201 | } 202 | 203 | const touchMove = function (e) { 204 | slider.tm = parseInt(e.changedTouches[0].clientX); 205 | const delta = slider.tm - slider.ts; 206 | window.scrollTop = 0; 207 | 208 | if (slider.idle) { 209 | const direction = delta < 0 ? 'next' : 'prev'; 210 | stopAutoplay(); 211 | changeSlide(direction); 212 | } 213 | } 214 | 215 | slider.hero.addEventListener('touchstart', touchStart); 216 | slider.hero.addEventListener('touchmove', touchMove); 217 | } 218 | 219 | const start = function () { 220 | autoplay(true); 221 | wheelControl(); 222 | window.innerWidth <= 1024 && touchControl(); 223 | slider.aux.addEventListener('transitionend', loaded, { 224 | once: true 225 | }); 226 | } 227 | 228 | const loadingAnimation = function () { 229 | slider.hero.classList.add('ready'); 230 | slider.current.addEventListener('transitionend', start, { 231 | once: true 232 | }); 233 | } 234 | 235 | const init = function () { 236 | setHeight(slider.aux, slider.aux.querySelectorAll('.slide-title')); 237 | loadingAnimation(); 238 | } 239 | 240 | const resize = function () { 241 | setHeight(slider.aux, slider.aux.querySelectorAll('.slide-title')); 242 | } 243 | 244 | return { 245 | init, 246 | resize 247 | } 248 | } 249 | 250 | window.addEventListener('load', heroSlider().init); 251 | window.addEventListener("resize", heroSlider().resize); -------------------------------------------------------------------------------- /assets/scss/style.scss: -------------------------------------------------------------------------------- 1 | $main-font: 'Muli', sans-serif; 2 | $offset: 2rem; 3 | $dark-color: #030303; 4 | $main-width: 80%; 5 | $side-width: 100% - $main-width; 6 | $nav-size: 130px; 7 | $title-size: 9vmax; 8 | $easing: cubic-bezier(.694, 0, .335, 1); 9 | 10 | * { 11 | box-sizing: border-box; 12 | } 13 | 14 | img { 15 | max-width: 100%; 16 | height: auto; 17 | } 18 | 19 | ul { 20 | padding: 0; 21 | } 22 | 23 | li { 24 | list-style-type: none; 25 | } 26 | 27 | a, 28 | a:visited, 29 | a:hover { 30 | color: inherit; 31 | text-decoration: none; 32 | outline: none; 33 | } 34 | 35 | html { 36 | font-size: 16px; 37 | } 38 | 39 | html, 40 | body { 41 | overflow: hidden; 42 | height: 100vh; 43 | } 44 | 45 | body { 46 | font-family: $main-font; 47 | color: $dark-color; 48 | } 49 | 50 | %abs { 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | height: 100%; 55 | width: 100%; 56 | } 57 | 58 | .mask { 59 | overflow: hidden; 60 | } 61 | 62 | @mixin outlined($color: $dark-color, $size: 1px) { 63 | color: transparent; 64 | -webkit-text-stroke: $size $color; 65 | } 66 | 67 | /* #LAYOUT - START*/ 68 | 69 | #hero-slider { 70 | position: relative; 71 | height: 100vh; 72 | display: flex; 73 | background: $dark-color; 74 | 75 | &:not(.ready) { 76 | visibility: hidden; 77 | } 78 | } 79 | 80 | #slideshow { 81 | position: relative; 82 | flex: 1 1 $main-width; 83 | display: flex; 84 | align-items: flex-end; 85 | padding: $offset; 86 | 87 | } 88 | 89 | #slides-main { 90 | @extend %abs; 91 | 92 | &:after { 93 | content: ''; 94 | @extend %abs; 95 | background-color: rgba(0, 0, 0, .25); 96 | z-index: 100; 97 | } 98 | 99 | .slide-image { 100 | @extend %abs; 101 | background-position: center; 102 | background-size: cover; 103 | z-index: -1; 104 | } 105 | } 106 | 107 | #slides-aux { 108 | position: relative; 109 | top: 1.25rem; 110 | width: 100%; 111 | 112 | .slide-title { 113 | position: absolute; 114 | z-index: 300; 115 | font-size: 4vw; 116 | font-weight: 700; 117 | line-height: 1.3; 118 | @include outlined(#fff); 119 | } 120 | } 121 | 122 | #info { 123 | position: relative; 124 | flex: 1 1 $side-width; 125 | padding: $offset; 126 | background-color: #fff; 127 | 128 | .slider-title-wrapper { 129 | position: absolute; 130 | top: $offset; 131 | left: calc(100% - #{$offset}); 132 | transform-origin: 0% 0%; 133 | transform: rotate(90deg); 134 | @include outlined; 135 | } 136 | 137 | .slider-title { 138 | position: relative; 139 | font-size: $title-size; 140 | line-height: 1.3; 141 | white-space: nowrap; 142 | font-weight: 700; 143 | text-align: center; 144 | text-indent: -1%; 145 | } 146 | 147 | .line { 148 | position: absolute; 149 | top: 0; 150 | left: 0; 151 | height: 12px; 152 | width: 100%; 153 | background: $dark-color; 154 | } 155 | 156 | .about { 157 | position: absolute; 158 | bottom: $offset; 159 | right: $offset; 160 | text-align: right; 161 | max-width: 85%; 162 | font-size: .8rem; 163 | line-height: 1.2; 164 | 165 | a:hover { 166 | opacity: .8; 167 | } 168 | } 169 | } 170 | 171 | #logo { 172 | position: absolute; 173 | top: $offset; 174 | left: $offset; 175 | padding-right: $offset; 176 | z-index: 300; 177 | 178 | .logo-text { 179 | position: relative; 180 | font-size: 2rem; 181 | font-weight: 300; 182 | color: #fff; 183 | } 184 | 185 | &:after { 186 | content: ''; 187 | position: absolute; 188 | top: 0; 189 | right: 0; 190 | height: 100%; 191 | width: 1px; 192 | background-color: #fff; 193 | } 194 | } 195 | 196 | #slider-nav { 197 | position: absolute; 198 | top: 2rem; 199 | right: calc(#{$side-width} - #{$nav-size}/2); 200 | display: flex; 201 | align-items: center; 202 | justify-content: space-around; 203 | z-index: 500; 204 | 205 | .current { 206 | color: #fff; 207 | } 208 | 209 | %pseudo { 210 | content: ''; 211 | position: absolute; 212 | height: 100%; 213 | width: 50% 214 | } 215 | 216 | .sep { 217 | position: relative; 218 | width: 40px; 219 | height: 2px; 220 | margin: 0 1rem; 221 | 222 | &:before { 223 | @extend %pseudo; 224 | background-color: #fff; 225 | left: 0; 226 | } 227 | 228 | &:after { 229 | @extend %pseudo; 230 | background-color: currentColor; 231 | right: 0; 232 | } 233 | } 234 | 235 | .total { 236 | color: $dark-color; 237 | } 238 | 239 | >span { 240 | font-size: 1.5rem; 241 | } 242 | } 243 | 244 | /* #LAYOUT - END*/ 245 | 246 | /* #INITIAL ANIMATION - START */ 247 | 248 | #hero-slider { 249 | #logo:after { 250 | transform: scaleY(0); 251 | transform-origin: 50% 0; 252 | transition: transform .35s $easing; 253 | } 254 | 255 | .logo-text { 256 | display: block; 257 | transform: translate3d(120%, 0, 0); 258 | opacity: 0; 259 | transition: transform .8s .2s, opacity .5s .2s; 260 | } 261 | 262 | .current, 263 | .sep:before { 264 | opacity: 0; 265 | transition: opacity .4s 1.3s; 266 | } 267 | 268 | #info { 269 | transform: translate3d(100%, 0, 0); 270 | transition: transform 1s $easing .6s; 271 | } 272 | 273 | .line { 274 | transform-origin: 0% 0; 275 | transform: scaleX(0); 276 | transition: transform .7s $easing 1s; 277 | } 278 | 279 | .slider-title { 280 | overflow: hidden; 281 | 282 | >span { 283 | display: block; 284 | transform: translate3d(0, -100%, 0); 285 | transition: transform .5s 1.5s; 286 | } 287 | } 288 | 289 | &.ready { 290 | #logo:after { 291 | transform: scaleY(1); 292 | } 293 | 294 | .line { 295 | transform: scaleX(1); 296 | } 297 | 298 | .logo-text { 299 | opacity: 1; 300 | transform: translate3d(0, 0, 0); 301 | } 302 | 303 | #info, 304 | .slider-title>span { 305 | transform: translate3d(0, 0, 0); 306 | } 307 | 308 | .current, 309 | .sep:before { 310 | opacity: 1; 311 | } 312 | } 313 | 314 | &:not(.loaded) { 315 | .slide:not(:first-child) { 316 | visibility: hidden; 317 | } 318 | } 319 | } 320 | 321 | /* #INITIAL ANIMATION - END */ 322 | 323 | /* #SLIDESHOW - START */ 324 | #slides-main { 325 | overflow: hidden; 326 | 327 | .abs-mask { 328 | @extend %abs; 329 | overflow: hidden; 330 | // will-change: transform; 331 | } 332 | 333 | .slide { 334 | @extend %abs; 335 | overflow: hidden; 336 | will-change: transform; 337 | 338 | .slide-image { 339 | will-change: transform; 340 | } 341 | 342 | &.prev { 343 | z-index: 5; 344 | transform: translate3d(-100%, 0, 0); 345 | transition: 1s $easing; 346 | 347 | .abs-mask { 348 | transform: translateX(80%); 349 | transition: 1s $easing; 350 | } 351 | 352 | // .slide-image { 353 | // transition: transform 0s 1s; 354 | // } 355 | } 356 | 357 | &.active { 358 | z-index: 10; 359 | transform: translate3d(0, 0, 0); 360 | transition: transform 1s $easing; 361 | 362 | .abs-mask { 363 | transform: translate3d(0, 0, 0); 364 | transition: transform 1s $easing; 365 | } 366 | 367 | // .slide-image { 368 | // transform: scale(1.01); 369 | // transition: transform 1s $easing; 370 | // } 371 | } 372 | 373 | &:not(.prev):not(.active) { 374 | z-index: -1; 375 | transform: translate3d(100%, 0, 0); 376 | 377 | .abs-mask { 378 | transform: translateX(-50%); 379 | } 380 | } 381 | 382 | // &:not(.active) { 383 | // .slide-image { 384 | // transform: scale(1.21); 385 | // } 386 | // } 387 | 388 | @at-root #hero-slider.prev & { 389 | &.prev { 390 | transform: translate3d(100%, 0, 0); 391 | 392 | .abs-mask { 393 | transform: translate3d(-80%, 0, 0); 394 | } 395 | } 396 | 397 | &:not(.prev):not(.active) { 398 | transform: translate3d(-100%, 0, 0); 399 | 400 | .abs-mask { 401 | transform: translate3d(50%, 0, 0); 402 | } 403 | } 404 | } 405 | } 406 | } 407 | 408 | #slides-aux { 409 | .slide { 410 | &:not(.active) { 411 | transform: translateX(-20%); 412 | opacity: 0; 413 | } 414 | 415 | &.prev { 416 | transition: transform .0s .2s, opacity .2s; 417 | } 418 | 419 | &.active { 420 | transition: opacity .6s .8s, transform .5s cubic-bezier(0.23, 1, 0.32, 1) .8s; 421 | } 422 | } 423 | } 424 | 425 | /* #SLIDESHOW - END */ 426 | 427 | /* #RESPONSIVE - START*/ 428 | /* Landscape */ 429 | @media only screen and (max-device-width: 812px) and (orientation: landscape) { 430 | #info { 431 | 432 | .line, 433 | .about { 434 | display: none; 435 | } 436 | 437 | .slider-title-wrapper { 438 | top: auto; 439 | bottom: 2rem; 440 | left: calc(70% + 11px); 441 | transform-origin: 35% -100%; 442 | } 443 | } 444 | 445 | #slides-aux { 446 | top: 0; 447 | } 448 | } 449 | 450 | @media only screen and (max-device-width: 768px) and (orientation: portrait) { 451 | #info { 452 | display: none; 453 | } 454 | 455 | #slides-aux { 456 | display: flex; 457 | align-items: flex-end; 458 | top: 0; 459 | 460 | .slide-title { 461 | font-size: 3rem; 462 | } 463 | } 464 | 465 | #slider-nav { 466 | right: 2rem; 467 | } 468 | } 469 | 470 | 471 | @media only screen and (max-device-width: 680px) and (orientation: portrait) { 472 | #slides-aux { 473 | .slide-title { 474 | font-size: 2.5rem; 475 | } 476 | } 477 | 478 | #slider-nav { 479 | top: 6rem; 480 | right: auto; 481 | left: 2rem; 482 | } 483 | } 484 | 485 | /* #RESPONSIVE - END*/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fullscreen Slider Example 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 48 |
49 |
50 |
51 | 52 |

53 | Projects 54 |

55 |
56 |
57 |

58 | A pure CSS/JS slider layout
59 | Developed for Toptal engineering blog
60 | by Stefan V, 61 | repo on Github 62 |

63 |
64 |
65 | 70 |
71 | 72 | 73 | 74 | --------------------------------------------------------------------------------