Pasar de un li a otro

[manelmanel8]

El motivo no entiendo porque no funciona.

Código HTML:

<section class="content">
        <div class="general-cosas">
        <p class="label">Características</p>
        <h3>Hola</h3>
        <p>universal</p>
            <article class="cosas">
                <ul class="systems">
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/> 
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">1<br>Cuadro</h2>
                                    </div>
                                </figcaption>
 
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>    
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                             
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">2<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>   
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                                 
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">3<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>   
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                                 
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">4<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>  
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>                                 
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">5<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <div>
                              <img src="images/li1.jpg" height="285px"/>    
                                <a href="#" class="readmoreBtn"><i class="fa fa-plus-square-o fa-4x"></i></a>   
                                <figcaption>
                                    <div class="title-box">
                                        <h2 class="overtext">6<br>Cuadro</h2>
                                    </div>
                                </figcaption>
                            </div>
                        </figure>
                    </li>
                </ul>
            </article>
            <article class="systems-gallery">
                <span class="close-systems-container"><i class="fa fa-close fa-3x"></i></span>
                <div class="systems-container">
                    <label class="leftBtn"><i class="fa fa-angle-left fa-4x"></i></label>
                    <ul>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 1</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 2</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 3</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 4</h3>
                            </div>
                        </li>   
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 5</h3>
                            </div>
                        </li>
                        <li>
                            <div class="info">
                                <h3>Nuevo cuadro 6</h3>
                            </div>
                        </li>                           
                    </ul>
                    <label class="rightBtn"><i class="fa fa-angle-right fa-4x"></i></label>                    
                </div>
            </article>
        </div>
    </section>
 

Código Javascript:

var position;
 
$(".systems-gallery").hide();       
        $(".cosas li").click(function() {
            position = $(this).index();
            $(".cosas").hide(); 
            $(".systems-gallery").show();
            $(".systems-gallery li").hide();
            $(".systems-gallery li:eq("+ position +")").show(); 
            $(".systems-gallery li:eq("+ position +")").addClass("focus");          
        }); 
                    
        $(".close-systems-container").click(function() {
            $(".systems-gallery").hide();   
            $(".cosas").show();            
        }); 
        
        $(".rightBtn").click(function() {
            var actual = $("li.focus"),
            sig = actual.next().is("li") ? actual.next() : $("li").first();
            actual.removeClass("focus");
            actual.hide();
            sig.addClass("focus");      
            sig.show();         
        });