Jquery Slider with checkboxesメニュー

いくつかのチェックボックスメニューを切り替えるためのJqueryスライダを作成しようとしています。Jquery Slider with checkboxesメニュー

下の画像は、私が実装する振る舞いを示しています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"> 
 
\t <div id="d1"> 
 
      <input type="checkbox" id="[email protected]" checked> 
 
<br>   <label id="[email protected]" dicLabel="@x.Item1.ToString()">1lab1</label> <br> 
 
      <input type="checkbox" id="[email protected]" checked> 
 
<br>   <label id="[email protected]" dicLabel="@x.Item1.ToString()">1lab2</label> <br> 
 
      <input type="checkbox" id="[email protected]"> 
 
     <br> <label id="[email protected]" dicLabel="@x.Item1.ToString()">1lab3</label> <br> 
 
      <input type="checkbox" id="[email protected]" checked> 
 
<br>   <label id="[email protected]" dicLabel="@x.Item1.ToString()">1lab4</label> <br> 
 
\t </div> 
 
\t <div id="d2"> 
 
\t \t \t <input type="checkbox" id="[email protected]" > 
 
     <br>  <label id="[email protected]" dicLabel="@x.Item1.ToString()">2lab1</label> <br> 
 
      <input type="checkbox" id="[email protected]" checked> 
 
<br>   <label id="[email protected]" dicLabel="@x.Item1.ToString()">2lab2</label> <br> 
 
      <input type="checkbox" id="[email protected]"> 
 
     <br> <label id="[email protected]" dicLabel="@x.Item1.ToString()">2lab3</label> <br> 
 
\t </div> 
 
\t <div id="d3"> </div> 
 
\t <div id="d4"> </div> 
 
</div> 
 
</body> 
 
</html>

をここで

は、私がこれまで試してみましたものです

私たちは、divとその内容（チェックボックスの入力とラベル）は実際には滑っているが、ラベルは重ねられており、チェックボックスはクリックできないことがわかります。

出典

2017-02-06 Platus

から1のようなものを試してみてください：https://jsfiddle.net/x5otevf0/2/。私はスライドが変更される前にオプションを選択するのに3秒かかるフォームを嫌いです – Pete

jqueryイメージスライダーを使用しています。あなたのコードをちょっと微調整する必要があると思います。あるいは、パフォーマンスと互換性を向上させるために、owlスライダのようなコンテンツスライダを使用するだけで済みます。 – Aslam

私はこれを実装するためにフクロウカルーセルを使用しました：

あなたが-1文書の後ろにそれを取っZインデックスを.top与えているためです

$(".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>

出典

2017-02-06 12:48:41

Jquery Slider with checkboxesメニュー

答えて

関連する問題