JQueryの画像スライダーがうまく機能します

私は自分のウェブサイトに画像スライダー機能を実装するためのすぐに使えるコードを貼り付けました。スライダーは動作しますが、そうではありません。静的ではありません（画像は同じ場所で変わります）が、画像は右に飛びます。私は何を間違えたのですか？助けていただければ幸いです。JQueryの画像スライダーがうまく機能します

コード

\t \t 
 

 
$(function() { 
 
    var image = $("#slider img"); 
 
    var numSlides = image.length; 
 
    var activeSlide = 0; 
 
    var speed = 2000; 
 
    var fade = 1000; 
 
    var timer = setInterval(rotate, speed); 
 
    image.eq(activeSlide).show(); 
 
    \t \t 
 
    function rotate() { 
 
     activeSlide++; 
 
    \t \t 
 
    \t if (activeSlide == numSlides) { 
 
      activeSlide = 0; 
 
    \t \t } 
 

 
    \t \t 
 
    \t image.not(activeSlide).fadeOut(fade); 
 
    \t image.eq(activeSlide).fadeIn(fade); 
 
    \t \t } 
 
    });

@import 'https://fonts.googleapis.com/css?family=Vesper+Libre:400,500,700,900&subset=devanagari,latin-ext'; 
 

 
.navbar { 
 
    background-color:#bcaaa4; 
 
    height:100px; 
 
    margin-bottom: 0 !important; 
 
    border:none; 
 
    /*border-bottom:1px solid black;*/ 
 
    border-radius: 0 !important; 
 
    -moz-border-radius: 0 !important; 
 
} 
 

 
.navbar-right li a { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size:18px; 
 
    color: #efebe9 !important; 
 
    text-transform:uppercase; 
 
} 
 

 
#buy-it-now a { 
 
    border:2px solid #efebe9; 
 
    border-radius:50px; 
 
} 
 

 
a.navbar-brand { 
 
    /*background-color:red;*/ 
 
    padding:0; 
 
    width:100px; 
 
    height:100%; 
 
} 
 

 
#logo-img { 
 
    padding-top:0; 
 
    width:100px; 
 
} 
 

 
/*********** UPPER SECTION ************/ 
 
.upper-section-central-content { 
 
    /*background-color:red;*/ 
 
    margin-top:120px; 
 
    height:auto; 
 
} 
 

 
#upper-sec-img-wrapper img { 
 
    width:400px; 
 
} 
 

 
#upper-sec-img-wrapper { 
 
    width:400px; 
 
    margin:0 auto; 
 
} 
 

 
.upper-section { 
 
    padding-top:0 !important; 
 
    background-color:#bcaaa4; 
 
} 
 

 
#upper-sec-words-wrapper { 
 
    margin-top:120px; 
 
    text-align:center; 
 
    /*background-color:red;*/ 
 
} 
 
#upper-sec-words-wrapper p:first-child{ 
 
    font-family:"Roboto"; 
 
    font-size:30px; 
 
    font-weight:bold; 
 
    color:#efebe9; 
 
} 
 

 
#upper-sec-words-wrapper p:nth-child(2){ 
 
    font-family:"Raleway"; 
 
    font-size:18px; 
 
    font-weight:light; 
 
    color:#efebe9; 
 
} 
 

 
/******MIDDLE SECTION*******/ 
 

 
.middle-section { 
 
    background-color:#e5dfdc; 
 
} 
 

 
.mid-sec-words p { 
 
    text-align:center; 
 
    margin-top:70px; 
 
    font-family:"Raleway"; 
 
    font-weight:Medium; 
 
    font-size:30px; 
 
    color:#d7c3e5; 
 
} 
 

 
.mid-sec-img { 
 
    margin-top:50px; 
 
    /*background-color:red;*/ 
 
    height:auto; 
 
} 
 

 
.inner-img { 
 
    margin:0 auto; 
 
    width:300px; 
 
} 
 

 
.inner-img-center { 
 
    margin:0 auto; 
 
    width:500px; 
 
} 
 

 
.first-fox { 
 
    margin:0 auto; 
 
    width:200px; 
 
} 
 

 
.inner-img img { 
 
    padding-top:20px; 
 
    width:100%; 
 
} 
 

 
.inner-img-center img { 
 
    padding-top:30px; 
 
    width:100%; 
 
} 
 

 
.gallery { 
 
    background-color:#e5dfdc; 
 
} 
 
.gallery .col-md-8 { 
 
    background-color:red; 
 
    height:400px; 
 
} 
 

 
.gallery .col-md-4 { 
 
    background-color:blue; 
 
    height:400px; 
 
} 
 

 

 

 

 

 
/***** Make text responsive *****/ 
 

 
@media all and (max-width: 2000px) { 
 
/* screen size until 1200px */ 
 
    
 
    navbar-nav li a { 
 
     font-size: 18px; /* 1.5x default size */ 
 
    } 
 
} 
 

 
@media all and (max-width: 1600px) { 
 
/* screen size until 1200px */ 
 
    
 
    navbar-nav li a { 
 
     font-size: 18px; /* 1.5x default size */ 
 
    } 
 
} 
 

 
@media all and (max-width: 1200px) { 
 
/* screen size until 1200px */ 
 
    
 
    navbar-nav li a { 
 
     font-size: 18px; /* 1.5x default size */ 
 
    } 
 
} 
 

 
@media all and (max-width: 1000px) { /* screen size until 1000px */ 
 
    
 
    navbar-nav li a { 
 
     font-size: 18px; /* 1.5x default size */ 
 
    } 
 
    
 
    #upper-sec-words-wrapper { 
 
     margin-top:180px; 
 
    } 
 
    
 
    #buy-it-now a { 
 
    border:none; 
 
    } 
 
    
 
    } 
 
