Last updated on May 19th, 2016 at 05:05 pm

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Jquery slideshow script

Jquery is a boon to web developers, we have all the functions built in and just need to call them when required.Here we are going to have a div area slideshow using jquery, we have buttons to control the slide.
For that first and foremost we require the jquery library to get loaded.

<script src="http://demo.mistonline.in/jquery-1.2.3.min.js" type="text/javascript"></script>

After that we have some javascript that needs to be added.

   var SlideWidth = 550;
        var SlideSpeed = 500;

        $(document).ready(function () {
            // set the prev and next buttons display
            SetNavigationDisplay();
        });

        function CurrentMargin() {
            // get current margin of slider
            var currentMargin = $("#slider-wrapper").css("margin-left");

            // first page load, margin will be auto, we need to change this to 0
            if (currentMargin == "auto") {
                currentMargin = 0;
            }

            // return the current margin to the function as an integer
            return parseInt(currentMargin);
        }

        function SetNavigationDisplay() {
            // get current margin
            var currentMargin = CurrentMargin();

            // if current margin is at 0, then we are at the beginning, hide previous
            if (currentMargin == 0) {
                $("#PreviousButton").hide();
            }
            else {
                $("#PreviousButton").show();
            }

            // get wrapper width
            var wrapperWidth = $("#slider-wrapper").width();

            // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
            if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
                $("#NextButton").hide();
            }
            else {
                $("#NextButton").show();
            }
        }

        function NextSlide() {
            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() - SlideWidth;

            // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() });
        }

        function PreviousSlide() {
            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() + SlideWidth;

            // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() });
        } 

Then some very basic styling

#container
{
    width: 550px;
    overflow: hidden;
	border: 1px;
	background-color:#000;
}

/* SET TO THE TOTAL WIDTH OF ALL DIVS */
#slider-wrapper
{
    width: 2200px;
}

/* THESE ARE THE INDIVIDUAL SLIDE PROPERTIES */
.slide
{
    width: 550px;
    height: 200px;
    overflow: hidden;
	border: 1px;
    float: left;
	color:#fff;
}

The last part is the HTML area along with the div tags and also the link to switch between different slides.

<div id="container">
        <!-- OUTTER WRAPPER -->
        <div id="slider-wrapper">
            <!-- SLIDE 1 -->
            <div id="slide1" class="slide">
                <img src="/Uploaded_Images/jquery-sliding-div-1.jpg" alt="Slide 1" style="float: left;
                    margin-right: 20px;" />
                <h2>
                    THIS IS SLIDE 1</h2>
                <p>
                    This is the description that I put for slide one. You can use any html elements
                    or put anything you wish in these containers.
                </p>
            </div>
            <!-- SLIDE 2 -->
            <div id="slide2" class="slide">
                <img src="/Uploaded_Images/jquery-sliding-div-2.jpg" alt="Slide 2" style="float: left;
                    margin-right: 20px;" />
                <h2>
                    THIS IS SLIDE 2</h2>
                <p>
                    This is the description that I put for slide two. You can use any html elements
                    or put anything you wish in these containers.
                </p>
            </div>
            <!-- SLIDE 3 -->
            <div id="slide3" class="slide">
                <img src="/Uploaded_Images/jquery-sliding-div-3.jpg" alt="Slide 3" style="float: left;
                    margin-right: 20px;" />
                <h2>
                    THIS IS SLIDE 3</h2>
                <p>
                    This is the description that I put for slide three. You can use any html elements
                    or put anything you wish in these containers.
                </p>
            </div>
			<div id="slide4" class="slide">
                <img src="/Uploaded_Images/jquery-sliding-div-3.jpg" alt="Slide 4" style="float: left;
                    margin-right: 20px;" />
                <h2>
                    THIS IS SLIDE 4</h2>
                <p>
                    This is the description that I put for slide four. You can use any html elements
                    or put anything you wish in these containers.
            </p></div>
        </div>
    </div>< ?php include('ads.php');?>
    <!--- NAVIGATION BUTTONS -->
	<a href="javascript:void(0)" onclick="NextSlide()" id="NextButton">Next
            Slide</a>
    <a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="margin-right: 10px;">
        Previous Slide</a>

DEMO

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *