Question

我正在尝试设置一个小旋转木马来展示我曾经做过的一些项目。图像显示但由于某种原因幻灯片在我点击它们时不会移动轮播。谁知道为什么？

我已经尝试过一些不同的东西，但它没有修复它。

谢谢！

<div class="container" style="margin: 50px auto;">
            <div>
                <h4 style="margin: 1em 1em 1em 1em;">Projects</h4>
                <h6>Take a quick look at some of the projects I've worked on.</h6>
                <div>
                    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="margin: 50px auto;height:350px;width:600px;">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>

                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="img/bg.jpg" alt="Project #1" class="carousel-item">
                                <div class="carousel-caption">
                                <h3>Example #1</h3>
                                <p>Description #1</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="img/bg.jpg" alt="Project #2" class="carousel-item">
                                <div class="carousel-caption">
                                    <h3>Example #2</h3>
                                    <p>Description #2!</p>
                                </div>
                            </div>
                            <div class="item">
                                <img src="img/bg.jpg" alt="Project #3" class="carousel-item">
                                <div class="carousel-caption">
                                    <h3>Example #3</h3>
                                    <p>Description #3</p>
                                </div>
                            </div>
                        </div>

                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                        <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                        <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            <div>
        </div>

Answer 1

尝试添加此内容而不是您的内容：

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>

                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>

确保传送带的href和js文件的css是正确的。

并在<head>部分的第1位添加：

<script>
        // Load this when the DOM is ready
        $(function () {
            // You used .myCarousel here.
            // That's the class selector not the id selector,
            // which is #myCarousel
            $('#myCarousel').carousel();
        });
    </script>

希望这有用：）

为什么我的旋转木马不工作？

1 个答案: