Breaking News
Home | Tutorial | Carousel Slide with Bootstrap

Carousel Slide with Bootstrap

Carousel Slider Makes your website Attractive!!

Carousel Slider is the most attractive view in any website. Now a days Carousel Slider used by most of the website containing images. If you visit any E-commerce website you will definitely see a Carousel Slider used for showing about their products.. This Carousel Slider is mostly built with most famous Twitter Bootstrap Css framework. You can also use a slider in your website easily. So let’s see how to implement a Bootstrap Carousel Slider in you website. Follow this tutorial.

Now the question is How to implement carousel slider in your webpage ? The answer is as follows:

create an page with  .html extension. In header tag, paste bootstrap cdn or your boostrap.css/ bootstrap.min.css file link from your localhost, like this:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

<!-- bootstrap CDN link -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">


<!-- jQuery CDN link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
</head>
<body>

Note: You have to add jQuery latest version first above the end of the heading  tag. Your html script should be look like the above described.

you can also add carouse.js plugin but I think you don’t need this because this plugin already added in bootstrap.min.js

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

 

Add this code in your body part:

<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="Your_image_here" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="Your_image_here" alt="Chicago">
    </div>

    <div class="item">
      <img src="Your_image_here" alt="New York">
    </div>
  </div>

  <!-- Left and right 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 use of an id (in this case id=”myCarousel”) for carousel controls to function properly.

The class=”carousel” specifies that this <div> contains a carousel.

The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.

The data-ride=”carousel” attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

The “Indicators” part:

The indicators are the little dots at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing).

The indicators are specified in an ordered list with class .carousel-indicators.

The data-target attribute points to the id of the carousel.

The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot.

The “Wrapper for slides” part:

The slides are specified in a <div> with class .carousel-inner.

The content of each slide is defined in a <div> with class .item. This can be text or images.

The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.

The “Left and right controls” part:

This code adds “left” and “right” buttons that allows the user to go back and forth between the slides manually.

The data-slide attribute accepts the keywords “prev” or “next”, which alters the slide position relative to its current position.

Add Captions to Slides

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

 

<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="your_image_here" alt="">
      <div class="carousel-caption">
        <h3>USA</h3>
        <p>USA is always so much fun!</p>
      </div>
    </div>

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

    <div class="item">
      <img src="your_image_here" alt="">
      <div class="carousel-caption">
        <h3>Canada</h3>
        <p>We love the Big Apple!</p>
      </div>
    </div>
  </div>

  <!-- Left and right 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>

About ncnharry

Professionally I am a tech geek, learners of technology. Working as a freelancer on various platform. I would like to share knowledge around the world. Working in Help Me BD group in social network-Facebook. Join with Help Me BD Group, a social sharing group with various ideas. https://web.facebook.com/groups/www.helpme.com.bd/

Check Also

blur background effect in photoshop

How To Blur Background Like DSLR In Photoshop Cc / Cs6 / Cs5 / Photoshop

How to blur background like DSLR in Photoshop CC / CS6 / CS5 / Photoshop …

Leave a Reply