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); } });