How to create SlideShow (carousel) using bootstrap

sogata (64)in #utopian-io • 7 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

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.

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>

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>

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

#tutorials #opensource #bootstrap #aceh

7 years ago in #utopian-io by sogata (64)

$26.13

Sort:

Trending

[-]

rejacole (55) 7 years ago

Kece that model jih 😎

$0.34

2 votes

[-]

sogata (64) 7 years ago

HAhaha bek neugabuk bang, takot male entek model jih. Han jitem le

$0.34

2 votes

[-]

utopian-io (71) 7 years ago

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x