Wallop

Wallop

关注
发信
关注(28)粉丝(399)

javascript - 带有选项的Wallop无法正常工作

我正在尝试实现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>

最佳答案

我认为问题在于您的新类正在覆盖原始类中的某些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规则。

07-24 16:27
Powered by LMLPHP ©2024 Wallop 0.025628