When multiple images are rotated on the mobile ios, there is a probability of picture disorder during handover. How to solve this problem? - Codes Helper

when writing a website, I do a photo rotation function, which normally goes like this:

ios:

this problem is only found in iphone browsers, and it may take a little longer for the arrows to appear.

this rotation is written by myself and does not use plug-ins, but I can"t find out why this happens.
doesn"t feel like it"s the reason for the code, and I don"t know if it has anything to do with the ios system"s handling of image caching.
are there any small partners who encounter this kind of situation and how to solve it?

attach the code
html:

<div class="person-page-box">
  <div class="c-container" id="person-page">
    <div class="c-wrapper">
      <div class="c-slide">
          <img class="avatar" src="loading.png" data-src=""/>
      </div>
      <div class="c-slide">
          <img class="avatar" src="loading.png" data-src=""/>
      </div>
      .....//  
    </div>
  </div>
  <div class="person-prev"></div>
  <div class="person-next"></div>
</div>

css:

.person-page-box {
  position: relative;
  width: 100%;
  height: 1.7rem;
  padding: .29rem 0;
  background-color: -sharp3d342c;
}
-sharpperson-page {
  width: 6.16rem;
  margin: 0 auto;
  overflow: hidden;
}
-sharpperson-page .c-slide {
  display: inline-block;
  width: 1.12rem;
  height: 1.12rem;
  margin-right: .14rem;
  -webkit-filter: brightness(50%);
  -ms-filter: brightness(50%);
  -moz-filter: brightness(50%);
  -o-filter: brightness(50%);
  filter: brightness(50%);
}
-sharpperson-page .c-slide-active {
  -webkit-filter: brightness(100%);
  -ms-filter: brightness(100%);
  -moz-filter: brightness(100%);
  -o-filter: brightness(100%);
  filter: brightness(100%);
}
-sharpperson-page .c-slide:last-child {
  margin-right: 0;
}
-sharpperson-page .c-slide img {
  width: 100%;
  outline: none;
  border: none;
  object-fit: cover;
}
.person-prev,
.person-next {
  position: absolute;
  top: .465rem;
  width: .67rem;
  height: .77rem;
  background: url(f_arrowL.png) no-repeat;
  background-size: auto 100%;
  background-position: left center;
  transform: none;
  margin-top: 0;
}
.person-prev {
  left: 0;
  background-position: right center;
}
.person-next {
  right: 0;
  background-image: url(f_arrowR.png);
}

js:

var pageSwiper = new Carousel("-sharpperson-page", {
    group: 5,
    loop: true,
    prevElem: ".person-prev",
    nextElem: ".person-next",
    lazy: true
  });

the Carousel method above is in this js-carousel.js:

if (typeof Object.assign != "function") {
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { 
      "use strict";
      if (target == null) {
        throw new TypeError("Cannot convert undefined or null to object");
      }
      var to = Object(target);
      for (var index = 1; index < arguments.length; indexPP) {
        var nextSource = arguments[index];

        if (nextSource != null) {
          for (var nextKey in nextSource) {
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

function Carousel(container, option) {

  Object.assign(this, option || {});

  this.container = container;
  this.$container = $(container);
  this.$wrapper = $(container).find(".c-wrapper");
  this.$slide = $(container).find(".c-slide");
  this.wrapperWidth = this.$wrapper.width();
  this.slideWidth = this.$slide.width();
  this.activeIndex = this.initSlide || 0;
  this.slideLength = this.$slide.length;
  this.duration = .5;
  this.trulyGroup = this.group || 1;
  // this.realIndex = this.activeIndex;

  if (this.pagination) {
    this.$page = $(this.pagination);
    this.page();
  }

  if (this.loop) {
    this.activeIndex += this.trulyGroup;
    this.prepareLoop();
    this.$slide = $(container).find(".c-slide");
  }

  this.init();

  return this
}

Carousel.prototype.slideTo = function(index, loop){
  if (this.lazy) {
    this.findLazyLoad(index);
  }

  var _this = this;

  if (this.group) {
    var groupCount = Math.ceil((this.slideLength + 2 * this.trulyGroup) / this.group);
    var groupPos = parseInt(index / this.group);
    var groupPosActive = parseInt(this.activeIndex / this.group);

    // if (groupPos != groupPosActive) {
      var count = Math.abs(groupPos - groupPosActive);
      var marginR = Number(window.getComputedStyle(this.$slide[0], null).getPropertyValue("margin-right").replace("px", ""));
      var groupWidth = this.$container.width() + marginR;
      var trans = groupWidth * groupPos + "px";
      var duration = this.duration * count / 2;
      if (duration > 1) {
        duration = 1;
      }
      var animate = {
        "transform": "translate3d(-" + trans + ", 0, 0)",
        "transition-duration": duration + "s"
      }
      this.$wrapper.css(animate)
    // }
  } else {
    var count = Math.abs(this.activeIndex - index);
    var trans = this.slideWidth * index + "px";
    var duration = this.duration * count / 2;
    if (duration > 1) {
      duration = 1;
    }

    var animate = {
      "transform": "translate3d(-" + trans + ", 0, 0)",
      "transition-duration": duration + "s"
    }
    if (this.effect == "fade") {
      animate["transition"] = "none";
    }
    this.$wrapper.css(animate)
  }

  
  this.activeIndex = loop || index;

  this.$slide.eq(index).addClass("c-slide-active")
    .siblings().removeClass("c-slide-active");

  if (this.pagination) {
    var pageIndex = index;
    
    if (index < this.trulyGroup) {
      pageIndex += this.slideLength - this.trulyGroup;
    } else if (index > this.slideLength + this.trulyGroup - 1) {
      pageIndex -= this.slideLength + this.trulyGroup;
    } else {
      pageIndex--;
    }
    this.$page.find(".c-page-bullet").eq(pageIndex).addClass("c-page-bullet-active")
      .siblings().removeClass("c-page-bullet-active");
  }

  if (loop) {
    // transitionEndolder Android phones
    setTimeout(function(){
      _this.jumpTo(loop);
    }, duration * 1000 + 10);
  }

  if (this.slideChange) {
    this.slideChange.apply(this);
  }
}
Carousel.prototype.jumpTo =  function(index){
  if (this.lazy) {
    this.findLazyLoad(index);
  }
  if (this.group) {
    var groupCount = Math.ceil(this.slideLength / this.group);
    var groupPos = parseInt(index / this.group);
    var groupPosActive = parseInt(this.activeIndex / this.group);

    var marginR = Number(window.getComputedStyle(this.$slide[0], null).getPropertyValue("margin-right").replace("px", ""));
    var groupWidth = this.$container.width() + marginR;
    var trans = groupWidth * groupPos + "px";
    
    var animate = {
      "transform": "translate3d(-" + trans + ", 0, 0)",
      "transition-duration": "0s"
    }
    this.$wrapper.css(animate)
  } else {
    var trans = this.slideWidth * index + "px";

    var animate = {
      "transform": "translate3d(-" + trans + ", 0, 0)",
      "transition-duration": "0s"
    }
    this.$wrapper.css(animate)
  }

  this.$slide.eq(index).addClass("c-slide-active")
    .siblings().removeClass("c-slide-active");
}

Carousel.prototype.init = function(){

  var _this = this;

  $(document).on("swipeRight", this.container, function(){
    var group = _this.group || 1;
    var index = _this.activeIndex - group;

    if (!_this.loop)  {
      if (index < 0) {
        index = _this.slideLength + index;
      }
      _this.slideTo(index);
    } else {
      _this.slideTo(index, index < group ? index + _this.slideLength : null);
    }
  })

  $(document).on("swipeLeft", this.container, function(){
    var group = _this.group || 1;
    var index = _this.activeIndex + group;

    if (!_this.loop)  {
      if (index > _this.slideLength - 1) {
        index = index - _this.slideLength;
      }
      _this.slideTo(index);
    } else {
      _this.slideTo(index, index > group + _this.slideLength - 1 ? index - _this.slideLength : null);
    }
  })

  $(document).on("tap", this.container + " .c-slide", function(){
    var index = $(this).index();
    _this.slideTo(index);
  })

  if (this.prevElem) {
    this.$prev = $(this.prevElem);

    $(document).on("tap", this.prevElem, function(){
      var index = _this.activeIndex - 1;
      if (_this.loop) {
        _this.slideTo(index, index < _this.trulyGroup ? index + _this.slideLength : null);
      } else {
        if (index < 0) {
          index = _this.slideLength - 1;
        }
        _this.slideTo(index);
      }
    })
  }

  if (this.nextElem) {
    this.$next = $(this.nextElem);

    $(document).on("tap", this.nextElem, function(){
      var index = _this.activeIndex + 1;

      if (_this.loop) {
        _this.slideTo(index, index > _this.trulyGroup + _this.slideLength - 1 ? index - _this.slideLength : null);
      } else {
        if (index > _this.slideLength - 1) {
          index = 0;
        }
        _this.slideTo(index);
      }
    })
  }
  this.slideTo(this.activeIndex);
}

Carousel.prototype.page = function() {
  var _this = this;

  for (var i = 0; i < this.slideLength; iPP) {
    this.$page.append("<div class="c-page-bullet"></div>");
  }

  $(document).on("tap", this.pagination + " .c-page-bullet", function(){
    var index = $(this).index();
    _this.slideTo(index + _this.trulyGroup);
  })
}

Carousel.prototype.prepareLoop = function() {
  var _this = this;

  var $prev = [], $next = [];
  for (var i = 0; i < this.trulyGroup; iPP) {
    $next.push($(this.$slide[i]).clone());
    $prev.push($(this.$slide[this.slideLength - i - 1]).clone());
  }
  $next.forEach(function(item){
    item.appendTo(_this.$wrapper);
  });
  $prev.forEach(function(item){
    item.prependTo(_this.$wrapper);
  });
}

Carousel.prototype.lazyLoad = function(n) {
  var $d = this.$slide.eq(n).find("img");
  if ($d.length>0) {
    $d[0].src = $d.data("src");
  }
}

Carousel.prototype.findLazyLoad = function(index){
  var gro = parseInt(index / this.group);
  for (var i = gro * this.group; i < (gro+1) * this.group; iPP) {
    this.lazyLoad(i);
  }
}