Remove From My Forums

Add button to slider

Question

User810354248 posted

I was trying make a image slider for my web without any internet links embedded in the page as it is to be used in LAN.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="slider.aspx.vb" Inherits="slider" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var currentPosition = 0;
        var slideWidth = 900;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        setInterval(changePosition, 3000);
        slides.wrapAll('<div id="slidesHolder"></div>');
        slides.css({ 'float': 'left' });
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);
        function changePosition() {
            if (currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
            }
            else {
                currentPosition++;
            }
            moveSlide();
        }
        function moveSlide() {
            $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
        }
    });
</script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:900px;
height:557px;
margin:0;
padding:0;
;
overflow:hidden;
}
#slideshow #slideshowWindow .slide
{
margin:0;
padding:0;
width:900px;
height:557px;
float:left;
;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"><b>Welcome to Aspdotnet-Suresh.com SlideShow Image1</b> <img src="image/1.jpg" /> </div>
<div class="slide"><b>Welcome to Aspdotnet-Suresh.com SlideShow Image2</b><img src="image/2.jpg"/> </div>
<div class="slide"><b>Aspdotnet-Suresh.com SlideShow Image3</b><img src="image/3.jpg" /> </div>
</div>
</body>
</html>

The above code disply's imges and slides automatically

I want to add next and previous button / arrow in the above code

Thursday, September 29, 2016 5:19 PM

Answers

User-707554951 posted

Hi Baiju EP,
Based on your needs, I make an example, you could refer to the code below:

 <script src="../scripts/jquery-3.1.0.js"></script>
<script type="text/javascript">
    $(function () {
        var currentPosition = 0;
        var slideWidth = 900;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        setInterval(changePosition, 3000);
        slides.wrapAll('<div id="slidesHolder"></div>');
        slides.css({ 'float': 'left' });
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);
        function changePosition() {
            if (currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
            }
            else {
                currentPosition++;
            }
            moveSlide();
        }
        function moveSlide() {
            $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
        }
    });       
    $(document).ready(function () {
        $("#Button1").click(function () {
            var ol = $('#slidesHolder').css("margin-Left");
            var iol = ol.split('p');
            var e = iol[0];
            var x = parseInt(e);

            if (x == "-1800") {
                $('#slidesHolder').css({ "margin-Left": "0px" });
            }
            else {

                var changemargin = x - 900;
                $('#slidesHolder').css({ "margin-Left": changemargin });
            }

            return false;
        });
            $("#Button2").click(function () {

                var ol = $('#slidesHolder').css("margin-Left");
                var iol = ol.split('p');
                var e = iol[0];
                var x = parseInt(e);
                if (e == "0") {

                    $('#slidesHolder').css({ "margin-Left": "-1800px" });
                }
                else {
                    var interval = 900;
                    var changemargin = x + interval;                  
                    $('#slidesHolder').css({ "margin-Left": changemargin });
                }

                return false;
            });

        });          
</script>
<style type="text/css">
    #slideshow #slideshowWindow
{
width:900px;
height:237px;
margin:0;
padding:0;
;
overflow:hidden;
        top: 0px;
        left: 0px;
    }
#slideshow #slideshowWindow .slide
{
margin:0;
padding:0;
width:900px;
height:557px;
float:left;
;
}
</style>

<div id="slideshow">
       
<div id="slideshowWindow">
<div class="slide"><b>Welcome to Aspdotnet-Suresh.com SlideShow Image1</b>  <img src="../Images/th12DRGV2B.jpg" /> </div>
<div class="slide"><b>Welcome to Aspdotnet-Suresh.com SlideShow Image2</b><img src="../Images/th3DBJ0460.jpg" /></div>
<div class="slide"><b>Aspdotnet-Suresh.com SlideShow Image3</b> <img src="../Images/thRDEN6S85.jpg" /> </div>
</div>

</div>  
        <asp:Button ID="Button1" runat="server" Text="Next" Height="26px" />
        <asp:Button ID="Button2" runat="server" Text="previous" Height="26px"   />

Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know.
Best regards
Cathy

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, September 30, 2016 10:11 AM

All replies