@media all and (max-width: 500px) { /* screen size until 500px */ 
 
    navbar-nav li a { 
 
     font-size: 18px; /* 1.5x default size */ 
 
    } 
 
    
 
    #upper-sec-img-wrapper img { 
 
      width:300px; 
 
     } 
 
    
 
    #upper-sec-words-wrapper p:first-child{ 
 
     font-family:"Roboto"; 
 
     font-size:24px; 
 
     font-weight:bold; 
 
     color:#efebe9; 
 
    } 
 

 
    #upper-sec-words-wrapper p:nth-child(2){ 
 
     font-family:"Raleway"; 
 
     font-size:12px; 
 
     font-weight:light; 
 
     color:#efebe9; 
 
    } 
 
    .mid-sec-words p { 
 
     font-size:24px; 
 
    } 
 
    
 
    .inner-img-center img { 
 
     width:60%; 
 
    } 
 
    
 
    .inner-img img { 
 
     width:80%; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#"><img id="logo-img" src="http://www.fillfox.com/wp-content/uploads/2014/02/FILL-FOX-LOGO-ONLY3A-1024x1024.png"></a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Features</a></li> 
 
     <li><a href="#">Species</a></li> 
 
     <li id="buy-it-now"><a href="#">Buy it now</a></li> 
 
     
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<section class="upper-section"> 
 

 
<div class="container"> 
 
    
 
    <div class="row"> 
 
    
 
     <div class="row"> 
 
     
 
     <div class="col-md-6 col-md-offset-3 col-xs-12" id="upper-sec-words-wrapper"> 
 
      <p>“Sweet, Beautiful and Dangerous”</p> 
 
      <p>ADOPT THE MOST GORGEOUS FOXES TO EMBOLISH YOUR SETTING</p> 
 
     </div> 
 

 
     </row> <!--end of inside row--> 
 
    
 
    <div class="col-md-6 col-md-offset-3 col-xs-12 upper-section-central-content"> 
 
     
 
     <div id="upper-sec-img-wrapper"> 
 
      <img class="img-responsive" id="upper-section-img" src="http://pngimg.com/upload/fox_PNG370.png"> 
 
      
 
     </div> 
 
     
 
    </div> <!--end of col-md-6--> 
 
    
 
    </div> <!--end of row--> 
 
    
 
</div><!-- /.container --> 
 
    
 
</section> <!--UPPER-SECTION--> 
 

 

 
<section class="middle-section"> 
 
    
 
    <div class="container"> 
 
    
 
    <div class="row"> 
 
     
 
     <div class="col-md-6 col-md-offset-3 col-xs-12 mid-sec-words"> 
 
     
 
     <p>Look how pretty they are!</p> 
 
     
 
     </div> <!--end mid-sec-words--> 
 
     
 
    </div> <!--end row--> 
 
    
 
    <div class="row"> 
 
     
 
     <div class="col-md-4 mid-sec-img"> 
 
     
 
     <div class="inner-img first-fox"> 
 
      
 
      <img src="http://t06.deviantart.net/SYKQBb0tWScCRv1RHCj-beynIdY=/300x200/filters:fixed_height(100,100):origin()/pre15/1d3c/th/pre/i/2011/148/4/d/fox_lineart_by_neonmars-d3hf06q.png"> 
 
      
 
     </div> 
 
     
 
     </div> <!--mid-sec-img--> 
 
     
 
     <div class="col-md-4 mid-sec-img"> 
 
     
 
      <div class="inner-img"> 
 

 
       <img src="https://orig03.deviantart.net/bd8b/f/2016/002/4/3/free_to_use___fox_base_by_maonii-d9mge7j.png"> 
 

 
      </div> 
 
     
 
     </div> <!--mid-sec-img--> 
 
     
 
     <div class="col-md-4 mid-sec-img"> 
 
     
 
      <div class="inner-img"> 
 

 
       <img src="http://orig12.deviantart.net/cc3f/f/2013/186/f/8/free_new_fox_lines_by_galianogangster-d6c638n.png"> 
 

 
      </div> 
 
     
 
     </div> <!--mid-sec-img--> 
 
     
 
    </div> <!--end row--> 
 
    
 
    <div class="row"> 
 
     
 
     <div class="col-md-6 col-md-offset-3 col-xs-12"> 
 
     <div class="inner-img-center"> 
 
      <img src="http://orig01.deviantart.net/80a2/f/2015/283/e/7/_cm__red_fox_by_cylithren-d9cmeb6.gif"> 
 
     </div> 
 
     </div> 
 
     
 
    </div> <!--row--> 
 
    
 
    <div> <!--container--> 
 
    
 
</section> <!--middle-section--> 
 
    
 
<section class="gallery"> 
 
    
 
    
 
    <div class="container"> 
 
    
 
    <div class="row"> 
 
     
 
     <div class="col-md-8"> 
 
     
 
     <div id="slider"> 
 
      
 
      <img src="http://placekitten.com/200/200?image=1"> 
 
      <img src="http://placekitten.com/200/200?image=2"> 
 
      <img src="http://placekitten.com/200/200?image=3"> 
 
      <img src="http://placekitten.com/200/200?image=4"> 
 
      <img src="http://placekitten.com/200/200?image=5"> 
 
      <img src="http://placekitten.com/200/200?image=6"> 
 
      <img src="http://placekitten.com/200/200?image=7"> 
 
      
 
     </div> <!--slider--> 
 
     
 
     </div> <!--col-md-8--> 
 
     
 
     <div class="col-md-4"> 
 
     
 
     </div> 
 
     
 
    </div> <!--row--> 
 
    </div> <!--container--> 
 
    
 
    
 
</section>

出典

2016-07-15 NZMAI

2枚のスライドを同時にロードされ、最初のものがなくなるまでよう互いに隣接して表示されているからです。私はあなたが一度にそれらのすべてをロードし、絶対的な位置を使用する必要がありますと思う。あなたは同じ場所に留まりながら、それらの間で消えることができます。 – Lee

ウェブサイトのコードをすべて含める必要はありませんでした。私が正しく理解すれば、イメージは消えてフェードインするはずですか？それは*スライディング*ではないので – Aziz

リーではない、それが正常に動作し、私は絶対に画像を配置正しかったです。ちなみに、私はdiv（col-md-8）全体をカバーするように画像を伸ばすことができますか？イメージのように。スライダーdivの幅を100％に、画像を100％に設定しようとしますが、画像は親divにオーバーフローします。おそらく

出典

2016-07-15 12:22:37 NZMAI

JQueryの画像スライダーがうまく機能します

答えて

関連する問題