How to add time to pass the slider?

Question

Hello, I’m new here and also in jquery. And I wanted to know how to add time to move from one slide to another, here’s the code:

   

    <div id="slide" align="center">
<ul>
<li id="frame"><div></div><div class="text"><a href="#"><h1>Título</h1></a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare neque ante. Duis eget nisl eget lacus gravida laoreet vel id ipsum. Pellentesque consectetur pellentesque nisi at tincidunt. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In lorem neque, lacinia ut leo eget, imperdiet iaculis risus. Cras posuere fringilla arcu, ac auctor tortor varius ut.</p></div></li>

<li id="frame2"><div></div><div class="text2"><a href="#"><h1>Título</h1></a><p>Sed quis nibh ultrices dolor lobortis facilisis sed mattis enim. Proin a arcu elementum, rhoncus enim in, lacinia est. Aliquam erat volutpat. Fusce ut mollis ipsum. Nunc eleifend libero vitae neque vulputate scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut volutpat quis nibh nec elementum.</p></div></li>

<li id="frame3"><div></div><div class="text3"><a href="#"><h1>Título</h1></a><p>Etiam imperdiet felis in cursus tempus. Sed finibus accumsan tellus et porta. Vivamus a pretium neque. Nam eu arcu ac massa hendrerit pharetra vitae ut libero. Nulla posuere vulputate aliquam. Nunc non elit lacus. Mauris vulputate tellus ac ullamcorper cursus. Aliquam ullamcorper velit tempus, tristique ligula id, pellentesque justo. Sed quis vehicula ex, et tristique dui. In eleifend vel dui eget gravida. Aenean vitae egestas risus. Nam vel quam auctor, ultricies tortor eget, sodales purus.</p></div></li>
</ul>

<ul>
<a href="#"><button id="button1"></button></a>
<a href="#"><button id="button2"></button></a>
<a href="#"><button id="button3"></button></a>
</ul>
</div>

And here is the jquery

$(document).ready(function(){
        $("#frame2").hide();
        $("#frame3").hide();



        $( "#button1" ).click(function slide1() {
        $( "#frame" ).show("drop");
        $("#frame2").hide();
        $("#frame3").hide();
            });

        $( "#button2" ).click(function slide2() {
        $( "#frame2" ).show("drop");
        $("#frame").hide();
        $("#frame3").hide();
            });

        $( "#button3" ).click(function slide3() {
        $( "#frame3" ).show("drop");
        $("#frame2").hide();
        $("#frame").hide();
            });

I wanted to know how I can pass slide1 pro slide2 and dai pro slide3 and do again with a set time. Thank you from now.

Sorry if I put something wrong -.-'

Answer 1

In the code you posted you were missing close a block. With the block closing, and changing the show('drop') for fadeIn () you can control the time it will take to appear the div with slow, fast, or in milliseconds.

I created a fiddle to demonstrate (as @Sergio suggested in my question :-)), and to post below the verifiable example. In the example I put 5000 milliseconds, but you can change as you want:

FIDDLE.

$(document).ready(function(){
        $("#frame2").hide();
        $("#frame3").hide();
        });

        $( "#button1" ).click(function slide1() {
        $( "#frame" ).fadeIn(5000);
        $("#frame2").hide();
        $("#frame3").hide();
            });

        $( "#button2" ).click(function slide2() {
        $( "#frame2" ).fadeIn (5000);
        $("#frame").hide();
        $("#frame3").hide();
            });

        $( "#button3" ).click(function slide3() {
        $( "#frame3" ).fadeIn(5000);
        $("#frame2").hide();
        $("#frame").hide();
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide" align="center">
<ul>
<li id="frame"><div></div><div class="text"><a href="#"><h1>Título 1</h1></a><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare neque ante. Duis eget nisl eget lacus gravida laoreet vel id ipsum. Pellentesque consectetur pellentesque nisi at tincidunt. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In lorem neque, lacinia ut leo eget, imperdiet iaculis risus. Cras posuere fringilla arcu, ac auctor tortor varius ut.</p></div></li>

<li id="frame2"><div></div><div class="text2"><a href="#"><h1>Título 2</h1></a><p>Sed quis nibh ultrices dolor lobortis facilisis sed mattis enim. Proin a arcu elementum, rhoncus enim in, lacinia est. Aliquam erat volutpat. Fusce ut mollis ipsum. Nunc eleifend libero vitae neque vulputate scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut volutpat quis nibh nec elementum.</p></div></li>

<li id="frame3"><div></div><div class="text3"><a href="#"><h1>Título 3 </h1></a><p>Etiam imperdiet felis in cursus tempus. Sed finibus accumsan tellus et porta. Vivamus a pretium neque. Nam eu arcu ac massa hendrerit pharetra vitae ut libero. Nulla posuere vulputate aliquam. Nunc non elit lacus. Mauris vulputate tellus ac ullamcorper cursus. Aliquam ullamcorper velit tempus, tristique ligula id, pellentesque justo. Sed quis vehicula ex, et tristique dui. In eleifend vel dui eget gravida. Aenean vitae egestas risus. Nam vel quam auctor, ultricies tortor eget, sodales purus.</p></div></li>
</ul>

<ul>
<a href="#"><button id="button1">título 1</button></a>
<a href="#"><button id="button2">título 2</button></a>
<a href="#"><button id="button3">título 3</button></a>
</ul>
</div>

Now if what you want is to go through the divs without having to press the button, so I think you want something like this.