1

Всем привет!

Подскажите, пожалуйста, самый простой вариант, как сделать на jQuery бесконечный слайдер. У меня есть 3 картинки. Когда я нажимаю вправо, то первая картинка должна переместиться влево за пределы слайдера, а на её место вслед появиться вторая. Необходимо сделать так, чтобы после третьей картинки появлялась первая и т.п. Пересмотрел в интернете множество вариантов, но все немного не то.

Заранее благодарен за помощь.

1
  • Мне нужен принцип работы и пару строк кода. Рекомендую закрыть все посты на сайте, а то вдруг кто-то в ответ напишет код за автора.
    – barakh
    9 мая 2012 в 15:21

2 ответа 2

1

Посмотрите на 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>'
});

Изображения помещайте в li

0

со своего сайта взял

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.