CSS   21
responsive carousel
Guest on 18th September 2023 08:02:37 AM


  1. /*
  2.  * responsive-carousel
  3.  * https://github.com/filamentgroup/responsive-carousel
  4.  *
  5.  * Copyright (c)  Filament Group, Inc.
  6.  * Licensed under the MIT, GPL licenses.
  7. */
  8. .carousel-fade {
  9.         position: relative;
  10.         overflow: hidden;
  11.         -webkit-transform: translate3d(0, 0, 0);
  12.         -moz-transform: translate3d(0, 0, 0);
  13.         -ms-transform: translate3d(0, 0, 0);
  14.         -o-transform: translate3d(0, 0, 0);
  15.         transform: translate3d(0, 0, 0);
  16. }
  17. .carousel-fade .carousel-item {
  18.         position: absolute;
  19.         left: 0;
  20.         top: 0;
  21.         width: 100%; /* necessary for non-active slides */
  22.         display: block; /* overrides basic carousel styles */
  23.         -webkit-transition: opacity .5s ease;
  24.         -moz-transition: opacity .5s ease;
  25.         -ms-transition: opacity .5s ease;
  26.         -o-transition: opacity .5s ease;
  27.         transition: opacity .5s ease;
  28. }
  29. .carousel-fade .carousel-active {
  30.         position: relative;
  31. }
  32.  
  33. .carousel-item {
  34.         opacity: 0;
  35. }
  36.  
  37. .carousel-active {
  38.         opacity: 1;
  39. }
  40.  
  41. .carousel-fade .carousel-out {
  42.         opacity: 0;
  43. }
  44.  
  45. .carousel-fade .carousel-in {
  46.         opacity: 1;
  47. }
Raw Paste

Login or Register to edit or fork this paste. It's free.