bootstrap implementation of rotation map - Daquan

Posted by MarCn on Wed, 09 Feb 2022 07:48:28 +0100

As we all know, there are many ways to realize the rotation. For example, writing in pure js is time-consuming and laborious, and it is not suitable for all kinds of terminal devices, but bootstrap is different. You only need to write a set of code, which can be used normally, whether on the mobile phone, ipad or PC.

How to create a rotation


  1. Prepare two or more pictures required for rotation.

  2. Prepare css and js of bootstrap and jquery1 10 + js files can be downloaded from the official website.

  3. Put the downloaded css file into the css directory of the project, the js file into the js directory, and the picture into the IMG (special picture) folder.

  4. Write code in html as follows:

<!DOCTYPE html>
  <title>Bootstrap example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicator -->
  <ul 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>
  <!-- Rotate pictures -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="">
    <div class="carousel-item">
      <img src="">
    <div class="carousel-item">
      <img src="">
  <!-- Left and right switch button -->
  <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  <a class="carousel-control-next" href="#myCarousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>


Add a description to the rotation picture

Add class = "carousel caption" in each class = "carousel item" to set the description text of the rotation picture:

<div class="carousel-item">
  <img src="">
  <div class="carousel-caption">
    <h3>First picture description title</h3>
    <p>Description text!</p>

Description of the class used in the above example

Create a rotation

. carousel indicators add an indicator for the rotation, that is, the dots at the bottom of the rotation chart. The rotation process can show which chart is currently.

. carousel inner add picture to switch

. carousel item specifies the content of each picture

. carousel control prev add the button on the left, and click it to return to the previous one.

Click the next-control-next button to switch to the next one.

. carousel control prev icon and Used together with carousel control prev, set the button on the left

. carousel control next Icon and Used together with carousel control next, set the button on the right

. slide switches the transition and animation effects of pictures. If you don't need such effects, you can delete this class.

Carousel can be called manually through JavaScript, as follows:

Initialize rotation

	interval: 5000,
	pause: null,

Default value of interval number: 5000 data interval automatically cycles the amount of time delayed between each item. If yes
false, the rotation will not cycle automatically.

pause string default value: "hover" data pause pause the rotation cycle when the mouse enters, and resume the rotation cycle when the mouse leaves.

wrap boolean default value: true. Whether the data wrap rotation circulates continuously.

Useful methods in Carousel plug-in:

      // Initialize rotation
      // Stop the rotation
      // Cycle to previous project
      // Rotate to the next project
      // Cycle to a specific frame

Events to be used in the Carousel plug-in. These events can be used as hooks in functions

		//Monitor rotation
		$('#myCarousel').on('', function (event) {
			var $hoder = $('#myCarousel').find('.item'),
			$items = $(event.relatedTarget);
			//getIndex the index of the current location
			var getIndex= $hoder.index($items);
			alert("When called slide This event is triggered immediately when the method is instantiated.");
			//Do what you want to do

Topics: Javascript css bootstrap