Question

我正在尝试创建一个Jquery滑块，以在多个复选框菜单之间切换。

下图显示了我想要实施的行为：

以下是我到目前为止所尝试的内容：https://jsfiddle.net/x5otevf0/1/

HTML：

<!-- 
 * Jquery Image Slider Tutorial 
 * File : index.html
 * Author : Krishna Teja G S
 * Dated : 2nd January 2015
 * Article : http://packetcode.com/article/jquery-image-slider-tutorial
-->

   <!-- 
 * Jquery Image Slider Tutorial 
 * File : index.html
 * Author : Krishna Teja G S
 * Dated : 2nd January 2015
 * Article : http://packetcode.com/article/jquery-image-slider-tutorial
-->

<!DOCTYPE html>
<html>
<head>
<title>Jquery Slider Demo</title>
<script src="jquery-2.1.3.min.js"  type="text/javascript" ></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="slides">
	<div id="d1"> 
            <input type="checkbox" id="cb+@checkBoxesCounter" checked>
<br>            <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">1lab1</label> <br>
            <input type="checkbox" id="cb+@checkBoxesCounter" checked>
<br>            <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">1lab2</label> <br>
            <input type="checkbox" id="cb+@checkBoxesCounter">
        <br>    <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">1lab3</label> <br>
            <input type="checkbox" id="cb+@checkBoxesCounter" checked>
<br>            <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">1lab4</label> <br>
	</div>
	<div id="d2">
			<input type="checkbox" id="cb+@checkBoxesCounter" >
       <br>     <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">2lab1</label> <br>
            <input type="checkbox" id="cb+@checkBoxesCounter" checked>
<br>            <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">2lab2</label> <br>
            <input type="checkbox" id="cb+@checkBoxesCounter">
        <br>    <label id="lb+@checkBoxesCounter" dicLabel="@x.Item1.ToString()">2lab3</label> <br>   
	 </div>
	<div id="d3"> </div>
	<div id="d4"> </div>
</div>
</body>
</html>

在小提琴中，我们可以看到div和它们的内容（复选框输入和标签）实际上是滑动但标签是重叠的，复选框是不可点击的。

Answer 1

我用owl carousel来实现这个：

$(".owl-carousel").owlCarousel({
  items: 1,
  loop: true,
  nav: true
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>


<div class="owl-carousel">
  <div>
    <input type="checkbox">label 1
    <br>
    <input type="checkbox">label 2
    <br>
    <input type="checkbox">label 3</div>
  <div>
    <input type="checkbox">label 1
    <br>
    <input type="checkbox">label 2</div>
  <div>
    <input type="checkbox">label 1
    <br>
    <input type="checkbox">label 2
    <br>
    <input type="checkbox">label 3</div>
</div>

Jquery Slider带复选框菜单

1 个答案: