Putting Forward and Return Control on Slide Show

Asked

Viewed 449 times

4

I would like to know how I can change the Slide Show script below so that it works with two action controls called Next and Previous and I need the Slide only change the text if the user click one of the buttons to make the Slide Show change.

Jquery

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('div').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

HTML

<div id="slideshow">
    <div class="slideshow-element">Test 1</div>
    <div class="slideshow-element">Test 2</div>
    <div class="slideshow-element">Test 3</div>
    <div class="slideshow-element">Test 4</div>
</div>

CSS

.slideshow-element{
    position: absolute;
}

Demo of the Working Script

jquery html css
  • 1

    You tried something ?

  • I still don’t know much about Jquery and JS.

  • To implement the buttons I believe it is necessary a considerable change.

  • You don’t want more automatic transition, just the buttons, that’s it ?

  • Yes ta great game that got automatic transition would weigh heavily the site.

2 answers

5


I made some simple adjustments for the slideshow to work only with the buttons next and Prev, and no longer with automatic transitions:

$(function() {
    var $slideshow = $("#slideshow div:first").addClass("visible").fadeIn(2000);

    $("#prev").on("click", function()
    {
        var $visible = $("#slideshow .visible");
        var $prev = $visible.prev();

        if ($prev.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
                $prev.addClass("visible").fadeIn(2000);
            });
        }
    });

    $("#next").on("click", function()
    {
        var $visible = $("#slideshow .visible");
        var $next = $visible.next();

        if ($next.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
                $next.addClass("visible").fadeIn(2000);
            });
        }
    });
});

I created a class fake calling for visible to control which element is visible at the time of the change. This class is assigned to the first element at the start, as well as the display (fadeIn) of the same.

The functions next and previous are similar. First is found the current slide $("#slideshow .visible") and then the next or previous element is found, depending on the user’s action, e.g.. var $prev = $visible.prev();. If element was found if ($prev.length > 0), the transition is made:

$visible.removeClass("visible").fadeOut(2000, function() {
    $prev.addClass("visible").fadeIn(2000);
});

Fiddle

  • Thanks for your help.

  • @Rodrigo quiet! It was clear the explanation?

  • Yes I understood perfectly.

3

Good afternoon, Here I leave a much simpler solution.

Javascript/jQuery:

jQuery(document).ready(function(){ 
    $(function(){
        $('#slideshow h4:gt(0)').hide();
        setInterval(function(){
          $('#slideshow :first-child').fadeOut(2000)
             .next('div').fadeIn(2000)
             .end().appendTo('#slideshow');}, 
          2000);
    });
});

CSS:

.slideshow-element{
    position: absolute;
    display: none;
}

HTML: 

 <div id="slideshow">
        <div class="slideshow-element">Test 1</div>
        <div class="slideshow-element">Test 2</div>
        <div class="slideshow-element">Test 3</div>
        <div class="slideshow-element">Test 4</div>
    </div>

This solution is quite easy since I only corrected yours. I hope I’m helping, best wishes.

  • But he wants the slideshow to have forward/back buttons and the content to be changed in the face of user interaction with these buttons.

  • you are absolutely right. I don’t understand. in case it is necessary to change the code the author who tells me that I help :)

Browser other questions tagged jquery html css

You are not signed in. Login or sign up in order to post.