相关疑难解决方法(0)

Bootstrap Carousel不会自动滑动

我正在使用Twitter的旋转木马(最新版本)引导程序,我已经开始工作了 - 除了它没有开始自动滑动.单击其中一个导航按钮后,它可以正常工作.不知道为什么会这样做.

这是标题中的我的JS设置:

    <script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script>

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script>
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>
Run Code Online (Sandbox Code Playgroud)

和HTML:

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

    <div class="active item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>


    <div class="item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
Run Code Online (Sandbox Code Playgroud)

也只是添加这个无济于事:

<script>
$('#myCarousel').carousel({
    interval: 1200
});
</script>
Run Code Online (Sandbox Code Playgroud)

完成上述更改后,javascript控制台会说:

未捕获的TypeError:Object#没有方法'carousel'(匿名函数)b.extend.ready …

javascript twitter-bootstrap

13
推荐指数
1
解决办法
7万
查看次数

Blazor Web assembly 中的 JavaScript 免费 Bootstrap Carousel

我是 Blazor 新手。

我在 .NET 5 中的 Blazor Webassemble 项目中创建了一个轮播。它不会自动滑动,并且其上一个和下一个按钮不起作用。

请建议如何在没有javascript的情况下解决这个问题。

下面是我的代码。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="/images/slide/slide-1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="/images/slide/slide-2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="/images/slide/slide-3.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span> …
Run Code Online (Sandbox Code Playgroud)

blazor .net-5 asp.net-blazor blazor-webassembly

1
推荐指数
1
解决办法
2629
查看次数