effect-cube.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .swiper.swiper-cube {
  2. overflow: visible;
  3. }
  4. .swiper-cube {
  5. .swiper-slide {
  6. pointer-events: none;
  7. backface-visibility: hidden;
  8. z-index: 1;
  9. visibility: hidden;
  10. transform-origin: 0 0;
  11. width: 100%;
  12. height: 100%;
  13. .swiper-slide {
  14. pointer-events: none;
  15. }
  16. }
  17. &.swiper-rtl .swiper-slide {
  18. transform-origin: 100% 0;
  19. }
  20. .swiper-slide-active {
  21. &,
  22. & .swiper-slide-active {
  23. pointer-events: auto;
  24. }
  25. }
  26. .swiper-slide-active,
  27. .swiper-slide-next,
  28. .swiper-slide-prev {
  29. pointer-events: auto;
  30. visibility: visible;
  31. }
  32. .swiper-cube-shadow {
  33. position: absolute;
  34. left: 0;
  35. bottom: 0px;
  36. width: 100%;
  37. height: 100%;
  38. opacity: 0.6;
  39. z-index: 0;
  40. &:before {
  41. content: '';
  42. background: #000;
  43. position: absolute;
  44. left: 0;
  45. top: 0;
  46. bottom: 0;
  47. right: 0;
  48. -webkit-filter: blur(50px);
  49. filter: blur(50px);
  50. }
  51. }
  52. }
  53. .swiper-cube {
  54. .swiper-slide-next + .swiper-slide {
  55. pointer-events: auto;
  56. visibility: visible;
  57. }
  58. }
  59. /* Cube slide shadows start */
  60. .swiper-cube {
  61. .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  62. .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  63. .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  64. .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  65. z-index: 0;
  66. backface-visibility: hidden;
  67. }
  68. }
  69. /* Cube slide shadows end */