Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
Like Tree1Likes
  • 1 Post By mlseim

Thread: Image Slider - Help

  1. #1
    Junior Member
    Join Date
    May 2017
    Posts
    3
    Member #
    56584

    Image Slider - Help

    Hi, i'm trying to get my image slider to work. the first image loads, followed by the second, but the rest don't. I have tried over and over and can't seem to find my mistake. Any suggestions would be so helpful.

    Thanks so much.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript">

    function Slider(){
    $(".slider #1").show("fade",500)
    $(".slider #1").delay(1500).hide("slide",{direction:'left'},5 00);

    var sc=$(".slider img").size();
    var count=2;

    setInterval(function(){
    $(".slider#"+count).show("slide",{direction:'right '},500);
    $(".slider#"+count).delay(5500).hide("slide",{dire ction:'left'},500);

    if(count==sc){
    count=1;
    }else{
    count=count+1;
    }
    },1500);


    }


    <body onload="Slider();">

    <div class="slider">
    <img id="1" src="http://www.webdesignforums.net/forum/image-slide1.jpg" alt="" width="960" height="640" border="0">
    <img id="2" src="http://www.webdesignforums.net/forum/image1 (26).jpg" alt="" width="1106" height="739" border="0">
    <img id="3" src="http://www.webdesignforums.net/forum/image-slider3.jpg" alt="" width="890" height="593" border="0">
    </div>

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    var count=2. ... Change it to 3
    reuvergr likes this.


  4. #3
    Junior Member
    Join Date
    May 2017
    Posts
    3
    Member #
    56584
    Quote Originally Posted by mlseim View Post
    var count=2. ... Change it to 3
    Thanks for your help, tried that, sadly still wont load third image

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    There must be more to your script than you are showing us?

    It won't work the way you posted it.

    Post the whole thing ... the script that is showing you 2 images.


  6. #5
    Junior Member
    Join Date
    May 2017
    Posts
    3
    Member #
    56584
    Thank you for all your help. I found and alternate method.

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The problem is coming in where the completely pointless .size() method of jQuery was deprecated in version 1.8 and completely removed in version 3. var sc=$(".slider img").size(); is returning null. Since you set count to equal 2, the loop never returns to 1, since count === null will never be true.

    Why jQuery ever had that method, I'll never know. It's a common pattern in programming to have "getters" and "setters" that interact with your properties, but that's only useful when the property is private. Since .length is part of the prototype for iterable variables, it doesn't make any sense to have it. I'm sure that's probably why they deprecated it.
    Last edited by Ronald Roe; May 14th, 2017 at 08:49 PM.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com