Ich möchte Diashow mit Inhalt machen beaneath es

Question

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


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

Ich habe gesehen, dass es eine Diashow auf der Homepage gibt (Vollbild-Diashow). eine der coolen Sache, dass es automatisch laden und auch hat es slidetext darunter, wenn Sie auf das klicken, dass ich diese Diashow anzeigen wird. so kann mir jeder helfen, herauszufinden, wie ich diese Art von Diashow erstellen kann. i had record gif of this slideshow panel for reference

auch sie verwenden Eulenkarussell-Plugin.

so will ich mit Inhalt darunter mir helfen, genau das gleiche Diashow entziffern

dank

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>

prüfen

meine ausprobieren finden Arbeitsgeige: https://jsfiddle.net/q851zfwe/1/

Answer 2

hier ist, was Sie brauchen OWL-KARUSSELL, eine wunderbare jQuery Slider-Plugin mit einer Anzahl von Effekten und Funktionen. Erwarte aber keine vollständige Integration von irgendjemandem hier, da niemand das tun wird. Hier ist der Link http://www.owlcarousel.owlgraphic.com/demos/demos.html, hier können Sie die Demos und erforderlichen Assets (CSS & JS), herunterladen und starten Sie arbeiten daran ..