I created a jQuery slideshow but it keeps repeating the same image


Tags: javascript,jquery,html,css

Problem :

as you can see in the code provided below, I have created a simple jQuery slideshow that runs automatically. But I have ran into a little problem that I cant seem to figure out. When the slideshow runs it goes perfectly, but once it gets to the last image then it just keeps on repeating! How can I prevent this from happening?? The code is below and there is also a link to the images. THANKS!:) P.S- I'm using older jQuery versions because of deprecated functions!

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Home
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
    <script src="jquery-ui-1.8.18.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
  </head>
  <body class="body" onload="Slider()">
    <div class="container">
      <div class="bg">
        <div class="mainHeader">
          <nav>
            <ul>
              <li class="last"><a href="#">Contact</a></li>
              <li><a href="#">Products</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#" class="active">Home</a></li>
            </ul>
          </nav>
        </div>
        <div class="topArea">
          <div class="topAInfo">
            <h2>Here is just a simple title</h2>
            <p>This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.</p>
          </div>
        </div>
        <div class="middleArea">
          <div class="slider">
            <img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
            <img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px"> 
            <img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
          </div>
          <div class="middleAInfo">
            <h3>Welcome to</h3>
            <p>A dummy website!!</p>
          </div>
          <div class="latestNews">
            <hr>
            <h2>Latest News</h2>
            <div class="post">
              <p class="date">March 28, 2015</p>
              <p>New advanced update with double speed and a whole bunch of cool new st.. <a href="#">more&gt;&gt;</a></p>
            </div>
            <div class="post">
              <p class="date">March 28, 2015</p>
              <p>New advanced update with double speed and a whole bunch of cool new st.. <a href="#">more&gt;&gt;</a></p>
            </div>
            <div class="newsLetter">
              <div class="newsLInfo">
                <h3>Newsletter sign-up</h3>
                <hr>
                <p>If you would like to sign up for our free NewsLetter please enter your email below</p>
                <a href="#">Unsubscribe</a>
              </div>
              <input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
              <div class="button1">Submit</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--https://www.freelancer.com/jobs/php/PSD-HTML-page-only-page/-->
  </body>
</html>

CSS:

*{margin:0;padding:0;}
@font-face {
    font-family: SketchFont;
    src: url(Fonts/Sketch_Block.ttf);
}
body{
    background:#ebebeb;
    width:80%;
    height:1300px;
}
.container{
    width:100%;
}
.mainHeader nav{
    width:95%;
    height:40px;
    position:relative;
    left:30px;
    top:60px;
    background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
    /*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{

}
.mainHeader nav ul li{
    float:right;
    display:inline;
    text-align:center;
    border:1px solid #ADADA8;
    border-bottom:none;
    border-top:none;
    border-left:none;
    padding-top:20px;
}
.mainHeader nav ul li.last{
    border-right:none;
}
.mainHeader nav ul li a{
    text-decoration:none;
    /*margin:10px Use to replace paddings right/left but causes hovedr errors*/
    font-family:Arial;
    position:relative;
    top:-10px;
    color:white;
    padding:10px;
    padding-right:20px;
    padding-left:20px;
}
.mainHeader nav ul li a.active{
    background:white;
    color:black;
}
.mainHeader nav ul li a:hover{
    background:white;
    color:black;
}
.topArea{
    width:95%;
    height:300px;
    position:relative;
    left:30px;
    top:10px;
    /*margin: -50px 50px 0 150px;*/
    background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
    margin:20px;
    padding-top:60px;
    width:60%;
    margin:50px;
    font-family:;
}
.topArea .topAInfo h2{
    font-family:SketchFont;
    font-weight: normal;
}
.topArea .topAInfo p{
    line-height:25px;
    font-family:cursive;
    font-size:15px;
}
.bg{
    width:100%;
    height:1200px;
    position:relative;
    left:10%;
    background:linear-gradient(blue, white, white, blue); /* Standard syntax */
    /*background-image:url(bg2.jpg);*/
    background-repeat: no-repeat;
}
.middleArea{
    background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
    height:600px;
    width:95%;
    position:relative;
    left:30px;
    top:10px;
}
.middleArea .middleAInfo {
    padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
    color:#49CBF0;
    font-size:30px;
    font-weight:400;
}
.middleArea .latestNews {
    width:250px;
    height:300px;
    background:#0099cc;
    float:right;
    position:relative;
    top:-60px;
    border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
    position:relative;
    top:50px;
    color:black;
    width:90%;
    margin-left:10px;
}
.middleArea .latestNews h2{
    padding:10px 10px 10px 10px;
    color:white;
}
.middleArea .latestNews p.date{
    color:white;
    font-size:13px;
    font-weight:bold;
    padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
    color:white;
    font-size:13px;
    position:relative;
    left:10px;
    width:225px;
}
.middleArea .latestNews a{
    color:blue;
    font-size:15px;
    font-family:Arial;
}
.middleArea .latestNews .newsLetter{
    background:white;
    width:250px;
    height:200px;
    position:relative;
    top:80px;
    border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
    position:relative;
    top:40px;
    left:25px;
}
.middleArea .latestNews .newsLetter .button1{
    width:50px;
    height:25px;
    background:#1768ED;
    padding:3px 10px 2px 10px;
    border-radius:7px;
    text-align:center;
    color:white;
    font-family:Arial;
    position:relative;
    top:45px;
    left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
    cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
    position:relative;
    top:15px;
    left:10px;
    color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
    position:relative;
    top:20px;
    color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
    color:black;
    position:relative;
    top:40px;
    color:#21AFEA;
    font-size:15px;
}
.middleArea .latestNews .newsLetter a{
    position:relative;
    top:90px;
    left:30px;
}
.slider{
    width:800px;
    height:350px;
    overflow:hidden;
    margin:30px auto;
    background-image:url(loading.gif);
    background-repeat:no-repeat;
    background-position:center;
    background-size: 100px 100px;
}
.slider img{
    display:none;
}

