テキストでスライダを作る方法

Question

私のスニペットからわかるように、私は3つのリンクとフォントワームアイコンを持つボックスを持っています。さて、フォントアイコンをクリックしてコンテンツをスライドさせたいと思っています。 3つ以上のリンクがあるとしましょう。最初は3つ表示したいのですが、矢印をクリックすると他のアイコンが表示されます。 最後に、リンクをクリックすると、表示されている内容を表示して非表示にするコンテンツを表示する必要があります。 注：私はその時点で3つのリンクしか持つことができません。

できるだけお手伝いをしてください。ここで

私のintial HTMLマークアップ：ここ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
<div class="bar"> 
    <div class="latest-games"> 
    <a href="">Latest Games</a> 
    </div> 
    <div class="progressive"> 
    <a href="">Progressive</a> 
    </div> 
    <div class="video"> 
    <a href="">Video</a> 
    </div> 
    <i class="fa fa-angle-right" aria-hidden="true"></i> 
</div> 

私のスタイリング：

.bar{ 
    background-color: black; 
    display: flex; 
    padding: 10px 0; 
    justify-content: center; 

    a{ 
     text-transform: uppercase; 
     font-weight: bold; 
    } 

    & > div{ 
     width: 30%; 
     justify-content: center; 
     text-align: center; 
    } 
    i.fa.fa-angle-right { 
     margin-top: 4px; 
     color: white; 
    } 
} 

私は、少なくともそれを起動する方法を知っていたいが、残念ながら私の以前のサイトはワードプレスで行ったのです、すべてのjqueryファンシーなもののために、私は通常プラグインを使用します。私の不運のために、私は今のところwordpressでこれを行うことはできません。あなたはjQueryプラグインを使用する必要がhttp://codepen.io/Sidney-Dev/pen/qqbojV

Answer 1

私のjqueryもまだ最高のものではありません。しかし、これは私があなたのために、あなたが何をどのようそこから改善するためのいくつかの手がかりを得ることができることを望むことができるものである：

HTML：

<div class="bar" id="slider"> 

    <div class="latest-games item"> 
    <a href="">Latest Games</a> 
    </div> 
    <div class="progressive item"> 
    <a href="">Progressive</a> 
    </div> 
    <div class="video item"> 
    <a href="">Video</a> 
    </div> 
    <div class="latest-games item"> 
    <a href="">Latest Games</a> 
    </div> 
    <div class="progressive item"> 
    <a href="">Progressive</a> 
    </div> 
    <div class="video item"> 
    <a href="">Video</a> 
    </div> 
    <div class="latest-games item"> 
    <a href="">Latest Games</a> 
    </div> 
    <div class="progressive item"> 
    <a href="">Progressive</a> 
    </div> 
    <div class="video item"> 
    <a href="">Video</a> 
    </div> 
    <i class="fa fa-angle-right" aria-hidden="true"></i> 
</div> 

はSCSS：

.bar{ 
    background-color: black; 
    display: flex; 
    padding: 10px 0; 
    justify-content: center; 

    a{ 
     text-transform: uppercase; 
     font-weight: bold; 
    } 

    & > div{ 
     width: 30%; 
     justify-content: center; 
     text-align: center; 
    } 
    i.fa.fa-angle-right { 
     margin-top: 4px; 
     color: white; 
    } 
} 

のjQuery：

$(document).ready(function() { 

    $("#slider").owlCarousel({ 

     autoPlay: 3000, //Set AutoPlay to 3 seconds 
     items : 3, 
     itemsDesktop : [1199,3], 
     itemsDesktopSmall : [979,3] 

    }); 

}); 

あなたはいけない理由運

Answer 2

：

は、ここに私のcodepenです。いくつかのファイルを含める必要があり、準備が整いました。

これはhttp://owlgraphic.com/owlcarousel/demos/images.htmlです。