bootstrap carousel not working

Question

alex910TN 0 Light Poster

10 Years Ago

Hi guys,
I am trying to implement my first carousel on my website. I have 5 images with the same dimensions with the following HTML markup:

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

         <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>
             <li data-target="#myCarousel" data-slide-to="3"></li>
             <li data-target="#myCarousel" data-slide-to="4"></li>
             <li data-target="#myCarousel" data-slide-to="5"></li>
         </ol>
         <div class="carousel-inner">
             <div class="item active"> 
                    <img src="/pictures/home1.jpg" alt="CASHS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home4.jpg" alt="SWAROVSKI">
             </div>
             <div class="item"> 
                    <img   src="/pictures/home2.jpg" alt="MARQUIS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home3.jpg" alt="ORREFORS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home5.jpg" alt="WATERFORD" >
             </div>
         </div>
         <a class="left carousel-control" href="#myCarousel" data-slide="prev">
             <span class="glypicon glypicon-cheveron-left"></span>
         </a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">
             <span class="glypicon glypicon-cheveron-right"></span>
         </a>


     </div>

I know that I have to actually call this and include the some additional librairies. Therefore, I included the following code:

 <script type='text/javascript' src="/bootstrap.js"></script>
 <script type="text/javascript" src="/functions.js"></script>
 <script>
     //starts the carousel
 $('#myCarousel').carousel();
</script>

I inserted the above in the <head> portion of my home.html page. All that shows up on the page is the five images and the numbers 1 to 5. I am including the link to my website which is only intended for educational purposes. So please if anyone can help I would sure appreciate it.

http://www.allasalah.com

Thanks,
Alex

Inline Code Example Here

javascript

4 Contributors
6 Replies
46K Views
4 Years Discussion Span
Latest Post 6 Years Ago Latest Post by Abdullah_19

travis.holt.921_2 0 Newbie Poster

10 Years Ago

OK there are more than a few issues here, mainly there was not a bootstrap css file called onto the page. I think this will fix your problem:

<!DOCTYPE html> 
<head> 
<meta charset="UTF-8">
    <title>Alla's Crystal Shop</title>
    <link rel="stylesheet" href="/main.css">


    <script>
    var brow=checkIEBrowser();
    if(brow == true)
     {
         //User is using a Internet Explorer, need to redirect them.
         window.location.href="http://www.allasalah/view/error.php";
     } 
    else if(checkFFBrowser())
    {
        //User us using a FireFox browser
    }

    </script>

    <!--h1>CURRENTLY WORKING ON THE WEBSITE AS OF:10/29/2013 2pm Central TIME</h1-->

</head>
<body>

     <img id="logo1" src="/pictures/back4.png" alt="HOME"  >
     <div id="login1">
       <a href="/controller/login.php"><figure><img id="loginIcon" src="/pictures/login1.png" alt="Login" title="Login"><figcaption>Login or Register</figcaption></figure></a>
    </div>
    <div id="nav"> 
               <ul>
                  <li><a href="/view/Ashtrays.php">Ashtrays</a></li>
                  <li><a href="/view/BestSellers.php">Best Sellers</a></li>
                  <li><a href="/view/Clocks.php">Clocks</a></li>
                  <li><a href="/view/HolidayDecor.php">Holiday Decor</a></li>
                  <li><a href="/view/Kitchenware.php">Kitchenware</a></li>
                  <li><a href="/view/PictureFrames.php">Picture Frames</a></li>
                  <li><a href="/view/VasesBowls.php">Vases and Bowls</a></li>                 

               </ul>
    </div>
     <div id="myCarousel" class="carousel-slide">

         <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>
             <li data-target="#myCarousel" data-slide-to="3"></li>
             <li data-target="#myCarousel" data-slide-to="4"></li>
             <li data-target="#myCarousel" data-slide-to="5"></li>
         </ol>
         <div class="carousel-inner">
             <div class="item-active"> 
                    <img src="/pictures/home1.jpg" alt="CASHS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home4.jpg" alt="SWAROVSKI">
             </div>
             <div class="item"> 
                    <img   src="/pictures/home2.jpg" alt="MARQUIS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home3.jpg" alt="ORREFORS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home5.jpg" alt="WATERFORD" >
             </div>
         </div>
         <a class="carousel-control left" href="#myCarousel" data-slide="prev">
             <span class="glypicon glypicon-cheveron-left"></span>
         </a>
          <a class="arousel-control right" href="#myCarousel" data-slide="next">
             <span class="glypicon glypicon-cheveron-right"></span>
         </a>


     </div>

     <div class="logo2">
            <img   src="/pictures/home1.jpg" alt="CASHS" class="logoPics">
            <img   src="/pictures/home4.jpg" alt="SWAROVSKI" class="logoPics">
            <img   src="/pictures/home2.jpg" alt="MARQUIS" class="logoPics">
            <img   src="/pictures/home3.jpg" alt="ORREFORS" class="logoPics">    
            <img   src="/pictures/home5.jpg" alt="WATERFORD" class="logoPics">
            <img   src="/pictures/home6.jpg" alt="MIKASA" class="logoPics">    
        </div>
       <div id="footer">
            <p class="copyright">
                &copy; <?php echo date("Y"); ?> Alla's Crystal Shop, Inc.
            </p>
            <a href="/view/About.html">About Me</a>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type='text/javascript' src="css/bootstrap.js"></script>
        <script type="text/javascript" src="/js/bootstrap-carousel.js"></script>
        <script type="text/javascript" src="/functions.js"></script>

         <script type="text/javascript">
             //starts the carousel
             $document.ready(function () {
                 $('#myCarousel').carousel();
             });
        </script>

