We are currently using an image slider for advertising in the homepage. However, we are experiencing problems with the rotation of images within the slider. The slider is now moving from right to left, but after loading the last image, the first image is not coming back from right, but from left first image back and then sliding back. What needs to be modified to implement the slider as if it were still connected to the right?

I used the code below. jquery slide div within a div

[html]

<div class="ads">
 <div class="movable">
  <div id="ss1">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
  <div id="ss2">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
  <div id="ss3">
   <a href="..." target="_blank"><img src="..."></a>
  </div>
 </div>
</div>

[jquery]

$(function() {
$('.ads').each(function() {
    var $gal = $(this),
        $movable = $(".movable", $gal),
        $slides = $(">*", $movable),
        N = $slides.length,
        C = 0,
        itv = null;
    function play() { itv = setInterval(anim, 2000); }
    function stop() { clearInterval(itv); }
    function anim() {
        C = ($(this).is(".prev") ? --C : ++C) < 0 ? N - 1 : C % N;
        $movable.css({ transform: "translateX(-" + (C * 100) + "%)" });
    }
    $(".prev, .next", this).on("click", anim);
    // $gal.hover(stop, play);
    play();
  });
});

[css]

.ads {
 top: auto;
 right: 2%;
 bottom: 3%;
 position: absolute;
 width: 25vw;
 height: 25vw;
 max-width: 400px;
 max-height: 400px;
 z-index: 11;
}

.ads .slide_img {
 position: absolute;
 width: 100%;
 height: 100%;
}

.slide_img img {
 width: 25vw;
 height: 25vw;
 max-width: 500px;
 max-height: 500px;
}

.ads #nav_slide {
 width: 100%;
 bottom: 12%;
 height: 11px;
 position: absolute;
 text-align: center;
 z-index: 98;
 cursor: default;
}

.slide_img {
 z-index: -1;
}

.xbtn {
 position: relative;
 right: 2%;
 bottom: 99%;
 text-align: right;
 color: rgba(255, 255, 255, 0.2);
}

.xbtn p {
 position: relative;
 line-height: 20px;
}

button:focus {
 outline: none;
}

0 Answers