私はコンテンツでスライドショーを作りたいと思っています

Question

recently i visited this site : [http://www.suprafootwear.com/][1]  


    [1]: http://www.suprafootwear.com/ 

私は、ホームページにスライドショーがあることを知っています（フルスライドショー）。それはそれが私はその画像のスライドショーを表示することをクリックしたときにそれはそれの下にslidetextを持っているそれについてのクールなものの一つは、自動負荷をスライドさせます。 どのようにしてこのタイプのスライドショーを作ることができますか？ i had record gif of this slideshow panel for reference

また、彼らはowl carouselプラグインを使用します。

ので、私はそれ 下の内容と全く同じスライドショーを作りたいここ

Answer 1

$(document).ready(function() { 
 
\t $('.owl-carousel').owlCarousel({ 
 
\t \t items: 1, 
 
\t \t loop: true, 
 
\t \t center: true, 
 
\t \t margin: 0, 
 
\t \t callbacks: true, 
 
\t \t URLhashListener: false, 
 
\t \t autoplayHoverPause: true, 
 
\t \t startPosition: 'URLHash', 
 
\t \t autoplay: true, 
 
\t }); 
 
});

.owl-carousel .item img { 
 
    display: block; 
 
    width: 100%; 
 
    height: 300px !important; 
 
} 
 
.text-tags { text-align:center; } 
 
.text-tags ul { list-style:none; } 
 
.text-tags ul li { display:inline-table; width:20%; border:#000 solid 1px; padding:10px; margin:0px !important; 
 
background-color: #f39c12; } 
 
.text-tags ul li a { 
 
    margin-bottom: 10px; 
 
    padding: 10px 0; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-family: 'corporate_condensed', sans-serif; 
 
    color:#fff; 
 
    margin: 5px; 
 
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> 
 

 

 
<section id="demos"> 
 
\t <div class="owl-carousel"> 
 
\t \t <div class="item" data-hash="one"> 
 
\t \t \t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/1.jpg" alt=""> 
 
\t \t </div> 
 
\t \t <div class="item" data-hash="two"> 
 
\t \t \t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/2.jpg" alt=""> 
 
\t \t </div> 
 
\t \t <div class="item" data-hash="three"> 
 
\t \t \t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/3.jpg" alt=""> 
 
\t \t </div> 
 
\t \t <div class="item" data-hash="four"> 
 
\t \t \t <img src="http://tympanus.net/Tutorials/FullscreenSlitSlider/images/4.jpg" alt=""> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="text-tags"> 
 
\t \t <ul> 
 
\t \t \t <li><a class="button secondary url" href="#one">Image 1</a></li> 
 
\t \t \t <li><a class="button secondary url" href="#two">Image 2</a></li> 
 
\t \t \t <li><a class="button secondary url" href="#three">Image 3</a></li> 
 
\t \t \t <li><a class="button secondary url" href="#four">Image 4</a></li> 
 
\t \t </ul> 
 
\t </div> 
 
</section>

リンクhttp://www.owlcarousel.owlgraphic.com/demos/demos.html、ここにあなたがデモや必要な資産（CSS & JS）、ダウンロードを検索し、その上で作業を開始することができます。..ですhttps://jsfiddle.net/q851zfwe/1/

Answer 2

はあなたがOWL-CAROUSEL、素晴らしいjQueryのを必要とするものである

おかげで私を助けて多くのエフェクトと機能を備えたSliderプラグイン。だれもそれを行うつもりはないので、ここから誰とでも完全に統合されるとは思わない。ここにチェックが

を試してみる私の