Question

我想在移动视图中制作这样的滑块，我是bootstrap和css的新手。我能做的就是这个。我不知道如何显示其他图片或部分的一半，或者我应该使用任何javascript滑块。我想制作一个完全相同的滑块。

<?php

$arrayData = array(
        array(

        "date" => "1/1/10",

        "name" => "peterparker",
    ),
    array(

        "name" => "Clark Kent",

        "date" => "2/10/27",
    ),
);
function GetTableResult($arrayData) {
  echo "<table id='Grid' class='table table-striped table-bordered table-hover dataTable no-footer DTTT_selectable' role='grid' aria-describedby='dynamic-table_info'>
          <thead>
            <tr>
              <th class='hidden-480' tabindex='0' aria-controls='dynamic-table' rowspan='1' colspan='1' aria-label='teste'>Date</th>
              <th class='hidden-480' tabindex='0' aria-controls='dynamic-table' rowspan='1' colspan='1' aria-label='teste'>Name</th>

            </tr>
          </thead>
          <tbody>";
            foreach($arrayData as $data){
                echo "<tr id='Grid_Linha_1' class='odd' role='row'>
              <td class = 'hidden-480'>" . $data['date']             . "</td>
              <td class = 'hidden-480'>" . $data['name']             . "</td>

            </tr>";
            }

          echo "</tbody>
        </table>";
}

GetTableResult($arrayData);

我不知道如何获得这样的滑块，如果有人可以指导我如何制作我想要的滑块？

Answer 1

$(document).ready(function() {
  // you can remove this if you want, it will stop the carousel transtioning automatically. 
  $('#myCarousel').carousel({
    interval: 10000
  });
});

.carousel-control {
  padding-top: 10%;
  width: 5%;
}

.thumbnail {
  width: 100px;
  height: 100px;
  text-align: center;
  color: white;
  font-size: 30px;
  background-image: url("https://image.ibb.co/nJceSm/Screen_Shot_2017_11_22_at_19_46_11.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-12">
    <h1>Bootstrap Row Slider</h1>

    <div class="well">
      <div id="slideCarousel" class="carousel slide">

        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="item active">
            <div class="row">
              <div class="col-sm-3 divPicture"><a class="thumbnail"> 1 </a>
              </div>
              <div class="col-sm-3 divPicture"><a class="thumbnail"> 2 </a>
              </div>
              <div class="col-sm-3 divPicture"><a class="thumbnail"> 3 </a>
              </div>
              <div class="col-sm-3 divPicture"><a class="thumbnail"> 4 </a>
              </div>
            </div>
            <!--/row-->
          </div>
          <!--/item-->
          <div class="item">
            <div class="row">
              <div class="col-sm-3"><a class="thumbnail"> 5 </a>
              </div>
              <div class="col-sm-3"><a class="thumbnail"> 6 </a>
              </div>
              <div class="col-sm-3"><a class="thumbnail"> 7 </a>
              </div>
              <div class="col-sm-3"><a class="thumbnail"> 8 </a>
              </div>
            </div>
            <!--/row-->
          </div>
          <!--/item-->
        </div>
        <!--/carousel-inner-->
        <a class="left carousel-control" href="#slideCarousel" data-slide="prev">‹</a>

        <a class="right carousel-control" href="#slideCarousel" data-slide="next">›</a>
      </div>
      <!--/myCarousel-->
    </div>
    <!--/well-->
  </div>
</div>

在这里，您可以看到如何使用bootstrap库来完成它。请在完整窗口中运行。

移动视图中的滑块显示下一个图像的一半

1 个答案: