Bootstrap image carousel sample code_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Bootstrap image carousel sample code_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:41 PM

Example 1:

Insert js and css support:

<link rel="stylesheet" href="css/bootstrap.min.css"/>  
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

HTML code:

<div id="pictures" class="item">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <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>
        </ol>  
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
         <div class="item active">
           <img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="images/gf.jpg"  alt="First slide">
         </div>
         <div class="item">
           <img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="images/psb.jpg"  alt="Second slide">
         </div>
         <div class="item">
           <img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="images/uyt.jpg"  alt="Third slide">
         </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" 
         data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" 
         data-slide="next">&rsaquo;</a>
      </div> 
    </div>

Example 2:

Usage

<div id="myCarousel" class="carousel slide">
 <!-- Carousel items -->
 <div class="carousel-inner">
  <div class="active item">…</div>
  <div class="item">…</div>
  <div class="item">…</div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">&#8249;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&#8250;</a>
</div>

So, you place the items you want to render (such as images) in the "carousel-inner" div in a circular order, creating navigation for the items via "" It uses the custom data attribute "data-slide" to navigate to the previous and next items.

You must reference the jquery.js and bootstrap-carousel.js files in the HTML file where you want to create the carousel.

Bootstrap carousel example

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap pager with next and previous example</title> 
<meta name="description" content="Twitter Bootstrap pager with next and previous example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin: 50px;
}
</style>
</head>
<body>
 <ul class="pager">
 <li>
  <a href="#">Previous</a>
 </li>
 <li>
  <a href="#">Next</a>
 </li>
</ul>
</body>
</html>

Page turning example with old and new

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Example of carousal with Twitter Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Example of carousal with Twitter Bootstrap version 2.0 from w3resource.com">
   <!-- Le styles -->
  <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
 <link href="twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet">
  <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  <!--[if lt IE 9]>
   <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!-- Le fav and touch icons -->
  <link rel="shortcut icon" href="twitter-bootstrap-v2/docs/examples/images/favicon.ico">
  <link rel="apple-touch-icon" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="72x72" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="114x114" href="twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png">
 </head>
 <body>
  <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </a>
     <a class="brand" href="#"><img src="/static/imghwm/default1.png"  data-src="/images/w3r.png"  class="lazy"    style="max-width:90%"  style="max-width:90%" alt="w3resource logo" /></a>
     <div class="nav-collapse">
      <ul class="nav">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#about">About</a></li>
       <li><a href="#contact">Contact</a></li>
      </ul>
     </div><!--/.nav-collapse -->
    </div>
   </div>
  </div>
  <div class="container">
   <!-- Example row of columns -->
   <div class="row">
    <div class="span4">
     <h2 id="HTML-and-JS-Apps">HTML5 and JS Apps</h2>
  <p> </p>
     <div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
  <div class="carousel-inner">
   <div class="active item"><img src="/static/imghwm/default1.png"  data-src="/update-images/html5_logo.png"  class="lazy" alt="HTML5 logo"    style="max-width:90%"  style="max-width:90%" /></div>
   <div class="item"><img src="/static/imghwm/default1.png"  data-src="/update-images/javascript-logo.png"  class="lazy" alt="JS logo"    style="max-width:90%"  style="max-width:90%" /></div>
   <div class="item"><img src="/static/imghwm/default1.png"  data-src="/update-images/schema.png"  class="lazy" alt="Schema.org logo"    style="max-width:90%"  style="max-width:90%" /></div>
 <div class="item"><img src="/static/imghwm/default1.png"  data-src="/update-images/json.gif"  class="lazy" alt="JSON logo"    style="max-width:90%"  style="max-width:90%" /></div>
 </div>
 <!-- Carousel nav -->
 <a class="carousel-control left" href="#myCarousel" data-slide="prev">&#8249;</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">&#8250;</a>
</div>
</div>
</div>
   <hr>
   <footer>
    <p>&copy; Company 2012</p>
   </footer>
  </div> <!-- /container -->
  <!-- Le javascript
  ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
  <script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
 </body>
</html>

Use Javascript

You can use the JavaScript code below to create a carousel.

$('.carousel').carousel()

Here are the options available to you

interval: Specifies the waiting time for slide rotation, in milliseconds. The value is of type number and the default value is 5000. If false, the carousel will not automatically start looping.

pause: specifies that when the mouse stays in the slide area, the carousel will be paused, and when the mouse leaves, the carousel will be started. The value is of type string and the default value is 'hover'.

Here are the carousel methods you can use

.carousel(options): 初始化轮播组件，接受一个可选的 object 类型的 options 参数，并开始幻灯片循环。
$('.carousel').carousel({
 interval: 2000 // in milliseconds
})
.carousel('cycle'): 从左到右循环各帧。
$('.carousel').carousel('cycle');
.carousel('pause'): 停止轮播。
$('#myCarousel').hover(function () { 
 $(this).carousel('pause') 
}
.carousel(number): 将轮播定位到指定的帧上（帧下标以0开始，类似数组）。
$("#carousel_nav").click(function(){ 
var item = 4; 
$('#home_carousel').carousel(item); 
return false; 
});

.carousel('prev'): Move the carousel to the previous frame.

.carousel('next'): Move the carousel to the next frame.

Here are two events used to enhance the functionality of the carousel.

slide: This event is triggered immediately after the slide instance method is called.

slid: This event is triggered after all slides have played.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

See all articles