Witam,
Niedawno wykonałem slider z poradnika, niestety w tym sliderze przełączenie obrazów powoduje zaburzenie 4-sekundowego cyklu, podobny problem Pan Zelent rozwiązywał w tym poradniku z tym, że nie wiem jak coś takiego zrobić tutaj :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slideshow">
<ul class="slider">
<li>
<img src="img/zdj1.jpeg" alt="">
<section class="caption">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
</section>
</li>
<li>
<img src="img/zdj2.jpeg" alt="">
<section class="caption">
<h1>Lorem Ipsum 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
</section>
</li>
<li>
<img src="img/zdj3.jpeg" alt="">
<section class="caption">
<h1>Lorem Ipsum 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
</section>
</li>
<li>
<img src="img/zdj4.jpeg" alt="">
<section class="caption">
<h1>Lorem Ipsum 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis deleniti tenetur doloribus, aperiam tempore sapiente nostrum at? Rem obcaecati voluptas unde eaque repudiandae, voluptatum odit, beatae nostrum illo itaque earum.</p>
</section>
</li>
</ul>
<ol class="pagination">
</ol>
</div>
<div class="left">
<span class="fa fa-chevron-left"></span>
</div>
<div class="right">
<span class="fa fa-chevron-right"></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed facere fuga ducimus asperiores, quod tempore praesentium blanditiis! Quam ut nihil recusandae repudiandae, architecto est consequuntur neque quae nobis sapiente!</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(function() {
var imgPos = 1;
for (
i = 1; i <= $('.slider li').length; i++) {
$('.pagination').append('<li><span class="fas fa-circle"></span></li>');
}
$('.slider li').hide();
$('.slider li:first').show();
$('.pagination li:first').css({
'color': '#CD6E2E'
});
$('.pagination li').click(pagination);
$('.right span').click(nextSlider);
$('.left span').click(prevSlider);
setInterval(function(){
nextSlider();
}, 4000);
function pagination(){
var paginationPos = $(this).index() + 1;
$('.slider li').hide();
$('.slider li:nth-child('+ paginationPos +')').fadeIn();
$('.pagination li').css({'color': '#858585'});
$(this).css({'color': '#CD6E2E'});
imgPos = paginationPos;
}
function nextSlider(){
if(imgPos >= $('.slider li').length){
imgPos = 1;
}
else{
imgPos++;
}
$('.pagination li').css({'color': '#858585'});
$('.pagination li:nth-child('+ imgPos +')').css({'color': '#CD6E2E'});
$('.slider li').hide();
$('.slider li:nth-child('+ imgPos +')').fadeIn();
}
function prevSlider(){
if(imgPos <= 1){
imgPos = $('.slider li').length;
}
else{
imgPos--;
}
$('.pagination li').css({'color': '#858585'});
$('.pagination li:nth-child('+ imgPos +')').css({'color': '#CD6E2E'});
$('.slider li').hide();
$('.slider li:nth-child('+ imgPos +')').fadeIn();
}
});
</script>
</body>
</html>
