I have the following slider, that goes repeatedly, but moves the amount of elements it has on the screen, so if there are 3 boxes, it jumps 3 at a time. I want it to move one by one. I ve tried but every time it screw the amount it moves to the left and it ends up with having half a box on the screen.
$( document ).ready(function() {
let bxsliderElems = $('.elements');
let listBox = $('.bxslider');
let bxsliderElemsLength = bxsliderElems.length;
let elemsPerSlide = 3; //DEFAULT VALUE
$( "#num-slides" ).change(function(){
elemsPerSlide = $( "#num-slides" ).val();
blueSlider();
});
$('.slider-controls').css('display', 'flex');
let prevArrow = $('.slider-controls .slide-prev');
let nextArrow = $('.slider-controls .slide-next');
let elemWidth;
let maxMargin;
let firstSeven;
let lastSeven;
let marginLeft;
let count;
let numSlides;
let isComplete = true;
blueSlider();
function blueSlider() {
$( 'li.elements' ).remove('.cloneBefore').removeClass('cloneBefore');
$( 'li.elements' ).remove('.cloneAfter').removeClass('cloneAfter');
elemWidth = 100 / elemsPerSlide;
maxMargin = 100;
marginLeft = -maxMargin;
bxsliderElems = $('.elements');
bxsliderElemsLength = bxsliderElems.length;
cloneBefore = bxsliderElems.slice(bxsliderElemsLength - elemsPerSlide,bxsliderElemsLength);
cloneAfter = bxsliderElems.slice(0,elemsPerSlide);
cloneBefore.clone().addClass('cloneBefore').prependTo(listBox);
cloneAfter.clone().addClass('cloneAfter').appendTo(listBox);
bxsliderElems = $('.elements');
bxsliderElemsLength = bxsliderElems.length;
bxsliderElems.css('width', elemWidth + '%');
listBox.css('width', (elemWidth*bxsliderElemsLength) + '%');
listBox.css('marginLeft', -maxMargin + '%');
count = 1;
numSlides = Math.floor( (bxsliderElemsLength - elemsPerSlide*2) / elemsPerSlide );
}
nextArrow.click(function(){
if ( isComplete ) {
console.log('preue');
isComplete = false;
if (bxsliderElemsLength % elemsPerSlide != 0) {
if ( marginLeft <= 0 && marginLeft > -(elemWidth * (bxsliderElemsLength - elemsPerSlide*2)) ) {
marginLeft = marginLeft - maxMargin;
console.log('1');
}
if ( marginLeft == -(elemWidth * (bxsliderElemsLength - elemsPerSlide*2)) ) {
listBox.css('marginLeft', 0 + '%' );
marginLeft = -maxMargin;
console.log('2');
}
if (marginLeft < -(elemWidth * (bxsliderElemsLength - elemsPerSlide*2)) ) {
marginLeft = -(elemWidth * (bxsliderElemsLength - elemsPerSlide*2));
console.log('3');
}
} else {
if ( marginLeft == -maxMargin*numSlides && count == numSlides ) {
listBox.css('marginLeft', 0 + '%' );
marginLeft = -maxMargin;
count = 1;
console.log('4');
} else {
marginLeft = marginLeft -maxMargin;
count++;
console.log('5');
}
}
listBox.animate({
marginLeft: marginLeft + '%'
}, 1000, function() {
isComplete = true;
});
}
});
prevArrow.click(function(){
if ( isComplete ) {
isComplete = false;
if (bxsliderElemsLength % elemsPerSlide != 0) {
if (marginLeft < 0 && marginLeft != -maxMargin) {
marginLeft = marginLeft + maxMargin;
}
if (marginLeft == -maxMargin) {
listBox.css('marginLeft', -(elemWidth* (bxsliderElemsLength - elemsPerSlide)) + '%' );
marginLeft = -(elemWidth * (bxsliderElemsLength - elemsPerSlide*2));
}
if (marginLeft >= -maxMargin) {
marginLeft = -maxMargin;
}
} else {
if ( marginLeft == -maxMargin && count == 1 ) {
listBox.css('marginLeft', -(elemWidth* (bxsliderElemsLength - elemsPerSlide)) + '%' );
marginLeft = -(elemWidth * (bxsliderElemsLength - elemsPerSlide*2));
count = count*numSlides;
} else {
marginLeft = marginLeft + maxMargin;
count--;
}
}
listBox.animate({
marginLeft: marginLeft + '%'
}, 1000, function() {
isComplete = true;
});
}
});
});@font-face {
font-family: Biciclette_Light;
src: url('../fonts/Bicyclette-Light.woff') format('truetype');
font-weight: lighter;
}
@font-face {
font-family: Biciclette_Normal;
src: url('../fonts/Bicyclette-Regular.woff') format('truetype');
font-weight: normal;
}
@font-face {
font-family: Biciclette_Bold;
src: url('../fonts/Bicyclette-Bold.woff') format('truetype');
font-weight: bolder;
}
* {
padding: 0;
margin: 0;
list-style: none;
box-sizing: border-box;
}
.banner-slider {
overflow: hidden;
position: relative;
width: 65%;
margin: 20px auto 0 auto;
background-color: aqua;
}
.banner-slider .bxslider {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
.banner-slider .bxslider li {
display: flex;
justify-content: start;
flex-direction: column;
align-items: left;
background-color: aqua;
margin: 27px;
width: 346px;
height: 490px;
padding: 17px;
}
.banner-slider .slider-controls {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: space-between;
padding: 0 5px;
}
.banner-slider .slider-controls .slide-prev, .banner-slider .slider-controls .slide-next {
content: '';
border-bottom: 3px solid #25A8E0;
border-right: 3px solid #25A8E0;
width: 23px;
height: 23px;
cursor: pointer;
}
.banner-slider .slider-controls .slide-prev {
transform: rotate(135deg);
}
.banner-slider .slider-controls .slide-next {
transform: rotate(-45deg);
}
.elements span{
font-size: 18px;
font-family: Biciclette_Normal;
padding: 26px 0 23px ;
letter-spacing: 0.54px;
color: #6BBFE8;
text-align: left;
}
.elements img{
width: 309px;
height: 309px;
}
.elements p{
max-height: 16rem;
max-width: 18rem;
}
.elementBox{
display: flex;
flex-direction: column;
width: 320px;
background-color: #fff;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<title>Infinite Slider</title>
<link rel="stylesheet" href="articles2.css">
</head>
<body>
<div class="banner-slider">
<ul class="bxslider">
<li class="elements">
<div class="elementBox">
<img src="https://picsum.photos/200/300?image=10">
<span>1.ro</span>
<p>WORDS words words words words words words words words words words words words words words </p>
</div>
</li>
<li class="elements">
<div class="elementBox">
<img src="https://picsum.photos/200/300?image=10">
<span>2.ro</span>
<p>WORDS words words words words words words words words words words words words words words </p>
</div>
</li>
<li class="elements">
<div class="elementBox">
<img src="https://picsum.photos/200/300?image=10">
<span>3.ro</span>
<p>WORDS words words words words words words words words words words words words words words </p>
</div>
</li>
<li class="elements">
<div class="elementBox">
<img src="https://picsum.photos/200/300?image=10">
<span>4.ro</span>
<p>WORDS words words words words words words words words words words words words words words </p>
</div>
</li>
<li class="elements">
<div class="elementBox">
<img src="https://picsum.photos/200/300?image=10">
<span>5.ro</span>
<p>WORDS words words words words words words words words words words words words words words </p>
</div>
</li>
<li class="elements">
<div class="elementBox">
<img src="https://picsum.photos/200/300?image=10">
<span>6</span>
<p>WORDS words words words words words words words words words words words words words words </p>
</div>
</li>
</ul>
<div class="slider-controls">
<span class="slide-prev"></span>
<span class="slide-next"></span>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="articles2.js"></script>
</body>
</html>