admin管理员组

文章数量:1323524

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<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" role="listbox">
    <div class="item active">
      <img src=".jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src=".jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  
  
    <script src=".12.4/jquery.min.js"></script>

<script src=".3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<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" role="listbox">
    <div class="item active">
      <img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/87D3/production/_84817743_beckhamfashion.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/9949/production/_84814293_dummy.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
  
  
    <script src="https://ajax.googleapis./ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

I'm using bootstap carousel for example;

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">

      </div>
    </div>

    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" 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="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

and as you see my first .itemclass has .activeclass but I want to add it automatically when I remove .activeclass from .item class then javascript gave me this error: TypeError: Cannot read property 'offsetWidth' of undefined /works/anitur/js/bootstrap.min.js:6 and I tried to add with this code

$(".carousel > .item:first").addClass("active");

but nothing change how can I realize what I want ? and by the way is there any way to add carousel control with js not html ?

Share Improve this question edited Jan 18, 2017 at 7:00 ani_css asked Jan 18, 2017 at 6:51 ani_cssani_css 2,1263 gold badges33 silver badges77 bronze badges 6
  • 2 $(".carousel .item:first").addClass("active"); – Kevin Bui Commented Jan 18, 2017 at 6:54
  • @BùivănNguyện what can be change I didn't understand it's same with my code – ani_css Commented Jan 18, 2017 at 6:56
  • can you share a jsfiddle? – user3775217 Commented Jan 18, 2017 at 6:56
  • $(".carousel > .item:first") -> direct child use $(".carousel .item:first") since item is not direct child of carousel – guradio Commented Jan 18, 2017 at 6:57
  • @recruit_man : remove ">" to make it works – Kevin Bui Commented Jan 18, 2017 at 7:00
 |  Show 1 more ment

3 Answers 3

Reset to default 5

It is better practice to add classes for a carousel in HTML template itself. Why because the carousel plugins will rebuild the HTML after document is ready. However you can try the below code.

$(".carousel .item").first().addClass("active");

I have tried one by one, this code is the correct one to add active class for first item element .

$(".carousel .item:first").addClass("active");

For more detail, See the red colored box and arrow in the picture.
You may check it as well in live version, here in the running code at JSFiddle

You should correct this $(".carousel .item:first").addClass("active");

本文标签: javascriptAdd active class for first item elementStack Overflow