How to achieve slide effect with background image position change on-click of buttons

Question

Hi there,

I am making a div in which I have to show some piece of information with image and text.I have to slide background image position on click of button, so that it look like sliding and text on "p tag" also changes with it And in the end, only finish button shows up.

check this link

.slide_img{ background: url('img/modal_window/1.jpg') no-repeat center center;width: 99.8%;height: 160px;border: 1px solid #cccccc;}
 <div class="info_div">
    <div class="slide_img"></div>
    <p>Change the text with slider image changes</p>
    <div class="clearfix"></div>
</div>
<footer>
    <input type="button" value="Finish" />
    <input type="button" value="Next"  />
    <input type="button" value="Previous" />
</footer>

Answer 1

EDIT: In response to...

actually i wanted it to done by javascript

There are many jQuery (javascript) image sliders out there that would do this for you that are pretty easy to set up and have great documentation. For example, I like using Nivo Slider . If you want to take the time, building one yourself in jQuery doesn't require much javascript background to understand what's happening.

Answer 2

Here is your DEMO

Here is code snippet of Jquery to make it work.. notice i have used random images for demo. you can use yours :)

$(document).ready(function () {

    var images = [{
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/02_Place_Piorkowski.jpg","Text": "text 1 for slide"
    }, {
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/03_Place_Burnette.jpg", "Text": "text 2 for slide"
    }, {
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/04_Place_21756_1_Williamson.jpg","Text": "text 3 for slide"
    }, {
        "image": "http://cdn.arstechnica.net/wp-content/uploads/2012/10/09_Place_22047_3_Drange.jpg", "Text": "text 4 for slide"
    }];

    $(".slide_img").data("imageShown", 0);
    $(".slide_img").css("background-image", "url(" + images[0].image + ")");
    $("p.df").html(images[0].Text);
    $("input[value='Finish']").click(function () {
        $(".slide_img").hide();
        $("p.df").hide();
    });
    $("input[value='Next']").click(function () {
        var id = $(".slide_img").data("imageShown");
        if (id == (images.length - 1)) {
            return;
        }
        id = id + 1;
        $(".slide_img").data("imageShown", id);
        $(".slide_img").css("background-image", "url(" + images[id].image + ")");
        $("p.df").html(images[id].Text);

    });
    $("input[value='Previous']").click(function () {
        var id = $(".slide_img").data("imageShown");
        if (id == 0) {
            return;
        }
        id = id - 1;
        $(".slide_img").data("imageShown", id);
        $(".slide_img").css("background-image", "url(" + images[id].image + ")");
        $("p.df").html(images[id].Text);
    });

});