具有渐变背景的响应式旋转木马
栏目分类:幻灯片 / 轮播图   发布日期:2021-10-03   浏览次数:

一个漂亮的响应式旋转木马,带有渐变背景,其颜色来自您正在查看的图像。

使用:

1. 将图片添加到轮播。

<div class="carrousel">
  <div class="carrousel-item carrousel-item-visible">
    <img class="carrousel-item-img" src="img/1.jpg" alt="Joker movie poster">
  </div>
  <div class="carrousel-item">
    <img class="carrousel-item-img" src="img/2.jpg" alt="Baby Driver movie poster">
  </div>
  <div class="carrousel-item">
    <img class="carrousel-item-img" src="img/3.jpg" alt="Parásitos movie poster">
  </div>
  <div class="carrousel-actions">
    <button class="btn btn-carrousel" id="carrousel-btn-prev" aria-label="Previous slide">
      Prev Image
    </button>
    <button class="btn btn-carrousel" id="carrousel-btn-next" aria-label="Next slide">
      Next Image
    </button>
  </div>
</div>

2.旋转木马所需的CSS样式。

img {
  width: 100%;
  height: auto;
}
 
.btn {
  font-weight: bold;
  border: 0;
  cursor: pointer;
}
 
.btn i {
  font-size: 2rem;
}
 
.btn-carrousel {
  background-color: #fff;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
}
 
.btn-carrousel:hover {
  background-color: rgba(255, 255, 255, .75);
}
 
.fa-angle-left {
  padding-right: .15rem;
}
 
.fa-angle-right {
  padding-left: .15rem;
}
 
.carrousel {
  margin: 0 auto;
  max-width: 700px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
 
.carrousel-item {
  width: 100%;
  display: none;
}
 
.carrousel-item-img {
  border-radius: 1.5em;
}
 
.carrousel-item-visible {
  display: block;
  animation: fadeVisibility 0.5s;
}
 
.carrousel-actions {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 3%;
  right: 3%;
  transform: translateY(-50%);
}
 
/* ANIMATIONS */
 
@keyframes fadeVisibility {
  0% {
      opacity: 0;
  }
 
  100% {
      opacity: 1;
  }
}
 
/* MEDIA QUERIES */
 
@media (max-width: 768px) {
  .carrousel {
      width: 100%;
      max-width: 100%;
  }
 
  .carrousel-item-img {
      border-radius: 0;
  }
}

3. 加载所需的颜色窃贼库以从图像中获取主色。

<script src="/uploads/allimg/211003/0912563109-3.jpg"></script>

4. 启用轮播的主要 JavaScript。

/* SELECTORS */
const slides = document.getElementsByClassName("carrousel-item")
let slidePosition = 0
const totalSlides = slides.length
const colorThief = new ColorThief()
 
/* EVENT LISTENERS */
document.getElementById("carrousel-btn-prev").addEventListener("click", function() {
    moveSlide("previous")
})
document.getElementById("carrousel-btn-next").addEventListener("click", function() {
    moveSlide("next")
})
 
/* FUNCTIONS */
function hideAllSlides() {
    for(const slide of slides) {
        slide.classList.remove("carrousel-item-visible")
    }
}
 
function showCurrentSlide() {
    slides[slidePosition].classList.add("carrousel-item-visible")
}
 
function moveToPreviousPosition() {
    if(slidePosition > 0) {
        slidePosition--
    } else {
        slidePosition = totalSlides - 1
    }
}
 
function moveToNextPosition() {
    if(slidePosition < totalSlides - 1) {
        slidePosition++
    } else {
        slidePosition = 0
    }
}
 
function moveSlide(direction) {
    hideAllSlides()
 
    if(direction === "previous") {
        moveToPreviousPosition()
    } else if(direction === "next") {
        moveToNextPosition()
    }
 
    showCurrentSlide()
    getDominantColor()
}
 
function changeBGColor(color) {
    document.body.style.background = `linear-gradient(to bottom right, rgb(15, 15, 15) 50%, rgb(${color[0]}, ${color[1]}, ${color[2]}))`
}
 
function getDominantColor() {
    const img = document.querySelector('.carrousel-item-visible .carrousel-item-img')
 
    // Make sure image is finished loading
    if (img.complete) {
        changeBGColor(colorThief.getColor(img))
    } else {
        img.addEventListener('load', function() {
            changeBGColor(colorThief.getColor(img))
        });
    }
}

官方网站:https://github.com/aidacapom/carrousel-js

相关热词: 旋转木马幻灯片

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库