Problem with Javascript button

Question

A while ago I did this question, to know how could add a button to go back and pass a slide. Anyway, I managed to make the buttons, but now I’m having a problem. When clicking the buttons for the first time, in Prev it passes the slide, but gets the content of one subscribing to the other, and in next it only passes if you click twice. What could be wrong?

Ps: The error only happens on the first click as soon as the page loads, being in next or Prev, then works normally.

function simpleSlider(type){
        	var sliderActive = $("#slider .sliderActive");
        		if(type == 'prev') {
        			var sliderPrev   = sliderActive.prev().length ? sliderActive.prev() : $("#slider li:last");
	                    sliderPrev.addClass('sliderActive').fadeIn();
        		} else {
	                    var sliderNext   = sliderActive.next().length ? sliderActive.next() : $("#slider li:first");
	                    sliderNext.addClass('sliderActive').fadeIn();
	                }
	                sliderActive.removeClass('sliderActive').fadeOut();
            }
        $(function(){
            $("#slider li:first").fadeIn();
            
        });

#slider {
    list-style:none;
    width:800px;
    height:700px;
    margin:0 auto;
    padding:0;
    overflow: hidden;
    position: relative;
}
#slider li {
    position: absolute;
    z-index: 0;
    display:none;
}
#slider li.sliderActive {
    z-index: 1;
}

<div class="buttons">
 <a href="javascript:simpleSlider('prev')"><span>prev</span></a>
 <a href="javascript:simpleSlider('next')"><span>next</span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="slider">
    <li><div class="box_inside box_crm">
        <span class="icon_serv_crm"></span>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p class="principal"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
        <p>Maecenas sagittis, lorem non imperdiet faucibus, neque turpis porta velit, ultrices ullamcorper elit tellus in nisl. Maecenas enim felis, sollicitudin convallis tristique at, ultrices quis mauris. Pellentesque et fringilla nunc. Phasellus magna metus, placerat eget tincidunt non, dictum non nisi. </p>    
        <div class="content_btn center" style="width:100%">
            <a href="#" class="btn">Saiba mais</a>        
        </div>
    </div></li>
    <li><div class="box_inside box_landing">
        <span class="icon_serv_land"></span>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p class="principal"><strong>t facilisis et sapien a auctor. Cras in iaculis eros, ac tincidunt mi. Aenean auctor ultricies dolor, sed dictum lectus iaculis sed. Nullam lobortis</strong></p>
        <p>t facilisis et sapien a auctor. Cras in iaculis eros, ac tincidunt mi. Aenean auctor ultricies dolor, sed dictum lectus iaculis sed. Nullam lobortis</p>    
        <div class="content_btn center" style="width:100%">
            <a href="http://localhost/" class="btn">Saiba mais</a>        
        </div>
    </div></li>
</ul>

The error can be played in the above snippet.

Answer 1

The problem is that when loading the page, no element in the list is in the class sliderActive and, as the slider logic works through this class, this problem occurs the first time, because in the others it adds the class in the new active element.

I just added that class to the first li.

function simpleSlider(type){
        	var sliderActive = $("#slider .sliderActive");
        		if(type == 'prev') {
        			var sliderPrev   = sliderActive.prev().length ? sliderActive.prev() : $("#slider li:last");
	                    sliderPrev.addClass('sliderActive').fadeIn();
        		} else {
	                    var sliderNext   = sliderActive.next().length ? sliderActive.next() : $("#slider li:first");
	                    sliderNext.addClass('sliderActive').fadeIn();
	                }
	                sliderActive.removeClass('sliderActive').fadeOut();
            }
        $(function(){
            $("#slider li:first").fadeIn();
            
        });

#slider {
    list-style:none;
    width:800px;
    height:700px;
    margin:0 auto;
    padding:0;
    overflow: hidden;
    position: relative;
}
#slider li {
    position: absolute;
    z-index: 0;
    display:none;
}
#slider li.sliderActive {
    z-index: 1;
}

<div class="buttons">
 <a href="javascript:simpleSlider('prev')"><span>prev</span></a>
 <a href="javascript:simpleSlider('next')"><span>next</span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul id="slider">
    <li class="sliderActive"><div class="box_inside box_crm">
        <span class="icon_serv_crm"></span>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p class="principal"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
        <p>Maecenas sagittis, lorem non imperdiet faucibus, neque turpis porta velit, ultrices ullamcorper elit tellus in nisl. Maecenas enim felis, sollicitudin convallis tristique at, ultrices quis mauris. Pellentesque et fringilla nunc. Phasellus magna metus, placerat eget tincidunt non, dictum non nisi. </p>    
        <div class="content_btn center" style="width:100%">
            <a href="#" class="btn">Saiba mais</a>        
        </div>
    </div></li>
    <li><div class="box_inside box_landing">
        <span class="icon_serv_land"></span>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p class="principal"><strong>t facilisis et sapien a auctor. Cras in iaculis eros, ac tincidunt mi. Aenean auctor ultricies dolor, sed dictum lectus iaculis sed. Nullam lobortis</strong></p>
        <p>t facilisis et sapien a auctor. Cras in iaculis eros, ac tincidunt mi. Aenean auctor ultricies dolor, sed dictum lectus iaculis sed. Nullam lobortis</p>    
        <div class="content_btn center" style="width:100%">
            <a href="http://localhost/" class="btn">Saiba mais</a>        
        </div>
    </div></li>
</ul>