CSS   21
slide css
Guest on 6th February 2023 01:34:22 PM


  1. .slide-carousel {
  2.   width: 100%;
  3.   height: 100%;
  4.   position: relative;
  5.   overflow: hidden;
  6. }
  7. .slide-carousel .item-list {
  8.   position: relative;
  9.   height: 100%;
  10.   width: 100%;
  11.   overflow: hidden;
  12. }
  13. .slide-carousel .item-list li .item-content {
  14.   width: 100%;
  15.   height: 100%;
  16. }
  17. .slide-carousel .item-list li .item-content a {
  18.   display: block;
  19.   width: 100%;
  20.   height: 100%;
  21. }
  22. .slide-carousel .item-list li .item-content a .cover-img {
  23.   width: 100%;
  24.   height: 100%;
  25. }
  26. .slide-carousel .indicator-list {
  27.   position: absolute;
  28.   bottom: 20px;
  29.   left: 50%;
  30.   margin-left: -63px;
  31.   z-index: 100;
  32. }
  33. .slide-carousel .indicator-list a {
  34.   display: inline-block;
  35.   width: 12px;
  36.   height: 12px;
  37.   border: 2px solid #fff;
  38.   border-radius: 50%;
  39.   overflow: hidden;
  40.   background-color: #ccc;
  41.   margin-left: 5px;
  42. }
  43. .slide-carousel .indicator-list a.selected {
  44.   border-color: #ff6700;
  45.   background-color: #5fff92;
  46. }
  47. .slide-carousel .controls {
  48.   opacity: 0;
  49. }
  50. .slide-carousel .controls a {
  51.   cursor: pointer;
  52.   text-decoration: none;
  53.   width: 40px;
  54.   height: 60px;
  55.   position: absolute;
  56.   background-color: rgba(0, 0, 0, 0.2);
  57.   color: #fff;
  58.   font-size: 35px;
  59.   padding-top: 25px;
  60.   z-index: 2;
  61. }
  62. .slide-carousel .controls a:hover {
  63.   background-color: rgba(0, 0, 0, 0.5);
  64. }
  65. .slide-carousel .controls .item-prev {
  66.   top: 50%;
  67.   left: 0;
  68.   margin-top: -42px;
  69. }
  70. .slide-carousel .controls .item-next {
  71.   top: 50%;
  72.   right: 0;
  73.   margin-top: -42px;
  74. }
  75. .slide-carousel .desc {
  76.   height: 72px;
  77.   width: 100%;
  78.   position: absolute;
  79.   bottom: 0;
  80.   left: 0;
  81.   background-color: rgba(0, 0, 0, 0.6);
  82.   z-index: 99;
  83. }
  84. .slide-carousel .desc strong {
  85.   color: #fff;
  86.   font-size: 20px;
  87.   line-height: 72px;
  88.   margin-left: 20px;
  89.   overflow: hidden;
  90.   white-space: nowrap;
  91.   text-overflow: ellipsis;
  92. }
  93. .slide-carousel:hover .controls {
  94.   opacity: 1;
  95.   transition: opacity 0.5s ease;
  96. }
Raw Paste

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