带有描述的轮播推荐自动滚动

Question

我有旋转木马推荐，旋转木马正在点击右左箭头，我想要自动幻灯片图像，特定推荐人需要在图像顶部标题和图像底部描述，根据图像幻灯片，标题和描述应该在每个推荐成员的推荐中间显示，我附上了图片以供参考，有人有这样的推荐部分，所以请与我分享，请帮助非常感谢[

<script>
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'add', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');

class Carousel {
  constructor(container, items, controls) {
    this.carouselContainer = container;
    this.carouselControls = controls;
    this.carouselArray = [...items];
  }

  updateGallery() {
    this.carouselArray.forEach(el => {
      el.classList.remove('gallery-item-1');
      el.classList.remove('gallery-item-2');
      el.classList.remove('gallery-item-3');
      el.classList.remove('gallery-item-4');
      el.classList.remove('gallery-item-5');
    });

    this.carouselArray.slice(0, 5).forEach((el, i) => {
      el.classList.add(`gallery-item-${i+1}`);
    });
  }

  setCurrentState(direction) {

    if (direction.className == 'gallery-controls-previous') {
      this.carouselArray.unshift(this.carouselArray.pop());
    } else {
      this.carouselArray.push(this.carouselArray.shift());
    }
    
    this.updateGallery();
  }

  setControls() {
    this.carouselControls.forEach(control => {
      galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;

      document.querySelector(`.gallery-controls-${control}`).innerText = control;
    });
  }
 
  useControls() {
    const triggers = [...galleryControlsContainer.childNodes];

    triggers.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();

        if (control.className == 'gallery-controls-add') {
          const newItem = document.createElement('img');
          const latestItem = this.carouselArray.length;
          const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;

          Object.assign(newItem,{
            className: 'gallery-item',
            src: `#{this.carouselArray.length+1}`
          });
          newItem.setAttribute('data-index', this.carouselArray.length+1);

          this.carouselArray.splice(latestIndex, 0, newItem);
          document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
          this.updateGallery();

        } else {
          this.setCurrentState(control);
        }

      });
    });
  }
}

const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);

exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();

</script>

.gallery {
  width: 100%;
  position: relative;
}

.gallery-container {
  align-items: center;
  display: flex;
  height: 400px;
  margin: 0 auto;
  max-width: 1000px;
  position: relative;
}

.gallery-item {
  height: 150px;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease-in-out;
  width: 100px;
  z-index: 0;
}

.gallery-item-1 {
  left: 15%;
  opacity: .4;
  transform: translateX(-50%);
  margin-top: 150px;
}

.gallery-item-2,
.gallery-item-4 {
  height: 150px;
  opacity: 1;
  width: 100px;
  z-index: 1;
}

.gallery-item-2 {
  left: 30%;
  transform: translateX(-88%);
  margin-top: 150px;
}

.gallery-item-3 {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  height: 250px;
    opacity: 1;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    z-index: 2;
    margin-top: 50px;
}

.gallery-item-4 {
  left: 70%;
  transform: translateX(-12%);
  margin-top: 150px;
}

.gallery-item-5 {
  left: 85%;
  opacity: .4;
  transform: translateX(-48%);
  margin-top: 150px;
}

.gallery-controls {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.gallery-controls button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 16px;
  margin: 0 20px;
  padding: 0 12px;
  text-transform: capitalize;
}

.gallery-controls-next{
    position: absolute!important;
    right: 8%;
    top: 58%;
}
.gallery-controls-previous {
    position: absolute!important;
    left: 8%;
    top: 58%;
}

.gallery-controls button:focus {
  outline: none;
}

.gallery-controls-previous {
  position: relative;
}

.gallery-controls-previous::before {
  border: solid #ffc20e;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 15px;
  left: -10px;
  padding: 2px;
  position: absolute;
  top: 0;
  transform: rotate(135deg) translateY(-50%);
  transition: left 0.15s ease-in-out;
  width: 15px;
}

.gallery-controls-previous:hover::before {
  left: -18px;
}

.gallery-controls-next {
  position: relative;
}

.gallery-controls-next::before {
  border: solid #ffc20e;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 15px;
  padding: 2px;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: rotate(-45deg) translateY(-50%);
  transition: right 0.15s ease-in-out;
  width: 15px;
}

