How to add a time to pass the slider?

Question

How to add a time to pass the slider?

Navigation

#1 by (1 votes)

0

Hello, I'm new here and also in jquery. And I wanted to know how do I add some time to go from one slide to the next, 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's 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 move from slide1 to slide2 and then to slide3 and do it again with a set time. Thank you in advance.

Excuse me if I put something wrong -.- '

html jquery slider

asked by anonymous 07.06.2015 / 19:26

1 answer

Problem in JVM heap size when migrating from Solr 5.0 to Solr 5.1 Search for database information by selecting a field [closed]

score 1 · Answer 1

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

I created a fiddle to demonstrate (as suggested by @Sergio 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><divid="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 past divs without clicking the button, then I think you want something type this .