Speed up development with full-stack environments for every branch.

Learn More

Adding a slide effect to an image using jQuery UI

Forked from How to use the jQuery UI Slider.

8230 Runs 21625 Views 6176 Copies


pg1 45

published 4 years ago

<!doctype html>

    <title>Adding a slide effect to an image using jQuery UI</title>
            text-align: center;
            padding:5px 10px;
            font-weight: bold;
            padding:5px 10px;           
            position: relative;
            margin:0 auto;

            position: absolute;



    <input type="button" class="slide-left" value="&laquo; Slide Left" /> 
    <input type="button" class="slide-center" value="Center"> 
    <input type="button" class="slide-right" value="Slide Right &raquo;"> 
    <!-- we create a wrapper for the image so it can move in left and right -->
    <div class="image-wrap">
        <!-- image  position is absoulte --> 
        <img src="1.jpg" alt="photo1" class="image" />

        We use Google's CDN to serve the jQuery js libs. 
        To speed up the page load we put these scripts at the bottom of the page 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        //DOM loaded 
        $(document).ready(function() {
            //attach click event to slide buttons
                //animate image position left
                    left: 0
                }, 500);


                //animate image position to center
                //our image is 600px and frame is 900px
                //900-600=300 and 300/2=150
                //so we set image left to 150px
                    left: 150
                }, 500);

                //animate image position right
                    left: 300
                }, 500);


Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).