Гладкий слайдер, вертикальные слайды обрезаются по 1 пикселю за раз (каждый раз, когда слайд меняется), затем исправляет свое - PullRequest
Новая
       31

Гладкий слайдер, вертикальные слайды обрезаются по 1 пикселю за раз (каждый раз, когда слайд меняется), затем исправляет свое

0 голосов
/ 08 ноября 2019

У меня есть вертикальный скользящий слайдер, он показывает 3 слайда за раз и перемещает вверх / вниз по 1 слайду за раз.

В IE слайды обрезаются сверху на 1 пиксель каждый раз, когда слайд перемещается вверх / вниз.

Затем слайдер показывает 1 пиксель следующего слайда внизу.

enter image description here

Он исправит себя после нескольких слайдов, а затем снова начнет работать неправильно 1px.

Я используюмодуль скользящего реагирования

Слайдер - это веб-часть SPFX для sharepoint, и я не могу дать демоверсию для игры.

Это единственный CSS, который я использую: 

.ControlZone--emphasisBackground, .ControlZoneEmphasisBackground {
  background: transparent;
}
.slick-slider {
  margin-left: 1px;
}
.slick-vertical .slick-slide {
  border: none;
}
.slick-slider .slick-arrow {
  display: block;
  z-index: 9999999;
  background: rgba(39, 39, 39, 0.65) !important;
  opacity: 0;
}
// Add :hover
.slick-slider:hover .slick-arrow {
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
  background-size: 25px !important;
  width: 36px;
  height: 36px;
}
.slick-slider .slick-next {
  right: 1px;
  background-size: 25px !important;
  width: 36px;
  height: 36px;
  &:before {
    display: none;
  }
}
.slick-slider .slick-prev {
  left: 1px;
  background-size: 25px !important;
  width: 36px;
  height: 36px;
  &:before {
    display: none;
  }
}
.slick-slider:hover .slick-next {
  opacity: 0.8;
  right: 1px;
  background-size: 25px !important;
  width: 36px;
  height: 36px;
  &:before {
    display: none;
  }
}
.slick-slider:hover .slick-prev {
  opacity: 0.8;
  left: 1px;
  background-size: 25px !important;
  width: 36px;
  height: 36px;
  &:before {
    display: none;
  }
}

div[class*='upArrows'] .slick-prev {
  transform: rotate(90deg);
}
div[class*='upArrows'] .slick-next {
  transform: rotate(90deg);
}

.slick-vertical .slick-slide {
  width: 100% !important;
  //height: auto;
}

.slick, .slick-wrapper {
  width: 100%;
}

.slick-next, .slick-prev {
  top: 45.5%;
}

.ms-DocumentCard {
  border: 1px solid rgb(234, 234, 234);
  user-select: none;
  margin-right: 1px;
}

.ms-DocumentCard:hover {
  border: 1px solid rgb(200, 200, 200);
  user-select: none;
}

.ms-DocumentCardTitle {
  overflow: initial !important;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .slick-slider .slick-track, .slick-slider .slick-list {
    max-height: 363px !important;
  }  
}
...