このスライダをブートストラップとJavaScriptで動作させることはできません

Question

このスライダを使って写真を移動することはできません。私は写真が入っている部門のサイジングだと思っています。おそらく私は部門のサイズを増やす必要がありますか？私はページをリロードすると、分割された画像を見ることができるので、divのサイジングになるはずです...ありがとう。

index.php 
<div class='row'>   
     <div class='col-md-6 col-md-push-3 standardMargin'> 
      <div class='col-lg-12' id='inner'> 
       <img src='../images/comp1.jpg' name='slide' width='600' height='400' class='img-responsive'/> 
      </div> 
     </div>   

     <div class='col-sm-6 col-md-3 col-md-pull-6 firstCaption standardMargin'> 
      <div class='col-lg-12 col-md-12 fancy standardMargin'> 
       <h4>Lorem Ipsum</h4> 
       <ul class='first'> 
        <li>Lorem Ipsum</li> 
        <li>Lorem IpsumLorem IpsumLorem Ipsum 
         Lorem IpsumLorem IpsumLorem Ipsum 
        </li> 
        <li>Lorem IpsumLorem Ipsum</li> 
        <li>Lorem IpsumLorem IpsumLorem Ipsum 
        Lorem IpsumLorem IpsumLorem Ipsum 
        </li> 
        <li></li> 
       </ul> 
      </div> 
     </div> 

      <div class='col-sm-6 col-md-3 firstCaption standardMargin fancy'> 
       <h4>Lorem Ipsum</h4> 
       <ul class='first second'> 
        <li>Lorem IpsumLorem IpsumLorem Ipsum 
        Lorem IpsumLorem IpsumLorem Ipsum 
        Lorem IpsumLorem IpsumLorem Ipsum 
        Lorem IpsumLorem IpsumLorem Ipsum 
        Lorem IpsumLorem IpsumLorem Ipsum 
        </li> 

       </ul>    
      </div>  
    </div> 

script.js 

var image1 = new Image(); 
image1.src = 'mywebsite/images/comp1.jpg'; 
var image2 = new Image(); 
image2.src = 'mywebsite/images/comp2.jpg'; 
var image3 = new Image(); 
image3.src = 'mywebsite/images/comp3.jpg'; 
var image4 = new Image(); 
image4.src = 'mywebsite/images/comp4.jpg'; 
var image5 = new Image(); 
image5.src = 'mywebsite/images/comp5.jpg'; 
var image6 = new Image(); 
image6.src = 'mywebsite/images/comp6.jpg'; 
var image7 = new Image(); 
image7.src = 'mywebsite/images/comp7.jpg'; 
var image8 = new Image(); 
image8.src = 'mywebsite/images/comp8.jpg'; 
var image9 = new Image(); 
image9.src = 'mywebsite/images/comp9.jpg'; 

var step = 1; 
function slider(){ 
document.images.slide.src = 'image' + step + '.src'; 
if (step < 9){ 
    step++; 
} 
else { 
    step = 1; 
} 
setTimeout(slider(), 3000); 
} 
slider(); 

Answer 1

ブートストラップを使用している場合は、bootstrap.jsファイルとともにJQueryが含まれていることを確認してください。スライダを機能させるために独自のJSを使用する必要はありません。ここに実例があります：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></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> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="http://placehold.it/2000x500" alt=""> 
    </div> 

    <div class="item"> 
     <img src="http://placehold.it/2000x500" alt=""> 
    </div> 

    <div class="item"> 
     <img src="http://placehold.it/2000x500" alt=""> 
    </div> 

    <div class="item"> 
     <img src="http://placehold.it/2000x500" alt=""> 
    </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

画像はJSではなくマークアップにあります。