自動スライダーを作成する

Question

スライダーにこのコードを作成しました。サムネイル画像をホバーすると画像が表示されますが、自動スライダーを作成する必要があります。これどうやってするの？ /************************************************* ***************************************************あなたは自動的に物事を変更したい場合は、あなたがビルドでxFunctionを呼び出すJavaScript関数setInterval(xfunction, xInterval)を、使用することができます****/

.sliderconteainer { 
    width: 100%; 
    position: relative; 
    border: 2px double silver; 
    border-radius: 5px; 
} 

.thmbnail { 
    width: 25%; 
    height: 100px; 
    float: left; 
} 

.slide { 
    width: 100%; 
    height: 300px; 
    position: absolute; 
    float: right; 
    left: 0; 
    top: 0; 
    opacity: 0; 
} 

.slide img { 
    height: 300px; 
    width: 100%; 
} 

.thmbnail img { 
    width: 100%; 
    height: 95%; 
    border: 2px solid #EEEEEE; 
    border-radius: 5px; 
} 

.content-placeholder { 
    width: 100%; 
    height: 300px; 
} 

.info { 
    background-color: black; 
    z-index: 99; 
    margin-top: -66px; 
    position: absolute; 
    width: 100%; 
    padding-right: 10px; 
    opacity: .75; 
    border-radius: 5px; 
} 

.info p { 
    color: #ABB3BD; 
    font-family: 'B Mitra'; 
} 

.info h5 { 
    font-family: 'B Titr'; 
    color: #ffffff; 
} 

.thmbnail:hover .slide { 
    opacity: 1; 
} 
.thmbnail:hover .thmbnail img { 
    border: 2px solid #56656E; 
} 

#main { 
    padding: 10px; 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="main"> 
    <div class=" sliderconteainer col-md-5 col-sm-5"> 
    <div class="content-placeholder"></div> 
    <div class="thmbnail"> 
     <div class="slide"> 
     <img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/> 
     <div class="info"> 
      <h5>عنوان برای اسلید اول</h5> 
      <p>توضیحالت اسلاید دوم</p> 
     </div> 
     </div> 
     <img src="~/Image/SiteDesign/profile.jpg"/> 
    </div> 
    <div class="thmbnail"> 
     <div class="slide"> 
     <img src="~/Image/Slider/8.jpg"/> 
     <div class="info"> 
      <h5>عنوان برای اسلید اول</h5> 
      <p>توضیحالت اسلاید دوم</p> 
     </div> 
     </div> 
     <img src="~/Image/Slider/8.jpg"/> 
    </div> 
    <div class="thmbnail"> 
     <div class="slide"> 
     <img src="~/Image/Slider/image-slider-2.jpg"/> 
     <div class="info"> 
      <h5>عنوان برای اسلید اول</h5> 
      <p>توضیحالت اسلاید دوم</p> 
     </div> 
     </div> 
     <img src="~/Image/Slider/image-slider-2.jpg"/> 
    </div> 
    <div class="thmbnail "> 
     <div class="slide"> 
     <img src="~/Image/Slider/Megumi-4565.jpg"/> 
     <div class="info"> 
      <h5>عنوان برای اسلید اول</h5> 
      <p>توضیحالت اسلاید دوم</p> 
     </div> 
     </div> 
     <img src="~/Image/Slider/Megumi-4565.jpg"/> 
    </div> 
    </div> 
</div> 

Answer 1

、すべてのxInterval

setInterval(function() { 
    console.log("MOVE IT"); 
    moveLeft(); 
}, 1000); 

@ dennis-kochが述べたように、私はまたスライダに使用できるプラグインを見てください。