Как остановить анимацию карусели бутстрапа

Я пытаюсь сделать заявку, но сначала мне нужно сделать так, чтобы карусель не двигалась, вместо этого мне хотелось бы, чтобы она двигалась при нажатии определенных кнопок («следующая страница» или «последняя страница»).Как остановить анимацию карусели бутстрапа

Вот мой код:

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>Application Page one</title> 

<!-- Bootstrap Core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- Custom CSS --> 
<link href="css/modern-business.css" rel="stylesheet"> 

<!-- Custom Fonts --> 
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
<![endif]--> 

</head> 

<body> 

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">SERVER NAME</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="apply.html">Apply</a> 
       </li> 
       <li> 
        <a href="staff.html">Staff</a> 
       </li> 
       <li> 
        <a href="faq.html">FAQ</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact us</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

<br> 
<div id="carousel-example-generic" class="carousel slide" data-pause="false" 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"> 
      <center> 
       <h3>Declaration:</h3> 
       <p>The providers ("we", "us", "our") of the service provided by this web site ("Service") are not responsible for any user-generated content and accounts ("Content"). Content submitted express the views of their author only.</p> 

       <p>You agree to not use the Service to submit or link to any Content which is defamatory, abusive, hateful, threatening, spam or spam-like, likely to offend, contains adult or objectionable content, contains personal information of others, 
        risks copyright infringement, encourages unlawful activity, or otherwise violates any laws.</p> 

       <p>All Content you submit or upload may be reviewed by staff members. All Content you submit or upload may be sent to third-party verification services (including, but not limited to, spam prevention services). Do not submit any Content 
        that you consider to be private or confidential.</p> 

       <p>We reserve the rights to remove or modify any Content submitted for any reason without explanation. Requests for Content to be removed or modified will be undertaken only at our discretion. We reserve the right to take action against 
        any account with the Service at any time.</p> 

       <p>You are granting us with a non-exclusive, permanent, irrevocable, unlimited license to use, publish, or re-publish your Content in connection with the Service. You retain copyright over the Content.</p> 

       <p>These terms may be changed at any time without notice.</p> 

       <p>If you do not agree with these terms, please do not register or use this Service. If you wish to close your account, please contact us.</p> 
      </center> 
     </div> 
     <div class="item"> 
      <form class="form-horizontal" style="width: 80%; padding-left: 150px;"> 
       <fieldset> 
        <h4 style="padding-left: 235px;">Applcation Part 1 - Some information about you:</h4> 
        <div class="form-group"> 
         <label for="inputFN" class="col-lg-2 control-label">First Name:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputFN" placeholder="First name"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputLN" class="col-lg-2 control-label">Last Name:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputLN" placeholder="Last name"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputEmail" class="col-lg-2 control-label">Email Address:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputEmail" placeholder="Email"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputAge" class="col-lg-2 control-label">Age:</label> 
         <div class="col-lg-10"> 
          <select class="form-control" id="select"> 
           <option>Select your age</option> 
           <option>------------------------------------------------------</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
           <option>6</option> 
           <option>7</option> 
           <option>8</option> 
           <option>9</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>12</option> 
           <option>13</option> 
           <option>14</option> 
           <option>15</option> 
           <option>16</option> 
           <option>17</option> 
           <option>18</option> 
           <option>19</option> 
           <option>20</option> 
           <option>21</option> 
           <option>22</option> 
           <option>23</option> 
           <option>24</option> 
           <option>25</option> 
           <option>26</option> 
           <option>27</option> 
           <option>28</option> 
           <option>29</option> 
           <option>30</option> 
          </select> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputDOB" class="col-lg-2 control-label">Date of birth:</label> 
         <div class="col-lg-10"> 
          <select class="form-control" id="select1"> 
           <option>Day</option> 
           <option>------------------------------------------------------</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
           <option>6</option> 
           <option>7</option> 
           <option>8</option> 
           <option>9</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>12</option> 
           <option>13</option> 
           <option>14</option> 
           <option>15</option> 
           <option>16</option> 
           <option>17</option> 
           <option>18</option> 
           <option>19</option> 
           <option>20</option> 
           <option>21</option> 
           <option>22</option> 
           <option>23</option> 
           <option>24</option> 
           <option>25</option> 
           <option>26</option> 
           <option>27</option> 
           <option>28</option> 
           <option>29</option> 
           <option>30</option> 
           <option>31</option> 
          </select> 
         </div> 
         <div class="col-lg-10" style="padding-left: 250px; width: 100%;"> 
          <select class="form-control" id="select2"> 
           <option>Month</option> 
           <option>------------------------------------------------------</option> 
           <option>1</option> 
           <option>2</option> 
           <option>3</option> 
           <option>4</option> 
           <option>5</option> 
           <option>6</option> 
           <option>7</option> 
           <option>8</option> 
           <option>9</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>12</option> 
          </select> 
         </div> 
         <div class="col-lg-10" style="padding-left: 250px; width: 100%;"> 
          <select class="form-control" id="select3"> 
           <option>Year</option> 
           <option>------------------------------------------------------</option> 
           <option>1986</option> 
           <option>1987</option> 
           <option>1988</option> 
           <option>1989</option> 
           <option>1990</option> 
           <option>1991</option> 
           <option>1992</option> 
           <option>1993</option> 
           <option>1994</option> 
           <option>1995</option> 
           <option>1996</option> 
           <option>1997</option> 
           <option>1998</option> 
           <option>1999</option> 
           <option>2000</option> 
           <option>2001</option> 
           <option>2002</option> 
           <option>2003</option> 
           <option>2004</option> 
           <option>2005</option> 
           <option>2006</option> 
           <option>2007</option> 
           <option>2008</option> 
           <option>2009</option> 
           <option>2010</option> 
           <option>2011</option> 
           <option>2012</option> 
           <option>2013</option> 
           <option>2014</option> 
           <option>2015</option> 
           <option>2016</option> 
          </select> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputSkype" class="col-lg-2 control-label">Skype:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputSkype" placeholder="Skype"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="inputMCU" class="col-lg-2 control-label">Minecraft Username:</label> 
         <div class="col-lg-10"> 
          <input type="text" class="form-control" id="inputMCU" placeholder="Minecraft Username"> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 

