滑動式容器div

Question

我正在嘗試使用字段集復制輪播類型的布局。 要將表單分解為更多用戶友好的塊，我想一次顯示一個包含12個字段的字段集，並且有6個字段集。 這些只是復選框，所以它沒有聽起來那么糟糕！

我已經按照向前和向后滾動的方式進行了所有工作，但是如果單擊了移動位置的位置，那么將調整窗口大小，布局會中斷-您開始看到不應該看到的不同字段集-大概是由於瀏覽器寬度已更改，JS現在設置的位置不正確。

我很欣賞這樣做的更好方法。 但是，我希望有一個滑動效果，因為整個div都在移動，所以場集的滑入與其他滑出的發生完全相同。

不幸的是，由於視口寬度（vw）css，JSFiddle無法正常工作。 讓我知道是否有解決方法。

小提琴

請參見下面的屏幕截圖-第一個是在單擊“下一步”移動位置之前，第二個是在單擊下一個然后調整瀏覽器大小之后。 請注意，您可以在單擊“下一步”之前調整瀏覽器的大小，然后在單擊“下一步”時仍然可以正常使用，單擊后只是調整大小，這會導致第二個屏幕截圖出現問題。

的HTML

<div id="fieldset-container">
    <fieldset>

            <div class="field">
                <div class="checkbox">

                    <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>">

                        <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?>

                    </label>

                </div>

            </div>

        <div class="field">
            <div class="checkbox">

                <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>">

                    <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?>

                </label>

            </div>

        </div>

        <div class="field">
            <div class="checkbox">

                <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>">

                    <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?>

                </label>

            </div>

        </div>

    </fieldset>

    <fieldset>

        <div class="field">
            <div class="checkbox">

                <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>">

                    <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?>

                </label>

            </div>

        </div>

        <div class="field">
            <div class="checkbox">

                <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>">

                    <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?>

                </label>

            </div>

        </div>

        <div class="field">
            <div class="checkbox">

                <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>">

                    <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?>

                </label>

            </div>

        </div>

    </fieldset>

    <button class="fieldset-next">Next</button>
    <button class="fieldset-previous">Previous</button>

</div><!--/#fieldset-container-->

的CSS

#fieldset-container {
    width: 600vw;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 100vw;
    position: relative;
}
#fieldset-container fieldset {
    display: inline-block;
    overflow: hidden;
    width: 100vw;
    margin: 0 auto;
    padding: 0 100px;
}

JS

$('.fieldset-next').click(function(e) {
        e.preventDefault();
        var right = parseInt($('#fieldset-container').css("right")) + parseInt($('#fieldset-container fieldset').outerWidth());
        $('#fieldset-container').animate({
            right: right
        },  1000)
});
$('.fieldset-previous').click(function(e) {
    e.preventDefault();
    var right = parseInt($('#fieldset-container').css("right")) - $( window ).width();
    $('#fieldset-container').animate({
        right: right
    },  1000)
});

Answer 1

使用您提供的有限資源，我解決了您的問題：

 $('.fieldset-next').click(function(e) { e.preventDefault(); slide(true); // console.log(left, width, position); }); $('.fieldset-previous').click(function(e) { e.preventDefault(); slide(false); }); function slide(direction) { var left = parseInt($('#fieldset-container fieldset').eq(0).offset().left), width = $(window).width(), position = (-left/width) + ( direction ? 1 : -1 ), length = $('#fieldset-container fieldset').length, position = position > length -1 ? length -1 : position; slideTo(position); } function slideTo(n){ $('#fieldset-container').css('transform', 'translateX(-'+(n * 100) +'vw)'); } 

 #fieldset-container { width: 300vw; overflow: hidden; white-space: nowrap; position: relative; transition: transform .5s cubic-bezier(.5,0,.3,1); } #fieldset-container fieldset { display: inline-block; overflow: hidden; margin: 0 auto; padding: 0 100px; width: calc(100vw - 2px); box-sizing: border-box; } body { overflow-x:hidden; margin: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fieldset-container"> <fieldset> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> </fieldset> <fieldset> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> </fieldset> <fieldset> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> <div class="field"> <div class="checkbox"> <label data-container="body" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<?php echo ($field['definition']); ?>"> <input type="checkbox" name="<?php echo ($field['name']); ?>" value="<?php echo ($field['title']); ?>"> <?php echo ($field['title']); ?> </label> </div> </div> </fieldset> </div><!--/#fieldset-container--> <button class="fieldset-previous">Previous</button> <button class="fieldset-next">Next</button> 

請注意，我必須從滑塊容器中刪除按鈕。 如果您希望它們相互關聯，請將它們包裝在一個通用容器中：

<wrapper>
  <slider-container>
  <controls>
</wrapper>

但是，我相信您的jQuery函數計算正確位置有些偏離。 如果您要我調查這些內容，請告訴我。

---

旁注：我今天回答了有關創建自定義滑塊的問題。 它並不直接相關，但可能會有所幫助： 嘗試編寫簡單的Carousel 。 如果您急於趕時間，您可能想直接跳到該示例，盡管指出的某些觀點可能很有用。