CODEWITHSUNDEEP
jquerycarouselbootstrap-4
Nahid Hasan
Nahid Hasan

Reputation: 707

Bootstrap slider not starting automatically

** I have seen a couple helpful solutions that worked for others.. implemented them in my tags.. noted the order but still my carousel slider will NOT start automatically? Can anyone help?? See code below:**

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Movie search App</title>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

        <script type="text/javascript" src="js/custom.js">

<!-- Bootstrap Core JavaScript -->

        </head>




            <div id="myCarousel" class="carousel slide">
                    <!-- Indicators -->
                    <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>

                    <!-- Wrapper for Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <!-- Set the first background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('img/1.jpg');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 1</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the second background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('img/3.jpg');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 2</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the third background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('img/4.jpg');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 3</h2>
                            </div>
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="icon-next"></span>
                    </a>

             </div>
</html>


       //jquery  
//for carousel customjs it is the slider part code in custom.js


            var $ = jQuery.noConflict();
              $(document).ready(function() {
                  $('#myCarousel').carousel({ interval: 200, cycle: true });
              });

Upvotes: 0

Views: 370

Answers (2)

imskm
imskm

Reputation: 805

try this

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Movie search App</title>



        <script type="text/javascript" src="js/custom.js"></script>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
        </head>




            <div id="myCarousel" class="carousel slide">
                    <!-- Indicators -->
                    <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>

                    <!-- Wrapper for Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <!-- Set the first background image using inline CSS below. -->
                             <img src="img/1.jpg" alt="" style="width:100%;">
                            <div class="carousel-caption">
                                <h2>Caption 1</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the second background image using inline CSS below. -->
                             <img src="img/3.jpg" alt="" style="width:100%;">
                            <div class="carousel-caption">
                                <h2>Caption 2</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the third background image using inline CSS below. -->
                             <img src="img/4.jpg" alt="" style="width:100%;">
                            <div class="carousel-caption">
                                <h2>Caption 3</h2>
                            </div>
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                        <span class="icon-prev"></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next">
                        <span class="icon-next"></span>
                    </a>

             </div>
</html>

instead of setting images in css you should use <img> tag.

Upvotes: 1

Adharsh M
Adharsh M

Reputation: 2812

Bootstrap Js and CSS Missing. Link these JS and CSS in header. It Will Fix Your Problem.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

Upvotes: 0

Related Questions