<center> 
    <a href="#carousel-example-generic" class="right btn btn-primary" style="padding-left: -5px;" data-slide="prev">Last Page</a> 
    <a href="#carousel-example-generic" class="right btn btn-primary" data-slide="next">Next Page</a> 
</center> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script> 
     $("#carousel").carousel({ 
      pause: false 
      wrap: false 
     }) 
    </script> 

</body> 

</html>

Может кто-то помочь с кодом, как я новичок в начальной загрузки, пожалуйста?

источник

2016-06-18 Jacob Lane

Используйте этот JS-код:

<script> 
    $("#carousel").carousel({ 
     pause: false, // don't forget the colon here, it's an object 
     interval: false, 
     wrap: false 
    }) 
</script>

источник

2016-06-18 17:08:20 Greg01re

Я использовал свой код, но карусель все еще двигается по своим собственным –

Try добавления интервал данных = "false" – Greg01re

вы можете использовать interval: false взглянуть на Bootstrap Docs

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<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> 
 
    <li data-target="#carousel-example-generic" data-slide-to="3"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="//lorempixel.com/1600/900" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//lorempixel.com/1600/900" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//lorempixel.com/1600/900" alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="//lorempixel.com/1600/900" 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>

источник

2016-06-18 17:13:38 dippas

это будет работать на то, что вы ищете. Следуя структуре кода, выполните следующие действия.

1.- Добавить кнопки воспроизведения и паузы для карусели, это даст вам лучший контроль над вашими страницами, которые вы хотите просмотреть или поработать над ним. Лучший способ добавить их - рядом с кнопками вашей последней и следующей страниц.

<center> 
<a href="#carousel-example-generic" class="left btn btn-primary" style="padding-left: -5px;" data-slide="prev">Last Page</a> 
<a href="#carousel-example-generic" class="right btn btn-primary" data-slide="next">Next Page</a> 

<!-- adding the play and pause button for the carousel using JQuery --> 
<div class="btn-group" id="carouselButtons"> 
    <button class="btn btn-danger btn-lg" id="carousel-pause"> 
     <span class="glyphicon glyphicon-pause" aria-hidden="true"></span> 
    </button> 
    <button class="btn btn-danger btn-lg" id="carousel-play"> 
     <span class="glyphicon glyphicon-play" aria-hidden="true"></span> 
    </button> 
</div>

2.- Добавьте следующий скрипт должен контролировать запуск и остановку на любом кадре:

<script> 
     $('#carousel-play').click(function() {$('#carousel-example- generic').carousel('cycle');}); 

     $('#carousel-pause').click(function(){$('#carousel-example-generic').carousel('pause');}); 

</script>

источник

2016-06-18 22:16:17 Jocelyn

Как остановить анимацию карусели бутстрапа

ответ

Смежные вопросы