Jacob Lane
Reputation: 103
How to stop the bootstrap carousel animations
I am trying to make an application form, but first off I need to make it so that the carousel doesn't move, instead I would only like it to move when certain buttons are pressed ("next page" or "last page").
Here is my code:
<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>
Can someone help with the code as I am new to bootstrap, please?
Upvotes: 1
Views: 2946
Answers (2)
Jocelyn
Reputation: 396
This will work on what you are looking for. Following your code structure do the following steps.
1.- Add a play and pause buttons for the carousel, this will give you a better control of your pages that you want to view or work on it. The best way to add them is next to your last and next pages buttons.
<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.- Add the following Script should control starting and stopping on any frame:
<script>
$('#carousel-play').click(function () {$('#carousel-example- generic').carousel('cycle');});
$('#carousel-pause').click(function (){$('#carousel-example-generic').carousel('pause');});
</script>
Upvotes: 1
Greg01re
Reputation: 97
Use this JS code:
<script>
$("#carousel").carousel({
pause: false, // don't forget the colon here, it's an object
interval: false,
wrap: false
})
</script>
Upvotes: 0
Related Questions
- How do I redirect to another webpage?
- How do I return the response from an asynchronous call?
- How can I validate an email address in JavaScript?
- How can I remove a specific item from an array in JavaScript?
- How do I remove a property from a JavaScript object?
- How do I check if an element is hidden in jQuery?
- What does "use strict" do in JavaScript, and what is the reasoning behind it?
- How do I check whether a checkbox is checked in jQuery?
- How can I horizontally center an element?
- How do JavaScript closures work?