SearchForKnowledge SearchForKnowledge - 2 months ago 8
Javascript Question

How to make a carousel not shake while scrolling and pause on hover

The issue is every time

AnimateCarousel()
is called, the images jumps to the right a little in the slider before continuing. How can I prevent it?

Also, how can I pause on mouse over and continue on mouse out?

Here is my code:



$(document).ready(function() {
AnimateCarousel();
});

function AnimateCarousel() {
console.log("test");
var SD = 210;
//var $carousel = $(that).parent();
var $ul = $(".carousel").children('ul');
var distance = SD;
var time = 5500;
var rate = distance / time;

distance = Math.abs($ul.position().left);
console.log(distance + " distance");
if (distance != 0) {
distance = SD - distance;

time = distance / rate;
}
$ul.stop().animate({
left: -210
}, time, 'linear', function() {
$ul.append($ul.children('li:first-child'));
$ul.css({
left: 0
});
AnimateCarousel();
});
}

* {
padding: 0;
margin: 0;
}

.carousel {
position: relative;
width: 100%;
overflow: hidden;
height: 200px;
}

.carousel ul {
display: block;
list-style: none;
white-space: nowrap;
position: absolute;
left: 0;
padding: 0;
margin: 0;
}

.tst1 {
color: #FFF;
opacity: 0;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}

.carousel li {
display: inline-block;
position: relative;
}

.carousel li:hover > div {
opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<ul>
<li><img src="http://fakeimg.pl/200x200" alt="" />
<div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
View Profile
</div>
</li>
<li><img src="http://fakeimg.pl/200x200" alt="" />
<div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
View Profile
</div>
</li>
<li><img src="http://fakeimg.pl/200x200" alt="" />
<div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
View Profile
</div>
</li>
<li><img src="http://fakeimg.pl/200x200" alt="" />
<div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
View Profile
</div>
</li>

<li><img src="http://fakeimg.pl/200x200" alt="" />
<div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
View Profile
</div>
</li>
<li><img src="http://fakeimg.pl/200x200" alt="" />
<div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
View Profile
</div>
</li>

</ul>
</div>




Answer

Because the default margin between li is 4px I added this to the .carousel li { in the css so that anytime the first li is appended to the end this margin is respected.

Added: pause on mouse over and continue on mouse out.

The snippet:

$(document).ready(function(){
  AnimateCarousel();

  $(".carousel ul").hover(function(e) {
    $(this).addClass('stop-animation');
    $(this).stop(false, false);
  }, function(e) {
    $(this).removeClass('stop-animation');
    AnimateCarousel();
  });
});

function AnimateCarousel(){
  var $ul = $(".carousel").children('ul');
  var time = 1500;
  $ul.animate({
    left: -210
  }, time, 'linear', function(){
    $ul.append($ul.children('li:first-child'));
    $ul.css({left: 0});
    if (!$ul.is('.stop-animation')) {
      AnimateCarousel();
    }
  });
}
* {
  padding: 0;
  margin: 0;
}
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 200px;
}

.carousel ul {
  display: block;
  list-style: none;
  white-space: nowrap;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
}

.tst1 {
  color: #FFF;
  opacity: 0;
  -webkit-transition: all 5000ms ease;
  -moz-transition: all 5000ms ease;
  -ms-transition: all 5000ms ease;
  -o-transition: all 5000ms ease;
  transition: all 5000ms ease;
}

.carousel li {
  display: inline-block;
  position: relative;
  margin-left: 4px;  /*   row added  */
}

.carousel li:hover > div {
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="carousel">
    <ul>
        <li><img src="http://piq.codeus.net/static/media/userpics/piq_66223.png" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="http://www.shinyshiny.tv/asus-android-smartphone-thumb-200x200.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="https://upload.wikimedia.org/wikipedia/en/4/4b/Little_island_colour_logo_200x200.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>

        <li><img src="http://s1.dmcdn.net/CZC2w/200x200-qyf.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>
        <li><img src="http://s1.dmcdn.net/DngOt/200x200-nZB.jpg" alt="" />
            <div class="tst1" style="position: absolute; width: 100%; height: 30px; bottom: 0; background: rgba(0, 0, 0, 0.5);">
                View Profile
            </div></li>

    </ul>
</div>

Comments