Hello!

Tell me, please, the easiest option, how to make an infinite slider on jQuery. I have 3 pictures. When I press to the right, the first picture should move to the left outside the slider, and the second one should appear in its place. It is necessary to make so that after the third picture the first one appears, etc. I reviewed a lot of options on the Internet, but it's all a bit wrong.

Thanks in advance for your help.

  • I need a working principle and a couple of lines of code. I recommend to close all posts on the site, and then suddenly someone will write back the code for the author. - barakh

2 answers 2

Look at jCarousel.

$('ul').jcarousel({ vertical: false, // ориСнтация слайдСра scroll: 1,// ΠΊΠΎΠ»-Π²ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π·Π° Ρ€Π°Π· auto: 5,// ΠΊΡ€ΡƒΡ‚ΠΈΡ‚ автоматичСски wrap: 'circular',// позвляСт ΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ бСсконСчно animation: 2000, // ВрСмя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ easing:'easeInOutExpo', // Π’ΠΈΠΏ сглаТивания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ buttonPrevHTML: '<div id="prev" class="slide-navigator">&nbsp;</div>', buttonNextHTML: '<div id="next" class="slide-navigator">&nbsp;</div>' });

Images put in li

    from your site took

    html

     <div class="portfolio-slider"> <div class="slide-button slide-prev"></div> <div class="slide-content"> <div class="-slide slide-active"></div> <div class="-slide"></div> <div class="-slide"></div> </div> <div class="slide-button slide-next"></div> </div>

    css

     .portfolio-slider {display: grid; grid-template-columns: 50px 1fr 50px; grid-gap: 5px;} .portfolio-slider .slide-button, .portfolio-slider .slide-content {display: block; width: 100%; min-height: 500px;} .portfolio-slider .slide-button {background-repeat: no-repeat; background-size: calc(100% - 10px) auto; background-position: center center; border-radius: 5px; cursor: pointer;} .portfolio-slider .slide-button:hover {background-color: rgba(255,255,255,.15);} .portfolio-slider .slide-button.slide-prev {background-image: url('/core/img/slider/slide-button-prev.png');} .portfolio-slider .slide-button.slide-next {background-image: url('/core/img/slider/slide-button-next.png');} .portfolio-slider .slide-content {position: relative; overflow: hidden;} .portfolio-slider .-slide {display: none; width: 100%; height: 100%; background: #fff;} .portfolio-slider .-slide.slide-active {display: block;}

    jq

     $('.portfolio-slider .slide-button').on('click',function(){ var buttonPrev = $(this).hasClass('slide-prev'), buttonNext = $(this).hasClass('slide-next'); var slideBlock = $('.portfolio-slider .-slide'), slideActive = $('.portfolio-slider .-slide.slide-active'); var slideLen = slideBlock.length, slideActiveIndex = slideActive.index(); slideBlock.removeClass('slide-active'); if(buttonPrev) { var slidePrev = (slideActiveIndex-1); slideBlock.eq(slidePrev).addClass('slide-active'); console.info('slide: '+slidePrev+'/'+slideLen); } if(buttonNext) { var slideNext = (slideActiveIndex+1); if(slideNext==slideLen) var slideNext = 0; slideBlock.eq(slideNext).addClass('slide-active'); console.info('slide: '+slideNext+'/'+slideLen); } });