Question

我正在尝试实施Wallop滑块：http://pedroduarte.me/wallop/

我的最终目标是在另一个Wallop滑块中设置另一个Wallop滑块。

当我尝试为Wallop滑块设置options时会出现问题。

没有选项，它的工作方式如下所示： http://pinefallstudios.com/wallop/without_options.html 代码是：

<html>

<head>
    <script type="text/javascript" src="Wallop.js"></script>
    <link rel="stylesheet" href="wallop.css">
    <link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>

    <div class="Wallop Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-item Wallop-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>
    <script type="text/javascript">

        var wallopEl = document.querySelector('.Wallop');
        var wallop = new Wallop(wallopEl);


        function onClickNext() {
            wallop.next();
        }

    </script>
</html>

但是，当我尝试将itemClass和currentItemClass设置为其他内容时，它会停止工作，如下所示：http://pinefallstudios.com/wallop/with_options.html 代码：

<html>

<head>
    <script type="text/javascript" src="Wallop.js"></script>
    <link rel="stylesheet" href="wallop.css">
    <link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>

    <div class="Wallop-outer Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-outer-item Wallop-outer-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var wallopOuterOptions = {
            itemClass: 'Wallop-outer-item',
            currentItemClass: 'Wallop-outer-item--current'
        }
        var wallopEl = document.querySelector('.Wallop-outer');
        var wallop = new Wallop(wallopEl, wallopOuterOptions);


        function onClickNext() {
            wallop.next();
        }

    </script>
</html>

我确认其他选项设置正确，正如您在console中看到的那样，因为我只设置了两个选项。

导致此问题的原因是什么？如何命名我的Wallop项目以便我可以使用另一个内部滑块？

更新正如@HungCao解释的那样，可能是由于CSS规则。

但是，在这种情况下如何创建内部滑块？这不起作用，如下所示：http://pinefallstudios.com/wallop/with_inner.html 代码：

<html>

<head>
    <script type="text/javascript" src="Wallop.js"></script>
    <link rel="stylesheet" href="wallop.css">
    <link rel="stylesheet" href="wallop--slide.css">
</head>
<body>
</body>

    <!-- Outer Slide -->
    <div class="Wallop-outer Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-item Wallop-item--current">
                <img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
            <h3>Inner Slider</h3>
            <!-- Inner Slide -->
            <div class="Wallop-inner Wallop--slide">
                <div class="Wallop-list">
                    <div class="Wallop-item Wallop-item-current">
                        <img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
                    </div>

                    <div class="Wallop-item">
                        <img onclick="onClickInnerNext();" src="http://pedroduarte.me/wallop/141b5b913de38d376ab9c633f344d401.gif" />
                    </div>
                </div>
            </div>
        </div>

            <div class="Wallop-item">
                <img onclick="onClickOuterNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var wallopOuterEl = document.querySelector('.Wallop-outer');
        var wallopOuter = new Wallop(wallopOuterEl);

        var wallopInnerEl = document.querySelector('.Wallop-inner');
        var wallopInner = new Wallop(wallopInnerEl);

        function onClickOuterNext() {
            wallopOuter.next();
        }

        function onClickInnerNext(){
            wallopInner.next();
        }

    </script>
</html>

Answer 1

我认为问题是你的新类正在覆盖原始的一些css规则。看看这两个街区

没有选项：

<div class="Wallop Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-item Wallop-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>

有选项：

<div class="Wallop-outer Wallop--slide">
        <div class="Wallop-list">
            <div class="Wallop-outer-item Wallop-outer-item--current">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>

            <div class="Wallop-outer-item">
                <img onclick="onClickNext();" src="https://d13yacurqjgara.cloudfront.net/users/31752/screenshots/2205163/home.png" />
            </div>
        </div>
    </div>

你有任何特殊的CSS规则吗？否则你应该保持他们的CSS规则。

Wallop的选项不起作用

1 个答案: