Image Carousel with Bootstrap




Carousel is an idea of assembling more than one content together by displaying them in one division and changing each content according to some delay in some seconds. The can be userd to display multiple images or texts in a webpage. By using a carousel,you can reduce the bulkyness and space of the contents reside inside your webpage and the give a stylish look to your website.

Here I created a simple carousel with the help of bootstrap along with the next and preview image icon and its status bar on the bottom. Here the status bar is in a rectangular look. You can change the look of the status bar from rectangle to circle by adding border-radius to the status icon.

Here is the live implementation of the image Carousel that you can apply to your website.


Live Preview:





This is the common design of the image Carousel that is used by most of the websites to display their images. You can add any number of images by placing more img tags inside the code.The next image or previous image can be seen by click on the arrow marks placed on both side of the carousel. You can also change the image by sliding the image to left or right positions. This simplicity of the bootstrap made the bootstrap famous.

The source code of the image carousel is given below:

Code:

<html>
<head>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzIdXKdmcWRSycOsTLsxuY8VmnNRWvo8Cb5mfiNsY79Gq4XbANj34iz7RW3XasfxvBKr6Yz0S-42E1n-Gj0up_LKIxtL5-70h-Nu0lcFbbQVZi9MPz7rFgsIHGVT5cSV0ZBWPeqmEsNrc/s320/IMG_20190826_062110.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheKVMs6pEN_NhrUM1F8AJA8s-6YabP4y_v9PVhPjaDVeP96oe1ZPgWcWyAdKoTisPkhp7wjBJkTAU3OLiIiK29ql9x-iyzlkZjvINkg-g9I-Hl9s-1OvnOsiTs1DCEWUhYxS29CcTI8AA/s320/IMG_20190826_062142.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqub1dE2jdnEbXAwhAsstAOoK5jra_odkzwOawgn77JpqVOObpUQ7lvwHQmy1mKj9CLsWI3njmopUCWKkZ9Whw9IKlgaEW3RmchMTVMutFwHm_xQyC8fdrpUy0VurY4caQiaQgB2bbAQ/s320/Top-N-PUBG-Wallpapers-in-Full-HD-for-PC-and-Phone-2_4d470f76dc99e18ad75087b1b8410ea9.jpg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Node.js Cheat Sheet

Image
To start a new node project, type  C:\Users\jinoy\OneDrive\Desktop\MERN>npm init -y      The basic syntax of calling a function in node.js with express is : const   functionname  = ()  =>  { console . log ( "hello world" ); } functionname (); To call a function after every 5 seconds : setInterval (()  =>  {      console . log ( "hello" ); }, 5000  ); To call a function only once after 4 second : setTimeout (() => { console . log ( "test" ); }, 4000 ); To run a script.js file on terminal, type : C:\Users\jinoy\OneDrive\Desktop\MERN>node script.js  OR C:\Users\jinoy\OneDrive\Desktop\MERN>node script To stop a function that is executing on every interval( time to call function again) : const   interval  =  setInterval (()  =>  {      console . log ( "hello" ); }, 1000  ); setTimeout (() => {      clearInterval ( interval );      console . log ( "stopped" ); }, 6000 ); The above function will work continously untill
Read more

Codeigniter ! Simple But Powerful

Image
CodeIgniter is a powerful PHP framework with a very small footprint, built for developers who need a simple and elegant toolkit to create full-featured web applications. It is the second largest php framework for website development (first-Laravel). Due to its simplicity, it is the most used framework ever than laravel. Actually these frameworks are only used for developing large scale website. The important thing about this framework is that it is using MVC principle . A MVC or Model View Control framework has a controller that controls all the pages in the website. There can be any number of controller created in codeigniter. The orginal webpages or the contents are placed in the folder named view .  Note : Don't touch the forder named system because it is the soul of the codeigniter Next ⇒
Read more

Introducing Cloudflare Pages ⚡

Image
https://github.com/Jinoy-Varghese/Jain-Lab After a long time cloudflare introduce new feature ' cloudflare pages ' allowing jamstack developers to host their website as free in cloudflare page. This new feature allow developers to use unlimited bandwidth and unlimited websites as a free user. You can host your repo directly to cloudflare servers using github.Websites are built through collaboration between designers, engineers, writers, and more. Cloudflare Pages makes it effortless to satisfy each group, so you can iterate quickly, and save time on coordination. You don't need to worry about the ssl certificate, since cloudflare provides ssl free certificate too.  Note: This pages are only for front end developers, it didn't have a database and did not support php.
Read more