Question

我有一个HTML / CSS图像滑块，可在用户单击按钮时更改图像。我需要用户能够将图像滑动到移动设备上的下一张幻灯片。

任何提示？

以下代码：

        .carousel {
            width: 100%;
            max-width: 720px;
            min-width:320px;
            margin: 0 auto;
            font-size: 100%;
            font-family: 'Roboto', Arial, sans-serif;
        }

        input {
          display: none;
        }

        .radio {
            width: 10px;
            height: 10px;
            overflow: hidden;
            margin: 10px 10px 0 0;
            padding: 0;
            text-align: center;
            text-decoration: none;
            font-size: 14px;
            color: #1caade;
            font-weight: 900;
            cursor: pointer;
            border: 2px solid #1caade;
            border-radius: 50%;
            display: inline-block;
          transition: background-color .4s;
        }

        .radio:hover {
          background-color: #1caade;
        }

        input:checked ~ .radio {
            color: #1caade;
            background-color: #1caade;
          opacity: 1;

        }

        .img-box {
          width: 100%;
          max-width: 1000px;
          height: 200px;
          margin: 0 auto;
          position: relative;
          overflow: hidden;
        }

        @media screen and (min-width: 1200px) {
            .img-box {
                width: 100%;
                max-width: 700px;
                height:200px;
            }
        }


        #one, #two, #three {
            width: 100%;
          height: 200px;
          opacity: 0;
          -webkit-transform: translate(1000px);
          transition-property: -webkit-transform, opacity;
          transition-duration: .5s;
          position: absolute;
        }

        #img-1:checked ~ .img-box #one,
        #img-2:checked ~ .img-box #two,
        #img-3:checked ~ .img-box #three {
          opacity: 1;
          -webkit-transform: translate(0,0);
        }

        #img-1:checked ~ .nav label #dot-1.radio,
        #img-2:checked ~ .nav label #dot-2.radio,
        #img-3:checked ~ .nav label #dot-3.radio {
          color: #FFF;
          background-color: #1caade;


        }

        .nav {
          width: 100px;
          margin: 0 auto;

        }
    </style>
</head>
<body>
    <!-CAROUSEL -->
    <div clas="carousel">
        <input type="radio" name="slide" id="img-1" checked>
        <input type="radio" name="slide" id="img-2">
        <input type="radio" name="slide" id="img-3">

        <div class="img-box">
          <img id="three" src="image-1.png">
          <img id="two" src="http://www.oracle.com/us/corporate/citizenship/giving-volunteering/photo-article-environment-316154.jpg">
          <img id="one" src="image-1.png">
        </div>
        <div class="nav">
          <label for="img-1"><div id="dot-1" class="radio"></div></label>
          <label for="img-2"><div id="dot-2" class="radio"></div></label>
          <label for="img-3"><div id="dot-3" class="radio"></div></label>
        </div>
    </div>

图像滑块在移动设备上滑动时滑动

0 个答案: