时间戳

首页 > 解决方案 > 如何以这种形式输入滑块？

php - 如何以这种形式输入滑块？

问题描述

我想在表单标签中添加一个滑块。现在所有的照片都在一起了。我想让它更加用户友好。正如您在我的代码中看到的那样，我正在从数据库中获取所有图像。而且我已经覆盖了每个图像上的输入单选按钮，以便用户可以选择它的图像。

我已经尝试过使用 Slick 库，但它并不好。

<style type="text/css">
/*
    html, body {
      margin: 0;
      padding: 0;
    }
*/

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
      .img{
          width: 10%;
      }
  </style>

<style media="screen">
.input-hidden {
  position: absolute;
  left: -9999px;
}

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #090;
}


input[type=radio]:checked + label>img {
  transform: 
    rotateZ(-10deg) 
    rotateX(10deg);
}

/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {

  width: 115px;
  height: 115px;
  transition: 500ms all;
}
* {
  margin: 0px;
  padding: 0px;
    }
    </style>
</head>
<body>
    <form action="preview.php" method="post" >
     <?php

    $result_model = mysqli_query($conn, "SELECT * FROM model ORDER BY id DESC ");
    $result_metal = mysqli_query($conn, "SELECT * FROM metal ORDER BY id DESC ");
    $result_stone = mysqli_query($conn, "SELECT * FROM stone ORDER BY id DESC "); ?>


    <div >
    <div class="input-group">
      <p>Choose your Model:</p>
    </div>
     <div class="regular slider">
    <?php
    while($model = mysqli_fetch_assoc($result_model)){

    ?>
<!--    <input type="radio" name="model" id="model<?= $model['id'] ?>" class="input-hidden" value="<?= $model['id'] ?>" />-->
<!--

    <label for="model<?= $model['id'] ?>">
-->
      <img 
        src="images/<?= $model['image'] ?>"
        alt="<?= $model['name'] ?>" style="width:50%;" />

<!--    </label>-->

    &nbsp;&nbsp;
    <?php
        }   
    ?>
<!--    </div>-->
<!--      <br>-->
<div>
<!--
    <div class="input-group">
      <p>Choose your Metal:</p>
    </div>
-->
<!--

-->

      </div>
         <br>
       </div>

            <div class="input-group">
      <p>Choose your Metal:</p>
    </div>
        <div class="regular slider">
   <?php
    while($metal = mysqli_fetch_assoc($result_metal)){

    ?>
<!--
    <input type="radio" name="metal" id="metal<?= $metal['id'] ?>" class="input-hidden"  value="<?= $metal['id'] ?>" />

-->
<!--    <label for="metal<?= $metal['id'] ?>">-->
      <img 
        src="images/<?= $metal['image'] ?>"
        alt="<?= $metal['name'] ?>" />
<!--    </label>-->
    &nbsp;&nbsp;
    <?php
        }   
    ?>
    ?>
<!--    </div>-->
<!--      <br>-->
<div>
<!--
    <div class="input-group">
      <p>Choose your Metal:</p>
    </div>
-->
<!--

-->

      </div>
       </div>



 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
       $(".regular").slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
      });
      });
</script>
        </div>
    </form>

标签： phphtmlcssforms

解决方案

推荐阅读