Я сделал несколько фотографий, скользящих одну за другой через jQuery, используя эффект слайда , доступный в jquery ui , в основном каждая фотография имеет два скользящих эффекта (один слева направо, другой снизу вверх) .
Но я сталкиваюсь с проблемой, т. е. каждый раз, когда каждая фотография скользит с последующим лишь одним (первым) эффектом скольжениядругой фотографией со вторым эффектом, хотя для одной фотографии есть два скользящих эффекта
По некоторым причинам в редакторе StackOverflow отображается ошибка jquery или jquery-ui, поэтому вот код из codepen:
$(document).ready(function(){
var imglst =
["https://images.pexels.com/photos/4933/lake-animals-dogs-pets.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/36477/dogs-batons-play-bite.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/35638/labrador-breed-dogs-animal.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/101635/pexels-photo-101635.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"];
var len = imglst.length;
i=0;
setInterval(function slider() {
if(i < len){
$("img").replaceWith("<img src= " +imglst[i]+ " height= 250px width= 100% >");
$( ".sliding" ).effect( 'slide', {direction: 'up'} ,1000 );
$( ".sliding" ).effect( 'slide', {direction: 'right'} ,1000 );
}
else{
i = -1;
}
i = i + 1;
}, 1000);
});
.slideborder{
border: 2px dotted blue;
width: 60%;
height: 300px;
margin-top: 2.5%;
margin-left: 20%;
}
.sliding{
margin-top: 3%;
margin-left: 14%;
height: 250px;
width: 80%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<div class="slideborder">
<div class="sliding"><img src="https://images.pexels.com/photos/356378/pexels-photo-356378.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" height="250px" width="100%"></div>
</div>
</body>