Question

在下面的html我想介绍滑块，但我无法做到这一点。我想将幻灯片1向左滑动，以便幻灯片2可见。怎么做到这一点？

下面是示例图片：在图片中，我只需要这3个圆圈。

<!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>

Answer 1

自举：

https://getbootstrap.com/

与全世界一起在网络上构建响应迅速，移动优先的项目   最流行的前端组件库。

Bootstrap是一个开源工具包，用于开发HTML，CSS和   JS。快速制作您的想法原型或使用我们的构建您的整个应用程序   Sass变量和mixins，响应式网格系统，广泛的预建   组件，以及基于jQuery构建的强大插件。

有一个名为 Carousel 的好组件。 https://getbootstrap.com/docs/4.1/components/carousel/
这是一个例子：

＆＃13;

Object.keys[b]

＆＃13;

Answer 2

举个例子，它包含你可以使用的脚本联盟，以便操纵过渡的节奏，你可以玩风格

<!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>

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

2 个答案:

自举：