javascript - Bootstrap v4 carousel not working

I am using carousel of bootstrap v4 in a vue webapp. I am using as it is in the sample example, but it is not working in my local, neither it is giving any error.

<div class="col-xs-5 card prod-img">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <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>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img src="../../assets/animals/rat.png" alt="First slide">
      </div>
      <div class="carousel-item">
        <img src="../../assets/animals/cat.png" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img src="../../assets/animals/dog.png" alt="Third slide">
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="icon-next" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

I am using Vue with Vue-router, however it works well when I try it in jsfiddle: here with vue-router and here without router.

I already have jquery and tether in my index.html along with bootstrap as shown following:

<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src=".3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src=".js"></script>
<script  href="/static/bootstrap.js"></script>

Please help what can be the error in my local setup, what other details should I provide which can be helpful to understand this problem.

There are no errors in the console.

I see left and right arrows also on the image, as attached below, but nothing happens when I click on those but URL changes to http://localhost:8080/myUrl#carousel-example-generic from http://localhost:8080/myUrl

Here is my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-patible" content="ie=edge">

    <title>Hey</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href=':300,400,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="/static/bootstrap.css" type="text/css">

    <script src="//cdnjs.cloudflare/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src=".3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>    <!-- <script src=".0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> -->
    <script src=".js"></script>
    <script  href="/static/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare/ajax/libs/jssor-slider/21.1.5/jssor.slider.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

I have put my whole code here, which can be cloned and tested in local.

I am using carousel of bootstrap v4 in a vue webapp. I am using as it is in the sample example, but it is not working in my local, neither it is giving any error.

<div class="col-xs-5 card prod-img">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <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>
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img src="../../assets/animals/rat.png" alt="First slide">
      </div>
      <div class="carousel-item">
        <img src="../../assets/animals/cat.png" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img src="../../assets/animals/dog.png" alt="Third slide">
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="icon-prev" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="icon-next" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

I am using Vue with Vue-router, however it works well when I try it in jsfiddle: here with vue-router and here without router.

I already have jquery and tether in my index.html along with bootstrap as shown following:

<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://use.fontawesome./89588fe8fc.js"></script>
<script  href="/static/bootstrap.js"></script>

Please help what can be the error in my local setup, what other details should I provide which can be helpful to understand this problem.

There are no errors in the console.

Here is my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-patible" content="ie=edge">

    <title>Hey</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href='https://fonts.googleapis./css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="/static/bootstrap.css" type="text/css">

    <script src="//cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>    <!-- <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> -->
    <script src="https://use.fontawesome./89588fe8fc.js"></script>
    <script  href="/static/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare./ajax/libs/jssor-slider/21.1.5/jssor.slider.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

I have put my whole code here, which can be cloned and tested in local.

Share Improve this question edited Dec 9, 2016 at 6:21 asked Dec 8, 2016 at 12:12 Saurabh 73.7k44 gold badges191 silver badges251 bronze badges

boostrap js path is correct /static/bootstrap.js? – Vel Commented Dec 8, 2016 at 14:26
Yes, It is correct, I can use other features, like card etc. – Saurabh Commented Dec 8, 2016 at 14:37
what is the error in console? – Vel Commented Dec 8, 2016 at 14:43
@vel: I have updated the question, there are no error on console.I see the left/right arrow, but nothing happens other than change in URL. – Saurabh Commented Dec 8, 2016 at 16:49
Where are you placing the script tags? Inside the <head> or before </body>? – Ethan Commented Dec 8, 2016 at 16:55

| Show 7 more ments

2 Answers 2

Sorted by: Reset to default 5 +150

updated

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-patible" content="ie=edge">

    <title>Hey</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href='https://fonts.googleapis./css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>



    <script src="//cdnjs.cloudflare./ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>    <!-- <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> -->
    <script src="https://use.fontawesome./89588fe8fc.js"></script>
    <link rel="stylesheet" href="static/bootstrap.css" type="text/css">
    <script  href="static/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare./ajax/libs/jssor-slider/21.1.5/jssor.slider.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

change these lines

<link rel="stylesheet" href="static/bootstrap.css" type="text/css">
<script  href="static/bootstrap.js"></script>

Instead of

<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script  href="/static/bootstrap.js"></script>

The error is here.

<script  href="/static/bootstrap.js"></script>

HREF, should be SRC, and all works fine :).

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Bootstrap v4 carousel not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)