Today in this tutorial, we will learn to implement image slider using bootstrap, similarly we will learn how to create content slider called as carousel using the same technique.
- So to, learn to implement image slider using bootstrap follow the steps given below :
- First of all visit the getbootstrap.com website .
- Click on Download link .
- Download the latest version of the bootstrap which will be in zip format .
- Just Extract the downloaded zip bundle .
- After extracting the folder you will have following contents in it :
- In this downloaded folder lets create index.html and style.css file and an img folder to save the images.
- Hence you will have following view of your window :
- Let’s learn to implement image slider using bootstrap.
- Now open the index.html file with any text editor like Notepad++ and write the following code in it :
- Thus when you run your index.html file you will have the following output :
- You can also use the content slider if you want to insert some text inside the slider.
- For this just replace the code of the index.html file with the following one :
- Hence, when you run index.html file now, you will have the following output :
- To add style to our slider just in your style.css file write the given code :
- Hence, after adding style we will have the following output :
- Hence, we have successfully learnt to implement image slider using bootstrap.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> <title>Carousel for Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <!--couresel --> <!--carousel image slider--> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="img/slide1.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>Anroid</h3> <p>hi welcome to Anroid</p> </div> </div> <div class="item"> <img src="img/slide2.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>WEB DESING</h3> <p>hi welcome to web design</p> </div> </div> <div class="item"> <img src="img/slide3.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>PHP</h3> <p>hi welcome to PHP</p> </div> </div> <div class="item"> <img src="img/slide4.jpg" class="img-responsive"> <div class="carousel-caption"> <h3>Asp</h3> <p>hi welcome to ASP</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span></a> </div> <!--End couresel --> <div class="container"> </div> <!-- /.container --> <!-- Bootstrap core JavaScript============== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> <title>Carousel for Bootstrap</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <!--carousel--> <div id="myCarousel" class="carousel slide jumbotron"> <div class="container"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <h1>Web Design</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> <div class="item"> <h1>Web Developments</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> <div class="item"> <h1>Wordpress Devlopment</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> <div class="item"> <h1>PHP Devlopment</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit consectetur adipiscing elit. Praesent commodo cursus magna,et.consectetur adipiscing elit. Maecenas sed diam.consectetur adipiscing elit.</p> <a href="#" class="btn btn-success btn-lg">Learn More..</a> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span></a> </div> <!--End carousel--> <!-- Bootstrap core JavaScript============= --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
An interesting discussion is definitely worth
comment. I do believe that you should write more
on this subject matter, it might not be a taboo subject but generally people do not talk about these subjects.
To the next! All the best!!