Bootstrap JS Carousel







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Bootstrap JS Carousel



❮ Previous
Next ❯


JS Carousel (carousel.js)


The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).


For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.



Note: Carousels are not supported properly in Internet Explorer 9 and
earlier (because they use CSS3 transitions and animations to achieve the slide effect).




<!--


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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Try it Yourself »




NoteNote: Carousels are not supported properly in Internet Explorer 9 and
earlier (because they use CSS3 transitions and animations to achieve the slide effect).


-->


The Carousel Plugin Classes















































Class Description
.carousel Creates a carousel
.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.icon-next Unicode icon (arrow pointing right), used in carousels. This is often used instead of a glyphicon
.icon-prev Unicode icon (arrow pointing left), used in carousels. This is often used instead of a glyphicon
.item Specifies the content of each slide
.left carousel-control Adds a left button to the carousel, which allows the user to go back between the slides
.right carousel-control Adds a right button to the carousel, which allows the user to go forward between the slides
.carousel-caption Specifies a caption for the carousel


Via data-* Attributes


The data-ride="carousel" attribute activates the carousel.


The data-slide and data-slide-to attributes specifies which slide to go to.


The data-slide attribute accepts two values: prev or
next, while
data-slide-to accept numbers.



Example



<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>

<!-- Carousel Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">

Try it Yourself »







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





Via JavaScript


Enable manually with:



Example



// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
    $("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".left").click(function(){
    $("#myCarousel").carousel("prev");
});

Try it Yourself »


Carousel Options


Options can be passed via data attributes or JavaScript. For data attributes,
append the option name to data-, as in data-interval="".































Name Type Default Description Try it
interval number, or the boolean false 5000
Specifies the delay (in milliseconds) between each slide.


Note: Set interval to false to stop the items from automatically sliding
Using JS
Using data
pause string, or the boolean false "hover" Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel

Note: Set pause to false to stop the ability to pause on hover
Using JS
Using data
wrap boolean true Specifies whether the carousel should go through all slides continuously, or stop at the last slide


  • true - cycle continuously

  • false - stop at the last item
Using JS
Using data

Carousel Methods


The following table lists all available carousel methods.






































Method Description Try it
.carousel(options) Activates the carousel with an option. See options above for valid values Try it
.carousel("cycle") Goes through the carousel items from left to right Try it
.carousel("pause") Stops the carousel from going through items Try it
.carousel(number) Goes to a specified item (zero-based: first item is 0, second item is 1, etc..) Try it
.carousel("prev") Goes to the previous item Try it
.carousel("next") Goes to the next item Try it


Carousel Events


The following table lists all available carousel events.


















Event Description Try it
slide.bs.carousel Occurs when the carousel is about to slide from one item to another Try it
slid.bs.carousel Occurs when the carousel has finished sliding from one item to another Try it


More Examples



Captions to Slides


Add <div class="carousel-caption"> within 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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beautiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Try it Yourself »



❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more

W3.CSS Tables

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Tables ❮ Previous Next ❯ First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Bo Nilsson 50 Mike Ross 35 W3.CSS Table Classes W3.CSS provides the following classes for tables: Class Defines w3-table Container for an HTML table w3-striped Striped table w3-border Bordered table w3-bordered Bordered lines w3-centered Centered table content w3-hoverable Hoverable table w3-table-all All properties set Basic Table The w3-table class is used to display a basic table: First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Example <table class="w3-table"> <tr>   <th>First Name</th>   <th>Last Name</th>   <th>Points</th> </tr> <tr>   <td>Jill</td>   <td>Smith</td>   <td>50</...
Read more