如何在 HTML CSS 中制作幻灯片

Question

我想制作这样的幻灯片：https://www.inextenso.digital/about-us/（在页面末尾）

但我是 HTML 和 CSS 的初学者。我不会让块超过父块并在我的块中添加填充..我不能添加图片，因为我在这个网站上太新了，但如果你看到我的代码，也许你会理解。

我对 CSS 动画和我在 google 一些幻灯片中找到的所有幻灯片一无所知，但每次都是 3 或 4 张图片，它们占据了所有屏幕，但事实并非如此我在找什么..

.slider-container {
  width: 70vw;
  height: 50vh;
  margin: auto;
  margin-top: 10vh;
  background-color: lightcyan;
  padding: 30px;
}

.image-container {
  display: flex;
  justify-content: space-between;
  overflow: scroll;
}

.slider-image {
  display: flex;
  border: 1px black solid;
  height: 50vh;
  width: 20vw;
}


/* 

.image-container {
    width: 3000px;
    height: 400px;
    clear: both;
    position: relative;

    animation-name: slider;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: backwards;
    animation-play-state: running;
}


.slider-image {
 width: 1000px;
    height: 400px;
    float: left;
    position: relative;
}


@keyframes slider {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(-1000px, 0);
    }
    100% {
        transform: translate(-2000px, 0);
    }
}

.un {
    background-color: lightgreen;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.deux {
    background-color: lightblue;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trois {
  background-color: lightcoral;
  font-size: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
} */

<div class="slider-container">
  <div class="image-container">
    <div class="slider-image un">1</div>
    <div class="slider-image deux">2</div>
    <div class="slider-image trois">3</div>
    <div class="slider-image quatre">4</div>
    <div class="slider-image cinq">5</div>
    <div class="slider-image six">6</div>
    <div class="slider-image sept">7</div>
    <div class="slider-image huit">8</div>
    <div class="slider-image neuf">9</div>
  </div>
</div>

Answer 1

我建议您使用 Slick library (working with JQuery)，它可以让您非常轻松地创建轮播。

Answer 2

// 添加这些 javascript

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<div class="slider-container">
  <div class="image-container">
    <div class="slider-image un">1</div>
    <div class="slider-image deux">2</div>
    <div class="slider-image trois">3</div>
    <div class="slider-image quatre">4</div>
    <div class="slider-image cinq">5</div>
    <div class="slider-image six">6</div>
    <div class="slider-image sept">7</div>
    <div class="slider-image huit">8</div>
    <div class="slider-image neuf">9</div>
  </div>
</div>

<script type="text/javascript">
$('.slider-image').not('.slick-initialized').slick({
                nextArrow: '<i class="fa fa-angle-right nextArrowBtn"></i>',
                prevArrow: '<i class="fa fa-angle-left prevArrowBtn"></i>',
                slidesToShow: 4,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 8000
        });
</script>

如何在 HTML CSS 中制作幻灯片

How to do a slideshow in HTML CSS

javascript

html

css

slideshow