Question

我想在我的网页中使用循环内容轮播样式。我有两张相册可以使用这种风格显示。我可以显示一个，但我不能将其应用到另一个专辑。我通过在html代码的主体中处理和粘贴相同的代码来尝试这个。

我是否必须在第二次粘贴代码后修改代码？

（我的第一张专辑正常运作。我希望将相同的风格应用于同一网页中的另一组图像。 http://tympanus.net/Development/CircularContentCarousel/）

以下是我的代码。

<body>
<div class>
<div class="container">
 <div class="row about">
      <div class="col-md-8">
             <h3 class="m_2">Show Rooms</h3>
            <div id="ca-container" class="ca-container">
                <div class="ca-wrapper">
                     <div class="ca-item ca-item-1">
                       <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon1"> </div>
                        </div>
                      </div>
                    <div class="ca-item ca-item-2">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon2"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-3">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon3"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-4">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon4"> </div>
                         </div>
                    </div>
                    <div class="ca-item ca-item-5">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon5"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-6">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon6"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-7">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon7"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-8">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon"> </div>
                        </div>
                    </div>
            </div>
         </div>

                <script type="text/javascript">
                    $('#ca-container').contentcarousel();
                </script>
       </div>
       <div class="row about">
        <div class="col-md-8">
            <h3 class="m_2"> Cricket</h3>
            <div id="ca-container1" class="ca-container1">
                <div class="ca-wrapper">
                     <div class="ca-item ca-item-1">
                       <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon1"> </div>
                        </div>
                      </div>
                    <div class="ca-item ca-item-2">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon2"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-3">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon3"> </div>
                        </div>
                        </div>
                    <div class="ca-item ca-item-6">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon6"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-7">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon7"> </div>
                        </div>
                    </div>
                    <div class="ca-item ca-item-8">
                        <div class="ca-item-main">
                            <div class="ca-icon"> </div>
                            <div class="ca-icon"> </div>
                        </div>
                    </div>
                    </div>

                </div>
            </div>

                <script type="text/javascript">
                    $('#ca-container').contentcarousel();
                </script>
        </div>
        </div>

    </body>

Answer 1

在给定url的转盘中，有一个 id 给容器 div ，即 #ca-container 。可能是轮播脚本引用相同的ID来创建功能，并且因为在同一页面中重复id，您的轮播无效。

在调用轮播脚本时尝试使用不同的ID或使用公共类。

希望这有帮助！

圆形内容轮播样式

1 个答案: