Bootstrap Carousel Slider not working

I have been developing a theme with Bootstrap for my project. As I see there is something wrong with Carousel slider. I have read as much as questions and answers about Carousel here but there is no progress about my problem. I can't copy-paste the code that is seen not good when I paste it here between code tag.

I got the slider from Bootstrap: http://getbootstrap.com/javascript/#carousel

The problem is when I click next page on slider, the link is seen

http://example.com/#carousel-example-generic

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>

and nothing happens after that. And also the first slide is not moving to the second one.

Please check if have all depency in site loaded:

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Here is an Working Example, copy it

http://codepen.io/anon/pen/pNRrPm

    <html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 100%;
            height: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="bs-example" data-example-id="simple-carousel">
    <div class="carousel slide" id="carousel-example-generic" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
            <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active"><img alt="First slide [900x500]"
                                          data-src="holder.js/900x500/auto/#777:#555/text:First slide"
                                          src="http://i.imgur.com/CK3d6nV.jpg" data-holder-rendered="true"></div>
            <div class="item"><img alt="Second slide [900x500]"
                                   data-src="holder.js/900x500/auto/#666:#444/text:Second slide"
                                   src="http://i.imgur.com/SlHr4zn.jpg" data-holder-rendered="true">
            </div>
            <div class="item">
                <img alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide"
                     src="http://i.imgur.com/OAMaVRo.jpg" data-holder-rendered="true"></div>
        </div>
        <a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev"> <span
                    class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                    class="sr-only">Previous</span> </a> <a href="#carousel-example-generic"
                                                            class="right carousel-control" role="button"
                                                            data-slide="next"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
                    class="sr-only">Next</span> </a></div>
</div>
</body>
</html>