CODEWITHSUNDEEP
javascriptjquery
oss
oss

Reputation: 11

How to slide images to the left using jquery

I tried sliding two images from right to left. The slide is working but only displaying the first image. Please what's the cause? This is my code:

<script type="text/javascript">
  var n=0;
  var nmax=2;
  function timer()
  {
    window.setInterval(function ()
    {
      n+=1;
      if(n>nmax)
      {
        n=0;
        $('#slideImage').css('left','0');
      }

      $('#slideImage').css('left',(n)*(1366)*(-1)+'px');
    },2500);
  }
    $(document).ready(function(e) {
        timer();
    });
</script>

css

.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto; 
margin-left: auto; position: relative; display: inline-table; 
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s; 
-webkit-transition: linear 0.75s 0.2s; }

and here is html

<div class="w_n"> 
<div class="w_n2" id="slideImage"> 
<div class="hd_p"> 
<img name="shift" src="image/bn2.jpg" class="wn_p" /> 
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div> 
</div> 
<img name="shift" src="image/bn3.jpg" class="wn_p" />
 </div> 
</div>

Upvotes: 1

Views: 1908

Answers (4)

Vedant Terkar
Vedant Terkar

Reputation: 4682

use:

<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
  var n=0,switcher=1; // Note change 
  var nmax=2;
  function timer()
  {
    window.setInterval(function ()
    {
    if(switcher){ // Note change 
      n+=1;
    }
    else{ // Note change 
    n--; // Note change 
    } // Note change 
      if(n>=nmax) // Note change 
      {
       switcher=0; // Note change 
      }
      if(n<=0) // Note change 
     {
     switcher=1; // Note change 
     }

      $('#slideImage').animate({left:''+(n)*(1366)*(-1)+'px'},500); // Note change 
    },2500);
  }
    $(document).ready(function(e) {
        timer();
    });
</script>
<style type="text/css">
.des_p{height: 400px; width: 1366px;float: left; }
.wn_p { height: 400px; width: 1366px; float: left; }
.w_n { height: 400px; width: 100%; overflow: hidden; background-color: #09C; }
.w_n2 { height: 400px; width: 2732px; margin-right: auto; 
margin-left: auto; position: relative; display: inline-table; 
transition: linear 0.75s 0.2s; -moz-transition: linear 0.75s 0.2s; 
-webkit-transition: linear 0.75s 0.2s; } 
</style>
</head>
<body>
<div class="w_n"> 
<div class="w_n2" id="slideImage"> 
<div class="hd_p"> 
<img name="shift" src="image/bn2.jpg" class="wn_p" /> 
<div class="des_p">The company maintains high quality standard in all its operations. With high production capacity, the policy thrust is to continue to provide cost-effective, affordable, local alternatives of life saving drugs to the teaming population.
</div> 
</div> 
<img name="shift" src="image/bn3.jpg" class="wn_p" style="position:absolute; top:0px; left:2732px;" /><!-- Note change -->
 </div> 
</div>
</body>
</html>

actually problem was not in your js but it was in your css due to low height overflow was hidden..

i fixed that by using positioning of element in css..

according to your last comment i've updated answer for sliding images in both direction.

please pay attention in the lines marked by Note change at end. hope it'll help you. cheers !!

Upvotes: 1

MildlySerious
MildlySerious

Reputation: 9170

If you use jQuery anyway, why not use its animate function?

$(document).ready(function(e) {
    $('.wn_p').animate({left: '-200px'}, {duration: 2500});
});

You can set a lot of options, so if you show some html and elaborate on your needs, we could better match the result you're expecting.

The fact only one image is shown could be a CSS thing. You're using an ID, but should use a class if there's more than one image.

Edit: I changed the selector to the class you added. You propably figured that out by now, but it should work this way.

Upvotes: 2

saman khademi
saman khademi

Reputation: 842

try it

$(document).ready(function() {
  $('#slideImage').animate({left: '-200px'},2500);
});

Upvotes: 0

James
James

Reputation: 71

For lots of cycle image effects it might be worthwhile checking out this jQuery Cycle Plugin: http://jquery.malsup.com/cycle2/

THis is a basic pager that might be of interest to start you off: http://jquery.malsup.com/cycle2/demo/pager.php

Here are lots of demos that might help: http://jquery.malsup.com/cycle2/demo/

Upvotes: 1

Related Questions