.gallery-controls-next:hover::before {
  right: -18px;
}

.gallery-nav {
  bottom: -15px;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  position: absolute;
  width: 100%;
}

.gallery-nav li {
  background: #ccc;
  border-radius: 50%;
  height: 10px;
  margin: 0 16px;
  width: 10px;
}

.gallery-nav li.gallery-item-selected {
  background: #555;
}

<div class="container">
          <div class="row">
          <div class="col-md-12 col-sm-6">
             <div class="gallery">
             <div class="testimonial-bg"></div>
    <div class="gallery-container">
      <img class="gallery-item gallery-item-1" src="images/events/guest.jpg" data-index="1">
      <img class="gallery-item gallery-item-2" src="images/events/guest.jpg" data-index="2">
      <img class="gallery-item gallery-item-3" src="images/events/guest.jpg" data-index="3">
      <img class="gallery-item gallery-item-4" src="images/events/guest.jpg" data-index="4">
      <img class="gallery-item gallery-item-5" src="images/events/guest.jpg" data-index="5">
    </div>
    <div class="gallery-controls"></div>
  </div>
  </div>
          </div>
      </div>

]1

Answer 1

见下面的代码，我添加了间隔时间为 5 秒的自动滑动功能。

如果你想改变间隔，请更新“constructor”和“setCurrentState”函数中的setInterval时间。

<script>
const galleryContainer = document.querySelector('.gallery-container');
const galleryControlsContainer = document.querySelector('.gallery-controls');
const galleryControls = ['previous', 'add', 'next'];
const galleryItems = document.querySelectorAll('.gallery-item');

class Carousel {
  constructor(container, items, controls) {
    this.carouselContainer = container;
    this.carouselControls = controls;
    this.carouselArray = [...items];
    this.mySlideInterval = null;
    this.mySlideInterval = setInterval(
        this.autoSlide.bind(this),
        5000
    );
  }
  
  autoSlide() {
    this.carouselArray.push(this.carouselArray.shift());
    this.updateGallery();
  }
  updateGallery() {
    this.carouselArray.forEach(el => {
      el.classList.remove('gallery-item-1');
      el.classList.remove('gallery-item-2');
      el.classList.remove('gallery-item-3');
      el.classList.remove('gallery-item-4');
      el.classList.remove('gallery-item-5');
    });

    this.carouselArray.slice(0, 5).forEach((el, i) => {
      el.classList.add(`gallery-item-${i+1}`);
    });
  }

  setCurrentState(direction) {

    if (direction.className == 'gallery-controls-previous') {
      this.carouselArray.unshift(this.carouselArray.pop());
    } else {
      this.carouselArray.push(this.carouselArray.shift());
    }
    
    clearInterval(this.mySlideInterval);
    this.updateGallery();
    this.mySlideInterval = setInterval(
        this.autoSlide.bind(this),
        5000
    );
  }

  setControls() {
    this.carouselControls.forEach(control => {
      galleryControlsContainer.appendChild(document.createElement('button')).className = `gallery-controls-${control}`;

      document.querySelector(`.gallery-controls-${control}`).innerText = control;
    });
  }
 
  useControls() {
    const triggers = [...galleryControlsContainer.childNodes];

    triggers.forEach(control => {
      control.addEventListener('click', e => {
        e.preventDefault();

        if (control.className == 'gallery-controls-add') {
          const newItem = document.createElement('img');
          const latestItem = this.carouselArray.length;
          const latestIndex = this.carouselArray.findIndex(item => item.getAttribute('data-index') == this.carouselArray.length)+1;

          Object.assign(newItem,{
            className: 'gallery-item',
            src: `#{this.carouselArray.length+1}`
          });
          newItem.setAttribute('data-index', this.carouselArray.length+1);

          this.carouselArray.splice(latestIndex, 0, newItem);
          document.querySelector(`[data-index="${latestItem}"]`).after(newItem);
          this.updateGallery();

        } else {
          this.setCurrentState(control);
        }

      });
    });
  }
}

const exampleCarousel = new Carousel(galleryContainer, galleryItems, galleryControls);

exampleCarousel.setControls();
// exampleCarousel.setNav();
exampleCarousel.useControls();

</script>