“Механика” слайдера

145

10 марта 2019, 20:10

Вопрос по механике слайдера..
Никак не могу допереть, как нормально сделать движение слайдера.

Вот наброски, на как можете наблюдать - они коряво работают.

//////////////////////////////// 
var i; 
for(i=1;i<10+1;i++){$('.s-content-wrap').append('<div class="s-item"><img src="https://via.placeholder.com/350x150?text=Slide '+i+'"></div>');}; 
sliderLoad(); 
//////////////////////////////// 
function sliderLoad() { 
	var sliderWidth = $('.slider .s-content').width(); 
	$('.slider').each(function(){ 
  	var sliderWrap = $(this).find('.s-content-wrap'); 
  	var sliderItemLen = $(this).find('.s-item').length; 
  	$(this).find('.s-item').width(sliderWidth); 
    $(this).find('.s-content-wrap').width(sliderWidth*sliderItemLen).css('left',-sliderWidth); 
    $(this).find('.s-item:last-child').prependTo(sliderWrap); 
         
    $('.s--prev').on('click',function(){ 
      SliderPrev(); 
    }); 
    $('.s--next').on('click',function(){ 
      SliderNext(); 
    }); 
 
    function SliderPrev() { 
    	var sliderItemLast = $(this).find('.s-item:last-child'); 
    	sliderWrap.animate({ 
      	'margin-left': sliderWidth 
      }, 1500, function(){ 
      	sliderItemLast.prependTo($(this).find('.s-content-wrap')); 
        sliderWrap.css('margin-left','0'); 
      }); 
    } 
     
    function SliderNext() { 
    	var sliderItemFirst = $(this).find('.s-item:first-child'); 
    	sliderWrap.animate({ 
      	'margin-left': -sliderWidth 
      }, 1500, function(){ 
      	sliderItemFirst.appendTo($(this).find('.s-content-wrap')); 
        sliderWrap.css('margin-left','0'); 
      }); 
    } 
  }); 
}

body {margin: 0;} 
img {border: 0;} 
 
.slider {display: block; width: 100%; height: 250px; position: relative;} 
.s-content {display: block; width: 100%; height: 100%; overflow: hidden;} 
.s-content-wrap {display: block; height: 100%; position: relative;} 
.s-content-wrap::after {content: ''; display: block; clear: both;} 
.s-item {display: inline-block; float: left; height: 100%;} 
.s-item img {width: 100%; height: 100%; object-fit: cover;} 
 