Javascript:

function Slider(){
    $(".slider #1").show("fade", 500);
    $(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
    var sc = 3;
    var count = 2;

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

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

Images: https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0



Solution :

Hello you mistake was in the if-statement.

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

You wrote

count == 1;

instead of

count = 1;

Common mistake, made it a lot by myself. Hard to track.

This is how your script should look like:

function Slider(){
    $(".slider #1").show("fade", 100);
    $(".slider #1").delay(1000).hide("slide", {direction:'left'}, 100);
    sc = 3;
    count = 2;

    setInterval(function(){

        $(".slider #"+count).show("slide", {direction:'right'}, 100);
        $(".slider #"+count).delay(1000).hide("slide", {direction:'left'},    100);

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

You should start to use you console (nearly all modern browser have one, enable it by pressing F12 (FireFox/Chrome))


    CSS Howto..

    How are these websites full-screened in the browser with a learn more button at the bottom (moves you into automatically down the page) [closed]

    How to remove or reset CSS style using JS?

    CSS: how to select parent's sibling [duplicate]

    How can I center a CSS background image as if the image had a different width (without cutting the bgimg off)?

    How to set content area div height with dynamic header div

    how to print no blur content over a blurred div

    How to use SASS logic within a CSS 3 media query [duplicate]

    How to style a GWT CaptionPanel?

    How to do the Height of html tag Body on 100% of browser window size?

    How can i make div shape like this with css? [duplicate]

    How to edit a pseudo element on focus using css or jQuery

    How should I use `position` and other properties correctly to position my web page?

    How to customize HTML/CSS tooltips?

    How can I Resize & Enlarge an Image (like sprite icons) via CSS 3?

    How to center text over an image while keeping it below fixed nav bar in css?

    How to get the min-height of the object when its parent is set to display none?

    How to write many functions in one JS function

    How to set auto width for the fixed child div, when parent div change width?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How to wrap long lines without spaces in HTML?

    How to change header and footer to full width

    How to display text on the same line?

    how to show element if visible in view-port with jQuery? (UPDATE)

    jQuery: How to change the size of a css block?

    How to detect which button is clicked in javascript?

    How to recalculate css vw and vh values after resizing?

    css code how to remove space between div class

    How to disable IE11 WebBrowser control scaling

    How to set the CSS class name dynamically in LessCSS?

    How to rotate background in CSS?