Bs Carousel

-

Bootstrap Carousel Plugin

The Carousel Plugin

The Carousel plugin is a constituent for cycling through elements, similar a carousel (slideshow).
Tip: Plugins tin hold upwardly included individually (using Bootstrap's private "carousel.js" file), or all at i time (using "bootstrap.js" or "bootstrap.min.js").

Carousel Example


Note: Carousels are non supported properly inward Internet Explorer ix in addition to before (because they occupation CSS3 transitions in addition to animations to accomplish the slide effect).

How To Create a Carousel

The next representative shows how to create a basic carousel:

Example

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left in addition to correct controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Example Explained

The outermost <div>:
Carousels require the occupation of an id (in this instance id="myCarousel") for carousel controls to component properly.
The class="carousel" specifies that this <div> contains a carousel.
The .slide bird adds a CSS transition in addition to animation effect, which makes the items slide when showing a novel item. Omit this bird if y'all exercise non desire this effect.
The data-ride="carousel" attribute tells Bootstrap to laid out animating the carousel directly when the page loads.
The "Indicators" part:
The indicators are the piffling dots at the bottom of each slide (which indicates how many slides at that topographic point is inward the carousel, in addition to which slide the user are currently viewing).
The indicators are specified inward an ordered listing amongst bird .carousel-indicators.
The data-target attribute points to the id of the carousel.
The data-slide-to attribute specifies which slide to become to, when clicking on the specific dot.
The "Wrapper for slides" part:
The slides are specified inward a <div> amongst bird .carousel-inner.
The content of each slide is defined inward a <div> amongst bird .item. This tin hold upwardly text or images.
The .active bird needs to hold upwardly added to i of the slides. Otherwise, the carousel volition non hold upwardly visible.
The "Left in addition to correct controls" part:
This code adds "left" in addition to "right" buttons that allows the user to become dorsum in addition to forth betwixt the slides manually.
The data-slide attribute accepts the keywords "prev" or "next", which alters the slide put relative to its electrical current position.

Add Captions to Slides

Add <div class="carousel-caption"> inside each <div class="item"> to create a caption for each slide:

Example

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>LA is ever in addition to thus much fun!</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We dearest the Big Apple!</p>
      </div>
    </div>
  </div>

  <!-- Left in addition to correct controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Comments

Post a Comment

Popular posts from this blog

Removing The Index.Php File From Url Inward Codeigniter

-
By default, the index.php file volition survive included inwards your URLs: example.com/index.php/news/article/my_article You tin easily take away this file yesteryear using a .htaccess file amongst simply about uncomplicated rules. RewriteEngine on RewriteCond $1 !^(index\.php|images|robots\.txt) RewriteRule ^(.*)$ index.php?/$1 [L] This htaccess dominion is footling dissimilar than dominion y'all tin honor inwards Codeigniter's ain website. When I used the codeigniters htaccess rule, it didn't worked. After searching the solution I works life inwards a higher house solution. It worked. :) Sumber http://developer-paradize.blogspot.com
Read more

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy
Read more

Delete Daily Doppler E-Mail Spam From An Iphone [Fix]

-
Image
Many iPhone users including iPhone 7/8 too iPhone X users on iOS11 are facing an lawsuit that they are receiving multiple emails from something called Daily Doppler. You tin uncovering the Daily Doppler inwards your setting but won’t hold upwardly able to take away Daily Doppler from iPhone. The Daily Doppler is non visible inwards app listing then precisely can’t merely delete every bit a normal app. image:dailydoppler.com The e-mail received yesteryear users is coming from many dissimilar addresses too precisely i e-mail is sent from many advertisements. Kohls, Sears,   lawn to a greater extent than services, car advertisements etc. . They e-mail volition decease on on coming from these sources too non agency to terminal them every bit there’s no furnish address. If yous search inwards your iPhone Daily Doppler is visible every bit an Account too all of the Daily Doppler spam goes into this account. You tin banking concern jibe your listing of concern human relationshi
Read more