All geek questions in one place

Javascript slider does not work correctly with transition completion

I do not know why people do not answer this question. I create a horizontal endless loop loop. Which approach I use creates a containerulwhich has 3 images, for example, if there are 3 images, then clones the first image and puts it at the end of the slider, the same with the last image makes a clone and places it in front of the first image. Thus, now the total number of images is 5. By default, the slider shift always starts from the first image, and not from the clone. Here is an example. I come across this, I want to reset the slider after the slider reaches the last image of the clone with the same continuous cycle as the carousel slider. I am trying to use addEventListener with the name of the event, but this event does not work correctly and exhibits unsatisfied behavior. Is there any way to fix this?

(function () {
    var resetTranslation = "translate3d(-300px,0px,0px)";
    var elm = document.querySelector('.Working');
    elm.style.transform = resetTranslation;
    var arr = document.querySelectorAll('.Working li');
    var clonefirst,
        clonelast,
        width = 300;
    index = 2;
    clonefirst = arr[0].cloneNode(true);
    clonelast = arr[arr.length - 1].cloneNode(true);

    elm.insertBefore(clonelast, arr[0]);
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
    //Update
    arr = document.querySelectorAll('.Working li');
    elm.style.transition = 'transform 1.5s ease';

    setInterval(function () {

        elm.style.transform = 'translate3d(-' + index * width + 'px,0px,0px)';
        if (index == arr.length - 1) {
            elm.addEventListener('transitionend', function () {
                elm.style.transform = resetTranslation;
            });
            index = 1;
        }
        index++;

    }, 4000)

})();
*{
    box-sizing: border-box;
}
.wrapper{
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 300px;


}

.Working{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 3125%;


}
.Working li{
    position: relative;
    float: left;
}


img{
    max-width: 100%;
    display: block;
}

.SubContainer:after{
    display: table;
    clear: both;
    content: "";
}
<div class="wrapper">
    <ul class="SubContainer Working">
        <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
        <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
        <li><img  class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
    </ul>
</div>
Run codeHide result
+6
4

transition end , . , setTimeout , , reset . , , , , . .

(function () {
    var elm = document.querySelector('.Working');
    var arr = document.querySelectorAll('.Working li');
    var clonefirst,
        clonelast,
        width = 300;
    index = 2;
    clonefirst = arr[0].cloneNode(true);
    clonelast = arr[arr.length - 1].cloneNode(true);

    elm.insertBefore(clonelast, arr[0]);
    arr[arr.length - 1].parentNode.insertBefore(clonefirst, arr[arr.length - 1].nextSibling);
    //Update
    arr = document.querySelectorAll('.Working li');

     setInterval(function () {
        $(elm).css({
            'transform': 'translate3d(-' + (index * width) + 'px,0px,0px)',
            'transition': 'transform 1.5s ease'
        });
        if (index == arr.length - 1) {
            setTimeout(function () {
                $(elm).css({'transform': 'translate3d(-300px,0px,0px)', 'transition': 'none'});
                index = 1;
            }, 1400);

        }
        index++;

    }, 2000)

})();
* {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 300px;
    margin-top: 8px;

}

.Working {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    transform: translateX(-300px);
    width: 3125%;

}

.Working li {
    position: relative;
    float: left;
}

img {
    max-width: 100%;
    display: block;
}

.SubContainer:after {
    display: table;
    clear: both;
    content: "";
}

#checkboxer:checked + .wrapper {
    overflow: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="checkboxer">Remove Overflow Hidden</label>
<input type="checkbox" id="checkboxer" name="checkboxer"/>

<div class="wrapper">
    <ul class="SubContainer Working">
        <li> <img class="" src="http://i.imgur.com/HqQb9V9.jpg" /></li>
        <li><img class="" src="http://i.imgur.com/PMBBc07.jpg" /></li>
        <li><img  class="" src="http://i.imgur.com/GRrGSxe.jpg" /></li>
    </ul>
</div>
Hide result
+1

, : https://jsfiddle.net/rap8o3q0/

:

var currentItem = 1;

setInterval(function () {
    var getWidth = window.innerWidth;

    if(len === currentItem){
        i = 1;
        currentItem = 1;
    } else {
        currentItem++;
        i++;
    }

    var val = 'translate3d(-' + (i-1) * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

}, 3000);
+2

, transition end (3-) . .

$(UnorderedListElement).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function ()
    {
        {
            $(UnorderedListElement).css('transform', 'translate3d(0, 0, 0)');

        }
    });

. , , left .

Last thing . It is not recommended to move the opening of the image container. You must show your images separately. There is an obvious problem on your way: when the page copies the last image, there will be no next image to click on it!

0
source

You can update setIntervalas

  setInterval(function() {
    var getWidth = window.innerWidth;
    var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

    i++;
    if (i == 3) { //assuming three images here 
      i = 0
    }


  }, 3000)


var DomChanger;

(function() {


  var listItem = document.querySelectorAll('.ah-slider li');
  var len = listItem.length;


  var getImage = document.querySelector('.ah-slider li img');
  var UnorderedListElement = document.querySelector('.ah-slider');


  var outerDiv = document.querySelector('.Slider');

  UnorderedListElement.setAttribute('style', 'width:' + (len * 1000 + 215) + '%');


  var i = 1;

  DomChanger = function() {

    for (var i = 0; i < len; ++i) {
      listItem[i].setAttribute('style', 'width:' + window.innerWidth + 'px');
    }
    outerDiv.setAttribute('style', 'height:' + getImage.clientHeight + 'px');

  };


  setInterval(function() {
    var getWidth = window.innerWidth;
    var val = 'translate3d(-' + i * getWidth + 'px,0px,0px)';
    UnorderedListElement.style.transform = val;

    i++;
    if (i == 3) {
      i = 0
    }


  }, 3000)


})();





window.onload = function() {
  DomChanger();

};
window.onresize = function() {

  DomChanger();
};
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.Slider {
  width: 100%;
  margin: 50px 0 0;
  position: relative;
  overflow: hidden;
}

.ah-slider {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  transition: transform .5s ease;
}

.ah-slider li {
  position: relative;
  float: left;
}

.ah-slider li img {
  max-width: 100%;
  display: block;
}

.clearFix:after {
  content: "";
  display: table;
  clear: both;
}
<div class="Slider">
  <ul class="ah-slider clearFix">
    <li>
      <a href=""><img class="" src="http://i.imgur.com/L9Zi1UR.jpg" title="" /></a>
    </li>
    <li>
      <a href=""><img class="" src="http://i.imgur.com/FEcEwFs.jpg" title="" /></a>
    </li>
    <li><a href=""><img  class="" src=http://i.imgur.com/hURSKNa.jpg" title="" /></a></li>


  </ul>
</div>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1016016/

More articles:


All Articles