</body>

</html>

Another issue you may have is that you are not puting your content inside a "container" or "row". I would look into using these and the .col- system to make a responsive design.

FaisalSarfraz 0 Newbie Poster

10 Years Ago

use

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

instead of //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
try this and let me know

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

alex910TN 0 Light Poster · Answer 1 · 2014-01-27T23:56:57+00:00

I have worked on it since I posted this question. I will post an update shortly. Thanks for the help.

alex910TN 0 Light Poster · Answer 2 · 2014-01-28T01:33:22+00:00

Ok I modified the recommended changes and the carousel is still not working even after adding the correct files.

<!DOCTYPE html> 
<head> 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type='text/javascript' src="/css/bootstrap.css"></script>
 <script type="text/javascript" src="/js/bootstrap-carousel.js"></script>
  <script type="text/javascript" src="/functions.js"></script>

 <script type="text/javascript">
     //starts the carousel
     $document.ready(function () {
         $('#myCarousel').carousel();
     });
</script>

    <script>
    var brow=checkIEBrowser();
    if(brow == true)
     {
         //User is using a Internet Explorer, need to redirect them.
         window.location.href="http://www.allasalah/view/error.php";
     } 
    else if(checkFFBrowser())
    {
        //User us using a FireFox browser
    }

    </script>
    <meta charset="UTF-8">
    <title>Alla's Crystal Shop</title>
    <link rel="stylesheet" href="/main.css">
    <!--h1>CURRENTLY WORKING ON THE WEBSITE AS OF:10/29/2013 2pm Central TIME</h1-->

</head>
<body>

     <img id="logo1" src="/pictures/back4.png" alt="HOME"  >
     <div id="login1">
       <a href="/controller/login.php"><figure><img id="loginIcon" src="/pictures/login1.png" alt="Login" title="Login"><figcaption>Login or Register</figcaption></figure></a>
    </div>
    <div id="nav"> 
               <ul>
                  <li><a href="/view/Ashtrays.php">Ashtrays</a></li>
                  <li><a href="/view/BestSellers.php">Best Sellers</a></li>
                  <li><a href="/view/Clocks.php">Clocks</a></li>
                  <li><a href="/view/HolidayDecor.php">Holiday Decor</a></li>
                  <li><a href="/view/Kitchenware.php">Kitchenware</a></li>
                  <li><a href="/view/PictureFrames.php">Picture Frames</a></li>
                  <li><a href="/view/VasesBowls.php">Vases and Bowls</a></li>                 

               </ul>
    </div>
     <div id="myCarousel" class="carousel-slide">

         <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>
             <li data-target="#myCarousel" data-slide-to="3"></li>
             <li data-target="#myCarousel" data-slide-to="4"></li>
             <li data-target="#myCarousel" data-slide-to="5"></li>
         </ol>
         <div class="carousel-inner">
             <div class="item-active"> 
                    <img src="/pictures/home1.jpg" alt="CASHS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home4.jpg" alt="SWAROVSKI">
             </div>
             <div class="item"> 
                    <img   src="/pictures/home2.jpg" alt="MARQUIS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home3.jpg" alt="ORREFORS" >
             </div>
             <div class="item"> 
                    <img   src="/pictures/home5.jpg" alt="WATERFORD" >
             </div>
         </div>
         <a class="carousel-control left" href="#myCarousel" data-slide="prev">
             <span class="glypicon glypicon-cheveron-left"></span>
         </a>
          <a class="arousel-control right" href="#myCarousel" data-slide="next">
             <span class="glypicon glypicon-cheveron-right"></span>
         </a>


     </div>

Can anyone tell me why the carousel is still not working.
Thanks for any suggestions/advice.

alex910TN 0 Light Poster · Answer 3 · 2014-01-29T02:49:54+00:00

No it didn't work. I do not understand why? Is it possibly the browser? to be honset, I overlooked that missing "http:" part. Good catch though

Abdullah_19 0 Newbie Poster · Answer 4 · 2018-03-01T10:21:57+00:00

in bootstrap 4 replace the class item with carousel-item in the repeated div

<div class="item">