文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用html和css在页面上制作幻灯片

问如何使用html和css在页面上制作幻灯片
EN

Stack Overflow用户

提问于 2018-06-06 10:46:11

回答 2查看 812关注 0票数 0

在下面的html中，我想介绍滑块，但是我不能这样做，我想把幻灯片-1滑到左边，这样幻灯片-2应该是可见的。如何做到这一点？

下面是一个例子图像:在这张关于箭头的图片中，我只需要这三个圆圈。

<!DOCTYPE html>
<html>

<head>
<style>

.slide-1{
   font-family: "Quicksand";
}

.slide-2{
   font-family: "Quicksand";
}

</style>

</head>

<body>

<div>

<div class="slide-1">
  <p text-wrap>This is the slide 1 content</p>
</div>

<div class="slide-2">
<p text-wrap>This is slide 2 content.And this will only be visible when user touch and side to the left of slide-1.How is this possible?</p></div>

</div>

</body>
</html>

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-06 15:00:14

自举：

https://getbootstrap.com/

用世界上最受欢迎的前端组件库在网络上构建响应性强的移动优先项目。引导是一个开源工具包，用于使用HTML、CSS和JS进行开发。快速原型您的想法或建立您的整个应用程序与我们的Sass变量和混合，响应网格系统，广泛的预置组件，和强大的插件上构建的jQuery。

有一个很好的组件叫做Carousel。https://getbootstrap.com/docs/4.1/components/carousel/

下面是一个示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="https://content.nike.com/content/dam/one-nike/en_lu/SU16/Running/Free-xcat/Desktop/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg.transform/full-screen/SU16_RN_NikeFree_InnovationHub_M_CDP_P1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://www.pandasecurity.com/spain/mediacenter/src/uploads/2014/08/free.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="https://blog.bufferapp.com/wp-content/uploads/2014/05/6110974997_8b0dfa13a0_b.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

票数 1

Stack Overflow用户

发布于 2018-06-06 12:47:04

以这个例子为例，它包含了您可以使用的脚本的范围，以便操作转换的节奏，并且您可以使用这种风格。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}
.main {

    width:50%;

    max-width: 1000px;
    margin:40px auto;
}
.slides {
    width:100%;
}

.slides img {
    width:70%;
    height:100%

}

.slidesjs-pagination {

    list-style:none;
    overflow:hidden;

}

.slidesjs-pagination li {
    float:left;
}

.slidesjs-pagination li a {
    border-radius: 100px;
    display:block;
    padding:10px 20px;
    color:rgba(220,220,220,0);
    text-decoration:none;
    background-color: rgba(220,220,220,0.6);

}

.slidesjs-pagination li a:hover {
    background:#000;
}

.slides .active {
    background-color: rgba(180,180,180,0.6);
    color: rgba(180,180,180,0);
}

.slidesjs-navigation{
    background-color: rgba(220,220,220,0.6);
    color:#000;
    text-decoration:none;
    display:inline-block;
    padding:13.6px 20px;
    float:right;
}

</style>
<body>

    <div class="main">
        <div class="slides">
            <img src="http://www.seguridad-maestro.tk/slideshow/1.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/2.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/3.jpg" alt="">
            <img src="http://www.seguridad-maestro.tk/slideshow/4.jpg" alt="">
        </div>
    </div>

    <script src="http://www.seguridad-maestro.tk/jquery-1.9.1.min.js"></script>
    <script src="http://www.seguridad-maestro.tk/slideshow.js"></script>
    <script src="http://www.seguridad-maestro.tk/js/jquery.slides.js"></script>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50718460

复制

相似问题

问如何使用html和css在页面上制作幻灯片
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用html和css在页面上制作幻灯片EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用html和css在页面上制作幻灯片
EN