CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
SamC
SamC

Reputation: 117

Yet Another Image Slider JQuery Issue

I have trying for some time. And I gave a look at the image slider questions already. But I would really appreciate if I get some specific help here. Please tell me where the following code went wrong.

Here's my jQuery code:

function slideMe {
  $('.imgcontainer').animate({"margin-left":"-= 100%"}, 2000, function () {
   if($('.imgcontainer').css("margin-left") == (-300%)) {
     $('.imgcontainer').css("margin-left", "0px");
   }
   slideMe();
  });
}
window.onload = slideMe();

And here's the script on HTML page:

<div class="fitimage">
    <div class="imgcontainer">
     <img src="img/copywrtng.jpg" class="headerimage" alt="copywriting" />
     <img src="img/copywrtng1.jpg" class="headerimage" alt="copywriting" />
     <img src="img/copywrtng2.jpg" class="headerimage" alt="copywriting" />
    </div>
</div>

And here's what I have on CSS:

div.fitimage {
    width:100%;
    height:93vh;
    overflow: hidden;
}
img.headerimage {
    padding: 0;
    margin:0 auto;
    width:100%;
  /*max-height:100%;
    max-width:100%;*/
    height:93vh;
}

My logic is that as each image takes up 100% width, as the ".imgcontainer" div slides left with margin-left: -100%, each image should come up one by one from the right, until it reaches the last one when it reverts to the first image again.

It's not working!

Please help.

Upvotes: 1

Views: 70

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

Your "main" issue is in this line:

$('.imgcontainer').css("margin-left") == (-300 % )
                                       // ^^^^^^^^

beside you can only use string format "-300%", .css("margin-left") will give you a px value which you cannot compare with a non-computed %.

Another issue is that the slides set at 100% - will be the width of their container, which might be actually greater (300% for 3 slides).

Solution:

Instead I'd suggest you to use a c counter that goes like 0,1,2, 0,1... etc.
Than calculate the overflow-wrapper width and animate scrollLeft: width * counter (instead of -marginLeft).

Use display:flex on the parent and min-width:100%; on the child DIV elements (than place your images inside those DIVs instead!)

$(".imgcontainer").each(function(){ // Now you can have multiple independent sliders!

  var $gal = $(this),
      $slides = $gal.children(), // get the slides
      tot = $slides.length, // number of slides
      c = 0; // the counter we mentioned

  (function anim() { // internal animation callback function
    var w = $gal.width();
    c = ++c % tot;   // increment or loop-back counter to 0 
    $gal.delay(2000).animate({scrollLeft: w*c }, 1000, anim); // anim callback !
  }()); // << START!

});
/*QuickReset*/ *{margin:0;box-sizing:border-box;font:14px/1.4 sans-serif;} html,body{height:100%;}


.imgcontainer{
  position:relative;
  height: 93%; /* or whatever you see fit */
  display: flex;
  overflow: hidden;
}

.imgcontainer > div {
  min-width: 100%;
  background: none 50% 50% / cover;
  /* Set background-image inline (see HTML) */
  /* Or use inner images like you did */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="imgcontainer">
  <div style="background-image:url(http://placehold.it/500x340/0bf);">
    Slide 1
  </div>
  <div style="background-image:url(http://placehold.it/500x340/f0b);">
    Slide 2
  </div>
  <div style="background-image:url(http://placehold.it/500x340/b0f);">
    Slide 3
  </div>
</div>

Upvotes: 2

Related Questions