Повторите настройки CSS для каждого изображения в цикле (jQuery)

Question

У меня есть этот HTML для слайдера изображений:

<div>
    <ul id="imageContainer">
        <li><img src="image-1.png" alt=""></li>
        <li><img src="image-2.png" alt=""></li>
        <li><img src="image-3.png" alt=""></li>
        <li><img src="image-4.png" alt=""></li>
        <li><img src="image-5.png" alt=""></li>
        <li><img src="image-6.png" alt=""></li>
        <li><img src="image-7.png" alt=""></li>
        <li><img src="image-8.png" alt=""></li>
        <li><img src="image-9.png" alt=""></li>
    </ul>
</div>

Я использую метод карты, чтобы применить настройки CSS ко всем изображениям:

var imageContainer = $('#imageContainer'),
states = [
    { zIndex: 1, width: 120, height: 347, top: 0, left: 170, opacity: 0 },
    { zIndex: 2, width: 130, height: 390, top: 0, left: 0, opacity: 1 },
    { zIndex: 3, width: 160, height: 475, top: 0, left: 147, opacity: 1 },
    { zIndex: 4, width: 220, height: 638, top: 0, left: 322, opacity: 1 },
    { zIndex: 3, width: 160, height: 475, top: 0, left: 555, opacity: 1 },
    { zIndex: 2, width: 130, height: 390, top: 0, left: 730, opacity: 1 },
    { zIndex: 1, width: 120, height: 347, top: 0, left: 570, opacity: 0 },
];

imageContainer.map(function(index, element) {
    imageContainer.find('li:last').prependTo(imageContainer);
    var state = states[index];
    $(element).animate(state);
});

Это работает, если я использую 7 изображений(У меня есть 7 состояний в объекте), но я использую 9 изображений (настройки CSS применяются только к первым 7 изображениям, последние 2 не определены).Как я могу использовать эти настройки CSS, если у меня более 7 изображений?

Вот fiddle .Я не вижу восьмого и девятого изображения в слайдере.

Answer 1

Вы также можете использовать метод each(), а затем использовать this для указания свойства element.Это должно пройти через каждое изображение.

imageContainer.each(function(index, element) {
    imageContainer.find('li:last').prependTo(imageContainer);
    var state = states[index];
    $(this).animate(state);
});

Answer 2

Я не знаю, почему вы не добавляете больше состояния в ваш states объект, но вы можете проверить перед своей функцией, если число li превышает states объект.

Этот пример ниже работы.Я использовал по модулю для увеличения значения в states объекте.Я добавляю небольшой короткий код в вашу функцию $lis.each.Пожалуйста, смотрите

$(function () {
	$('.slide').customSlide();
});

(function($) {
    var slide = function(ele, options) {
        var $ele = $(ele);
        var setting = {
            speed: 1000,
            interval: 2000,
        };
		var cssPercentFromTop = 50 + '%';
		var states = [
		    { zIndex: 1, width: 120, height: 347, top: cssPercentFromTop, left: 170, opacity: 0 },
		    { zIndex: 2, width: 130, height: 390, top: cssPercentFromTop, left: 0, opacity: 1 },
		    { zIndex: 3, width: 160, height: 475, top: cssPercentFromTop, left: 147, opacity: 1 },
		    { zIndex: 4, width: 220, height: 638, top: cssPercentFromTop, left: 322, opacity: 1 },
		    { zIndex: 3, width: 160, height: 475, top: cssPercentFromTop, left: 555, opacity: 1 },
		    { zIndex: 2, width: 130, height: 390, top: cssPercentFromTop, left: 730, opacity: 1 },
		    { zIndex: 1, width: 120, height: 347, top: cssPercentFromTop, left: 570, opacity: 0 },
		];
        
		$.extend(true, setting, options);

        var $lis = $ele.find('li');
        var timer = null;

        $ele.find('.custom-slider-next').on('click', function() {
            next();
        });
        
		$ele.find('.custom-slider-prev').on('click', function() {
            states.push(states.shift());
            move();
        });
        
		$ele.on('mouseenter', function() {
            clearInterval(timer);
            timer = null;
        }).on('mouseleave', function() {
            //autoPlay();
        });

        move();
        //autoPlay();

        function move() {

	        var imageContainer = $('.custom-slider ul');
	        imageContainer.find('li:last').prependTo(imageContainer);
      
      $lis.each(function(index, element) {
				///// NEW CODE BY P.Frank /////
        if(index >= states.length){
        	var tap = index % states.length;
          states.push(states[tap])
        }
        ///// NEW CODE BY P.Frank /////
        
				var state = states[index];

				$(element).animate(state, setting.speed);
				$(element).css('transform', 'translate(0, -50%)');
			});

        }

        function next() {
            states.unshift(states.pop());
            move();
        }

        function autoPlay() {
            timer = setInterval(next, setting.interval);
        }
    }
    
	$.fn.customSlide = function(options) {
        $(this).each(function(index, ele) {
            slide(ele, options);
        });
        return this;
    }
	
})(jQuery);

.custom-slider {
	position: relative;
	width: 860px;
	height: 375px;
	margin: 0 auto;
}

.custom-slider .custom-slider-next,
.custom-slider .custom-slider-prev {
	position: absolute;
	top: 50%;
	margin-top: -96px;
	cursor: pointer;
}

.custom-slider .custom-slider-prev {
	left: -200px;
}

.custom-slider .custom-slider-next {
	right: -200px;
}

.custom-slider ul {
	list-style: none;
	position: relative;
	width: 860px;
	height: 630px;
	margin: 0 auto;
	padding: 0;
}

.custom-slider ul li {
	overflow: hidden;
	position: absolute;
	z-index: 0;
	left: 377px;
	top: 146px;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
}

.custom-slider ul li img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide custom-slider">
  <div class="custom-slider-prev">
    <img src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_left_black_192x192.png" alt="">
 </div>
  <div class="custom-slider-next">
    <img src="https://www.materialui.co/materialIcons/hardware/keyboard_arrow_right_black_192x192.png" alt="">
  </div>
  <ul>
    <li><img src="https://via.placeholder.com/250?text=1" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=2" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=3" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=4" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=5" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=6" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=7" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=8" alt=""></li>
    <li><img src="https://via.placeholder.com/250?text=9" alt=""></li>
  </ul>
</div>

Answer 3

Если вы не хотите зацикливать свой массив состояний, я думаю, вы можете сделать что-то вроде этого:

imageContainer.map(function(index, element) {
    imageContainer.find('li:last').prependTo(imageContainer);
    var state = states[index % states.length];
    $(element).animate(state);
});

index% states.length возвращает остаток от деления индекса на длину состояниямассив.