The carousel component

The carousel component is a user interface element, which you'll see on a number of websites. It is essentially a slideshow that cycles through different elements, usually images. The carousel component should be contained inside a <div> element with a class name of carousel and a data-ride attribute with a value of carousel. To use the carousel component in your project, perform the following steps:

  1. The carousel component consists of an ordered list element, <ol>, which renders as small circles in the browser and indicates which slide is currently active. The markup for this element is as follows:
            <ol class="carousel-indicators"> 
            <li data-target="#carousel" data-slide-to="0" 
            class="active"></li> 
            <li data-target="#carousel" data-slide-to="1"></li> 
            <li data-target="#carousel" data-slide-to="2"></li> 
        </ol>
  2. Next, another <div> element with a class name of carousel-inner needs to be created. This element will contain the actual slides and their content. The following markup creates such an element with one slide:
            <div class="carousel-inner" role="listbox"> 
            <div class="carousel-item active"> 
                <img src="~/img/slide1.jpg" alt="Slide no.1"> 
            </div> 
            <div class="carousel-item"> 
                <img src="~/img/slide2.jpg" alt="Slide no.2"> 
            </div> 
            <div class="carousel-item"> 
                <img src="~/img/slide3.jpg" alt="Slide no.3"> 
            </div> 
        </div>
  3. Finally, to add arrows on either side of the carousel to indicate to the user that they can navigate to the next slide, add the following markup to the parent <div> element:
            <a class="left carousel-control" href="#carousel" role="button"                 data-slide="prev"> 
            <span class="icon-prev" aria-hidden="true"></span> 
            <span class="sr-only">Previous</span> 
        </a> 
        <a class="right carousel-control" href="#carousel" role="button"           data-slide="next"> 
            <span class="icon-next" aria-hidden="true"></span> 
            <span class="sr-only">Next</span> 
        </a>
  4. The duration for which each slide should be shown can be set via the data-interval attribute. In the following markup, we set the interval between slides to 10 seconds:
            <div id="carousel" class="carousel slide" data-ride="carousel" 
        data-interval="10000">
  5. As with all the other plugins, you also have a choice of initializing the plugin and setting its options using JavaScript. In the following code, we'll initialize the carousel and set the interval between slides to 10 seconds:
            $(function () { 
            $('#carousel').carousel({ 
                interval: 10000 
            }); 
        });
  6. You also have an option to add a caption to each slide in the carousel by adding a <div> element with a class name of .carousel-caption to the .carousel-item element, as illustrated in the following code:
            <div class="carousel-item"> 
           <img src="~/img/slide3.jpg" alt="Slide no.3"> 
             <div class="carousel-caption"> 
                 <h3>A rainy day</h3> 
                   <p>Rain against a windscreen.</p> 
              </div> 
         </div>

    Take a look at following screenshot:

    The carousel component
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.206.254