.s-button {display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; font-size: 21px; background: #333; color: #fff; cursor: pointer; position: absolute; top: calc(50% - 16px); z-index: 2;} 
.s-button.s--prev {left: 0;} 
.s-button.s--next {left: calc(100% - 32px);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> 
 
<!-----------------------------------> 
<div class="slider"> 
  <div class="s-button s--prev"> 
    <i class="fas fa-chevron-left"></i> 
  </div> 
  <div class="s-content"> 
    <div class="s-content-wrap"> 
       
    </div> 
  </div> 
  <div class="s-button s--next"> 
    <i class="fas fa-chevron-right"></i> 
  </div> 
</div>

Важно, код должен работать "отдельно" с каждым слайдером на странице. В "наброске" данный момент учтён.

Answer 1

Незнаю зачем на марджинах сделал, вот как бы я реализовал:

var i; 
for(i=1;i<2+1;i++){ 
    $('.s-content-wrap').append('<div class="s-item"><img src="https://via.placeholder.com/350x150?text=Slide '+i+'"></div>'); 
} 
 
class Slider { 
 
    constructor(settings = {}) { 
 
        this.selector = settings.selector !== undefined  
            ? settings.selector  
            : '.slider'; 
 
        this.wrapper_selector = settings.wrapper_selector !== undefined  
            ? settings.wrapper_selector  
            : '.s-content-wrap'; 
 
        this.slide_selector = settings.slide_selector !== undefined  
            ? settings.slide_selector  
            : '.s-item'; 
 
        this.prev_selector = settings.prev_selector !== undefined  
            ? settings.prev_selector  
            : '.s--prev'; 
 
        this.next_selector = settings.next_selector !== undefined  
            ? settings.next_selector  
            : '.s--next'; 
 
        this.sliderDom = document.querySelector(this.selector); 
        if (this.sliderDom !== null) { 
            this.init(); 
        } 
 
    } 
 
    init() { 
 
        this.slidesWrapper = this.sliderDom.querySelector(this.wrapper_selector); 
        this.slides = this.slidesWrapper.querySelectorAll(this.slide_selector); 
 
        this.prev = this.sliderDom.querySelector(this.prev_selector); 
        this.next = this.sliderDom.querySelector(this.next_selector); 
 
        this.slideWidth = this.sliderDom.offsetWidth; 
 
        var width = this.slideWidth * (this.slides.length + 2); 
 
        this.slidesWrapper.style.width = width + 'px'; 
         
        this.slides.forEach(function(el){ 
            el.style.width = this.slideWidth + 'px'; 
        }.bind(this)); 
 
        this.slidesWrapper.insertBefore(this.slides[this.slides.length - 1], this.slides[0]); 
        this.slidesWrapper.style.left = - this.sliderDom.offsetWidth + 'px'; 
 
        this.prev.addEventListener('click', this.prevSlide.bind(this)); 
        this.next.addEventListener('click', this.nextSlide.bind(this)); 
 
    } 
 
    prevSlide() { 
 
        this.slides = this.slidesWrapper.querySelectorAll(this.slide_selector); 
 
        var last = this.slides[this.slides.length - 1]; 
 
        var new_last = last.cloneNode(true); 
 
        this.slidesWrapper.insertBefore(new_last, this.slides[0]); 
         
        var animation = new_last.animate([ 
            {width: '0'}, 
            {width: this.slideWidth + 'px'} 
        ], 500); 
 
        animation.addEventListener('finish', function() { 
            new_last.style.width = this.slideWidth + 'px'; 
            last.parentNode.removeChild(last); 
        }); 
 
    } 
 
    nextSlide() { 
 
        this.slides = this.slidesWrapper.querySelectorAll(this.slide_selector); 
 
        var first = this.slides[0]; 
 
        this.slidesWrapper.insertBefore(first, this.slides[this.slides.length]); 
 
        var animation = this.slidesWrapper.animate([ 
            {paddingLeft: this.slideWidth + 'px'}, 
            {paddingLeft: '0'} 
        ], 500); 
 
    } 
 
} 
 
var slider = new Slider({ 
    selector: ".slider" 
});

body {margin: 0;} 
img {border: 0;} 
 
.slider {display: block; width: 100%; height: 250px; position: relative;} 
.s-content {display: block; width: 100%; height: 100%; overflow: hidden;} 
.s-content-wrap {display: block; height: 100%; position: relative;} 
.s-content-wrap::after {content: ''; display: block; clear: both;} 
.s-item {display: inline-block; float: left; height: 100%;} 
.s-item img {width: 100%; height: 100%; object-fit: cover;} 
 
.s-button {display: block; width: 32px; height: 32px; text-align: center; line-height: 32px; font-size: 21px; background: #333; color: #fff; cursor: pointer; position: absolute; top: calc(50% - 16px); z-index: 2;} 
.s-button.s--prev {left: 0;} 
.s-button.s--next {left: calc(100% - 32px);}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> 
 
    <div class="slider"> 
        <div class="s-button s--prev"> 
            <i class="fas fa-chevron-left"></i> 
        </div> 
        <div class="s-content"> 
            <div class="s-content-wrap"> 
 
            </div> 
        </div> 
        <div class="s-button s--next"> 
            <i class="fas fa-chevron-right"></i> 
        </div> 
    </div> 
</body> 
</html>

А вообще, лучше не писать велосипед - а использовать готовые библиотеки, например Slick-slider.
З.Ы. не уверен что будет корректно работать, с кол-вом слайдов меньше 3-х

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Как закрыть меню, сделанное в вордпресс на Elementor вне области самого меню?

144

C# WPF Сделать ListBoxItem IsSelected когда IsSelected TextBox который внутри Template ListBoxItem

Есть Template ListBoxItem и в нем TextBox, нужно когда пользователь выделяет TextBox делать выделенным и ListBoxItemКак забиндить IsSelected контейнера к IsSelected елемента...

161

Что если во время отладки выскакивает окно с #######.cs файл не найден

Смотрите, во время отладки выскакивает вот такое окно: я как понимаю, это (наверное) должно решаться в настройках Visual Studio но как это вопрос

136

Пустое сохранение в JSON на Unity

Добрый день и прошу простить, но

154