How to create SlideShow (carousel) using bootstrap

in #utopian-io7 years ago (edited)

What Will I Learn?

  • You will learn any bootstrap class to build slideshow
  • You will learn how to use bootstrap class to add icon in slideshow
  • You will learn How to add captions on slide

Requirements

  • You have basic about HTML
  • You have basic about CSS
  • You have basic about JavaScript

Difficulty

  • Basic

Tutorial Contents

Slideshow is an alternate display of images, be it two or more images. We often see it on news websites or shopping websites. Slideshow is often called the carousel.

To make a carousel is not difficult if we use bootstrap, we only need to call the classes that have been provided. For more details, let's look at the following steps:

  • Prepare two or more images and store them in a folder. then create a new htlm file in that folder also with the name slideshow.html or up to you.

  • as I often explain in the previous bootstrap tutorial, To use bootstrap we have to host the boostrap file and use html5 doctype. Or for easier, we can also use Bootstrap CDN without having to host the bootstrap file. Note : to create this part we should import CDN of jQuery also. copy the following code and paste it inside the slideshow.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Slide Show</title>
</head>
<body>
    here the code . . . . 
</body>
</html>
  • Now we will start building slide show. paste the following code inside the container.
<div id="myCarousel" class="carousel slide" data-ride="carousel"></div>

id="myCarousel" : The id name of carousel, it need an id forcarousel controls to function properly, .carousel : slideshow class on bootstrap, .slide : class to add the css transition and animation effect, data-ride="carousel" : attribute tells Bootstrap to begin animating the carousel immediately when the page loads.

  • Adding images for slides, add this code in previous div element. Then try to run the code on your browser, you will se the slides images.
 <div class="carousel-inner">
            <div class="item active">
              <img src="gambar1.JPG" style="width:100%;">
            </div> 
            <div class="item">
              <img src="gambar2.JPG" style="width:100%;">
            </div>      
            <div class="item">
              <img src="gambar3.JPG" style="width:100%;">
            </div>
          </div>

.carousel-inner : the slides class, .item : the content of slides class, you can add more image or more text to display more content, .active : needs to be added to one of the slides or the slides will be failed

image.png

  • Adding indicators. Do you know what is indicators ? are the little dots at the bottom of each slide. Paste the following code under the carousel-inner element. Then try to run the file, you will see the dots at the bottom of your slides
<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>

.carousel-indicators : carousel indicators class, data-target="#myCarousel" : attribute points to the id of the carousel, data-slide-to="0" : attribute specifies which slide to go to, when clicking on the specific dot.

image.png

  • Adding the Left and right controls, Paste the following code under the indicator part code, then run on your browser and see the change.
<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>

image.png

  • Adding the captions in slide, to create this part we just need call the .carousel-caption class and put it under the <img tag. Here full example :
          <div class="carousel-inner">
            <div class="item active">
              <img src="gambar1.JPG" alt="Los Angeles" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata Alone</h3>
                <p>My name is sogata from Aceh</p>
              </div>
            </div>      
            <div class="item">
              <img src="gambar2.JPG" alt="Chicago" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata and Kamil</h3>
                <p>Kamil is a GAYO man</p>
              </div>
            </div>         
            <div class="item">
              <img src="gambar3.JPG" alt="New york" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata and Friens</h3>
                <p>Your Friend is who make you cry </p>
              </div>
            </div>
          </div>

image.png

  • Finish, to get better results, you can combine as you like. The full code you can copy bellow or you can also download here the full file of this tutorial as your reference
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">  
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          (html comment removed: slides )
          <div class="carousel-inner">
            <div class="item active">
              <img src="gambar1.JPG" alt="Los Angeles" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata Alone</h3>
                <p>My name is sogata from Aceh</p>
              </div>
            </div>      
            <div class="item">
              <img src="gambar2.JPG" alt="Chicago" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata and Kamil</h3>
                <p>Kamil is a GAYO man</p>
              </div>
            </div>         
            <div class="item">
              <img src="gambar3.JPG" alt="New york" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata and Friens</h3>
                <p>Your Friend is who make you cry </p>
              </div>
            </div>
          </div>
       (html comment removed:  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>
          (html comment removed:  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>
      </div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">  
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          (html comment removed: slides )
          <div class="carousel-inner">
            <div class="item active">
              <img src="gambar1.JPG" alt="Los Angeles" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata Alone</h3>
                <p>My name is sogata from Aceh</p>
              </div>
            </div>      
            <div class="item">
              <img src="gambar2.JPG" alt="Chicago" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata and Kamil</h3>
                <p>Kamil is a GAYO man</p>
              </div>
            </div>         
            <div class="item">
              <img src="gambar3.JPG" alt="New york" style="width:100%;">
              <div class="carousel-caption">
                <h3>Sogata and Friens</h3>
                <p>Your Friend is who make you cry </p>
              </div>
            </div>
          </div>
       (html comment removed:  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>
          (html comment removed:  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>
      </div>
</body>
</html>

Curriculum



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Coin Marketplace

STEEM 0.17
TRX 0.15
JST 0.027
BTC 60678.52
ETH 2339.38
USDT 1.00
SBD 2.48