Question

我是一个网页，它将显示MySql数据库中的所有“活动”订单。该网页将显示在大屏幕上，因此我们可以看到哪些订单处于“有效”状态。

现在，我将循环浏览实际网页上的订单。

订单数量很多，因此它们都无法显示在页面上。所以用户必须滚动很多。

因此，我的目标是消除滚动并添加滑块功能。

因此用户不必向下滚动，但在其中具有“上一个”，“下一个”按钮。当单击“下一步”时，我希望网页显示下一批订单，依此类推。

在这里我可能会喜欢的例子。

因此，我将有一个遍历订单的查询。无法固定在此页面上的顺序应转到具有“下一页”和“上一页”页面的下一页。

我在看https://www.multislider.info/上的JQUERY MULTISLIDER 我试着玩这个，没有任何工作。

这是我的基本测试代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Bootstrap - CSS-->
    <link href="bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.4.1/css/bootstrap-theme.css" rel="stylesheet">
    <link href="bootstrap-3.4.1/css/bootstrap-theme.min.css" rel="stylesheet">


    <!-- CSS -->
    <style>
      .panel-success{
        display: inline-block;
      }
    </style>
    <!-- Font Awesome -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

  </head>
  <body>

<div class="row">


<div class="col-md-2 text-center" style="margin-top: 20%; border:2px solid red;">
    PREV
</div>
<div class="col-md-8">
<div class="panel panel-success">
<div class="panel-heading">ORDER 1 <span class="badge badge-secondary pull-right">DG3434JD</span></div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>

</tbody>
</table>
</div>
</div>

<div class="panel panel-success">
<div class="panel-heading">ORDER 2 <span class="badge badge-secondary pull-right">DG3434JD</span></div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>

</tbody>
</table>
</div>
</div>

</div>

<div class="col-md-2 text-center" style="margin-top: 20%;border:2px solid red;">
    NEXT
</div>

</div>


    <!-- Include jQuery -->
    <script src="/multislider/js/jquery-2.2.4.min.js"></script>

    <!-- Include Multislider -->
    <script src="/multislider/js/multislider.min.js"></script>
        <script src="bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="bootstrap-3.4.1/js/bootstrap.min.js"></script>


  </body>
</html>

我的问题是获得幻灯片视图的最佳方式；允许用户滑动到下一个面板以显示更多订单

先谢谢您。

如何将内容放入滑块并在其中滚动而不是向下滚动

0 个答案: