jquery - セクション内のコンテンツをスライドできません。他のプラグインを使用したほうがよいですか?

Question

ホームページに最初の 2 つのセクションを表示したいのですが、ユーザーが [SHOW MORE NEWS] をクリックすると、最初の 2 つのニュースが消え、非表示にした他の 2 つのニュースが表示されます。jCarouselでセクションをスライドさせることは可能ですか? 私は多くの方法を試しましたが、うまくいかなかったからです。コンテンツ セクションのスライドに他のプラグインを使用する方がよいでしょうか?

jQuery ライブラリのインポート

<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.9.1'></script>

HTML:

         <div id="news-content">

             <h1>News</h1>
             <hr/>

             <div id="firstnews">

             <article id="loop-news">
               <img src="image1.png" />
               <a href="#">Title 1</a>
               <p>Text Title 1</h3>
           </article>


             <article id="loop-news">
               <img src="image2.png" />
               <a href="#">Title 2</a>
               <p>Text Title 2</p>
               <h3>Read more</h3>
           </article>

          </div>

          <!-- Just want to show this articles below when click on "SHOW MORE NEWS" -->

          <div id="secondnews">

             <article id="loop-news">
               <img src="image1.png" />
               <a href="#">Text only show</a>
               <p>Text Title 1</h3>
           </article>


             <article id="loop-news">
               <img src="image2.png" />
               <a href="#">Title 2</a>
               <p>Text Title 2</p>
               <h3>Read more</h3>
             </article>

           </div>

           <hr/>
           <a href="#" id="nextBtn">SHOW MORE NEWS(+)</a>

           </div>

Jクエリ:

<script type="text/javascript">

        $(document).ready(function() {
            $("news-content").jCarouselLite({
              btnPrev: "#nextBTN",
              visible: 1
            })
        });

</script>