0

Bom, fiz um slider e está funcionando. Mas ele avança automaticamente, então quero saber como posso adicionar um botão para passar e para voltar ao slide anterior.

function simpleSlider(){
	var sliderActive = $("#slider .sliderActive");
	var sliderNext   = sliderActive.next().length ? sliderActive.next() : $("#slider li:first");
	sliderNext.addClass('sliderActive').fadeIn();
	sliderActive.removeClass('sliderActive').fadeOut();
}
$(function(){
	$("#slider li:first").fadeIn();
	setInterval("simpleSlider()", 3000);
});
#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;
}
<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>

2
  • você pode adicionar o HTML final, o que é renderizado pelo seu código PHP? Commented 12/05/2015 às 13:56
  • @Sanção editei a pergunta
    – GWER
    Commented 12/05/2015 às 14:07

1 Resposta 1

0

Resolvi da seguinte maneira:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .