Question

我试图用字段集复制轮播类型布局。为了将表单分解为更加用户友好的块，我想一次显示包含12个字段的字段集，并且有6个字段集。这些只是复选框，所以它没有听起来那么糟糕！

我已经完成了向后和向前滚动的所有工作，但是如果点击移动位置，那么窗口会调整大小，布局中断 - 你会开始看到不同的字段集应该不可见 - 大概是由于JS现在设置的错误位置，现在浏览器宽度已经改变了。

我很欣赏可能有更好的方法来做到这一点。但是，我想要一个幻灯片效果，因为整个div正在移动，所以滑动的字段集恰好与另一个滑出一样。

不幸的是，由于视口宽度（vw）css，JSFiddle无法正常工作。如果有办法解决这个问题，请告诉我。

请参阅下面的屏幕截图 - 首先是点击＆＃39;下一步＆＃39;移动位置，第二个是单击下一步然后调整浏览器大小。请注意，您可以在点击“下一步”之前调整浏览器的大小，当您点击“下一步”时它仍然可以正常工作，只需点击该按钮后再调整大小即可。＆＃39;导致第二个屏幕截图中的问题。

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

使用您提供的有限资源，我修复您的问题：

＆＃13;

$('.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)');
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

请注意我必须从滑块容器中删除按钮。如果您希望它们相关，请将它们包装在一个公共容器中：

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

但是，我相信你的jQuery函数计算正确的位置有点偏。如果你想让我调查那些，请告诉我。

旁注： 我今天回答了有关创建自定义滑块的问题。它没有直接关系，但可能有所帮助：Trying to Code a Simple Carousel。如果你匆匆忙忙，你可能想直接跳到这个例子，虽然有些观点指出可能有用。

滑动容器div

1 个答案: