Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Richard Duffy
Richard Duffy
16,488 Points

Bootstrap Carousel Not Working Properly.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, inital-scale=1.0">
        <title>Pre Pro Industries LTD</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/global.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </head>
    <body>
    <script> 
    </script>
        <nav class="nav navbar-default" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="index.html" class="navbar-brand">Pre Pro Industries LTD</a>
                    </div>
                <div class="collapse navbar-collapse" id="nav">
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">Home</a></li>
                            <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<b class="caret"></b></a>

                            <ul class="dropdown-menu">
                                <li><a href="consult.html">Consultation</a></li>
                                <li class="divider"></li>
                                <li><a href="programming.html">Programming</a></li>
                                <li class="divider"></li>
                                <li><a href="workshops.html">Workshops</a></li>
                            </ul>
                        </li>
                    <li><a href="partners.html">Our Partners</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="http://www.blog.preproindustries.co.uk">Blog</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    </div>
                </ul>
            </div>


            <div class="box">
                        <div id="carousel" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel" data-slide-to="1" ></li>
                            </ol>
                            <div class="carousel-inner">
                            <div class="item-active">
                                    <img src="http://5wire.co.uk/images/logo.png"  alt="First Slide">
                            </div>

                                <div class="item">
                                    <img src="http://5wire.co.uk/images/logo.png" alt="First Slide">
                            </div>
                                <div class="item">
                                    <img src="http://5wire.co.uk/images/logo.png" alt="Second Slide">
                            </div>
                        </div>
                    <a class="left carousel-control" href="#carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>

                    <a class="right carousel-control" href="#carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
    </body>

The carousel is not working properly it is only sliding to one and then not sliding to any other, and when I click it only lets you click once.

4 Answers

Richard Duffy
Richard Duffy
16,488 Points
Richard Duffy
Richard Duffy
16,488 Points

Thank you. This has now been fixed!

Richard Duffy
Richard Duffy
16,488 Points
Richard Duffy
Richard Duffy
16,488 Points

Yeah.