Simple Carousel using Bootstrap/Javascript

Submitted by nurhodelta_17 on Tuesday, August 22, 2017 - 14:35.

Language

This tutorial will show you how to create a simple carousel using Bootstrap and Javascript. In this tutorial, I've prepared sample pictures that we are going to use in our carousel. To start with, let's create our slide page. This is the page that will show our images in a slider. Also included on the page, are the scripts used to make the slider. To create the page, open your HTML code editor and paste the code below after the tag. We name our page as "index.php".

<!DOCTYPE html>
<html lang="en">
<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="">
<title>Carousel Example</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
        .sample_slide{
                width:1000px;
                margin-left:50px;
                margin-top:50px;
        }
</style>
<body>
        <div id="myCarousel" class="carousel slide sample_slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                <div class="active item"><img src="img/1.jpeg"  height="250px"></div>
                <div class="item"><img src="img/2.jpeg"  height="250px"></div>
                <div class="item"><img src="img/3.jpeg"  height="250px"></div>
                <div class="item"><img src="img/5.jpeg"  height="250px"></div>
                <div class="item"><img src="img/6.jpeg"  height="250px"></div>
                </div>
                <!-- Carousel nav -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
        
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript">
                $(function(){
                $('#myCarousel').carousel({interval:4000});
                });
        </script>
</body>
</html>

The script and bootstrap are included in the code file of this tutorial.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

298 views