Skip to main content

How to Create a Carousel using Bootstrap and jQuery


Adding Dependency

First, we are going to add the dependencies for the carousel to work and in this tutorial, I've used CDN so you need internet connection for them to work. Include the ff dependecies in header for the Boostrap 3.3.7 CSS or you can put the jQuery and Bootstrap 3.3.7 JS at the bottom of body tag. Note: Always declare jQuery first than your Bootstrap JS since Bootstrap JS needs jQuery for some of its functions.

Add the Carousel

Next we add the whole Carousel on our body. The place where you want to put this is up to you. The id of our Carousel is myCarousel which is defined as id="myCarousel" data-ride="carousel" tells bootstrap to start animating the carousel as the page loads. Make sure to put 1 active item and indicator to indicate specify a starting point as the page loads as seen like this. Active Item:
First Image
Active Indicator:
  • That ends this tutorial. Happy Coding :)

    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

    CAPTCHA
    This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.