我正在尝试创建一个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及其内容(复选框输入和标签)实际上已滑动,但是标签被覆盖并且复选框不可单击。
最佳答案
我已经使用猫头鹰轮播实现了这一点:
$(".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>