CSS   21
responsive carousel slide css
Guest on 18th September 2023 08:01:47 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-slide {
  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-slide .carousel-item {
  18.         position: absolute;
  19.         left: 100%;
  20.         top: 0;
  21.         width: 100%; /* necessary for non-active slides */
  22.         display: block; /* overrides basic carousel styles */
  23.         z-index: 1;
  24.         -webkit-transition: left .2s ease;
  25.         -moz-transition: left .2s ease;
  26.         -ms-transition: left .2s ease;
  27.         -o-transition: left .2s ease;
  28.         transition: left .2s ease;
  29. }
  30. .carousel-no-transition .carousel-item {
  31.         -webkit-transition: none;
  32.         -moz-transition: none;
  33.         -ms-transition: none;
  34.         -o-transition: none;
  35.         transition: none;
  36. }
  37. .carousel-slide .carousel-active {
  38.         left: 0;
  39.         position: relative;
  40.         z-index: 3;
  41. }
  42. .carousel-slide .carousel-item-next {
  43.         z-index: 2;
  44. }
  45. .carousel-slide .carousel-in {
  46.         left: 0;
  47. }
  48. .carousel-slide-reverse .carousel-out {
  49.         left: 100%;
  50. }
  51. .carousel-slide .carousel-out,
  52. .carousel-slide-reverse .carousel-in {
  53.         left: -100%;
  54. }
  55. .carousel-slide-reverse .carousel-item {
  56.         -webkit-transition: left .1s ease;
  57.         -moz-transition: left .1s ease;
  58.         -ms-transition: left .1s ease;
  59.         -o-transition: left .1s ease;
  60.         transition: left .1s ease;
  61. }
  62. .carousel-slide-reverse .carousel-active {
  63.         left: 0;
  64. }
  65. .carousel-item.no-transition {
  66.         transition: none !important;
  67. }
  68. .carousel-slide.carousel-autoplay-stopped .carousel-item {
  69.         -webkit-transition: left .1s ease;
  70.         -moz-transition: left .1s ease;
  71.         -ms-transition: left .1s ease;
  72.         -o-transition: left .1s ease;
  73.         transition: left .1s ease;
  74. }
Raw Paste

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