Как убрать пустое место с слайдера карусели? - PullRequest
Новая
       104

Как убрать пустое место с слайдера карусели?

0 голосов
/ 17 июня 2020

Привет, ребята, я работаю над решением

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

Я хотел бы сделать этот переход плавным таким образом, чтобы одно изображение менялось во времени и пробелов не было.

Я не хочу использовать какую-либо внешнюю js библиотеку для достижения функциональности

Вот код: 

body,
html {
  margin: 0;
  padding: 0
}

a.ad320x50_container:hover,
a.ad320x50_container:visited {
  color: #000
}

.ad320x50_container {
  width: 320px;
  height: 50px;
  position: relative
}

.ad320x50_icon {
  float: left;
  width: 42px;
  height: 50px
}

.ad320x50_vertical_slider {
  float: left;
  width: 100px;
  height: 50px
}

.ad320x50_icon img {
  width: 42px;
  height: 42px;
  border-radius: 4px;
  margin: 1px;
  margin-top: 4px;
  margin-bottom: 4px
}

.ad320x50_title_container {
  float: left;
  width: 120px;
  height: 50px;
  margin-left: 8px;
  margin-top: 1px
}

.ad320x50_title {
  font-family: open sans;
  font-weight: 700;
  font-size: 15px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 3px;
}

.ad320x50_action_container {
  float: left
}

.ad320x50_description {
  clear: left;
  float: left;
  height: 20px
}

.ad320x50_description_text {
  font-family: open sans;
  font-size: 13px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 12px
}

.ad320x50_action_container a {
  height: 27px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: open sans;
  border-style: solid;
  position: absolute;
  right: 0;
  padding: 2px 15px;
  width: 32px;
  height: 32px;
}

.ad320x50_action_container a img {
  width: 40px;
  height: 40px;
}

.slider {
  background: white;
  height: 50px;
  overflow: hidden;
  position: relative;
  width: 100px;
  border: 1px solid red;
}

.slider .slide-track {
  animation: scroll 1s linear infinite forwards;
}

@keyframes scroll {
  0% {
    transform: translateY(0)
  }
  100% {
    transform: translateY(calc(-50px * 3))
  }
}
<div class="ad320x50_container">
  <div class="ad320x50_vertical_slider">
    <div class="slider">
      <div class="slide-track" id="adzslider">
        <div class="slide">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="50" width="100" alt="" />
        </div>
        <div class="slide">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="50" width="100" alt="" />
        </div>
        <div class="slide">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="50" width="100" alt="" />
        </div>

      </div>
    </div>
  </div>
  <div class="ad320x50_icon">
    <img src="https://de7yjjf51n4cm.cloudfront.net/banners/shopee_vn_icon.png">
  </div>
  <div class="ad320x50_title_container">
    <div class="ad320x50_title">
      <span>Shopping mọi lúc mọi nơi</span>
    </div>
  </div>
  <div class="ad320x50_action_container">
    <a href="#"><img src="https://lh5.googleusercontent.com/proxy/wvDqrYFcsKZRpctTmEJNx1UR7FWJKItpd3EDNvATaCrCGhWhh9vpvWM93cyxi7VlBHECP6sbVayjwwiUpxEi20IyNc-4QnfmndgaTw32DyP51JRdXyYDU3EAoZycaVOn2g"></a>
  </div>
</div>
...