简体   繁体   中英

Bootstrap : home page slider not working

I'm using BS 3.0, the problem is that I've added all the codes for scripts and slider itself but it does not rotate images. This is the order of the js files:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<Script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script>

And a few more after this. To add images I have this code:

<div class="container-fluid">
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/slide1.jpg" alt="..." class="img-responsive">
                    <div class="carousel-caption  lead  visible-lg visible-md" >
                        <h1 class="text-danger">Welcome To<span class="white-bg">Site</span></h1>
                   </div>
                </div>
                <div class="item">
                    <img src="images/slider_2.png" alt="..." class="img-responsive">
                    <div class="carousel-caption    visible-lg visible-md" >
                        <h1 class="text-danger">Welcome To<span class="white-bg">site</span></h1>
                    </div>
                </div>
                <div class="item">
                    <img src="images/slider_3.png" alt="..." class="img-responsive">
                    <div class="carousel-caption  lead  visible-lg visible-md" >
                          <h1 class="text-danger">Welcome To<span class="white-bg">site</span></h1>
                    </div>
                </div>
            </div>
        </div> <!-- Carousel -->
    </div>
</div>

You might have forgot to add the trigger and CSS file for the Bootstrap (It will not work without the CSS file, and will not give an error in the console either)

$('.carousel').carousel({
    interval: 3000
})

Here is a working fiddle, i added the CSS library and the jQuery code to trigger the slider: http://jsfiddle.net/43j8ebh6/1/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM