0

Как добавить pagination через javascript? Я прошу оптимальный грамотный способ, который бы позволил через js со всеми просчетами вставлять эту пагинацию. И после естественно настроить слайд, что бы правильно все работало

Мой код на codepen.io

$(document).ready(function(){

	Slider(20);


	function Slider(margin) {

		// html var
		var sliderContainer = $('#slider');
		var sliderInner = $(sliderContainer).find('.slider-inner');
		var item = $(sliderInner).find('.item');
		var itemShow = 4; // Сколько показывать 4
		var pagination = $(sliderContainer).find('.pagination');

		// Head var
		var itemL = item.length; // Количество  12
		var sliderInnerWidth = sliderInner.width(); // 1170
		var sliderWrapper = $(sliderInner).find('.slider-wrapper'); 


		// Item Width 
		var itemW = (sliderInnerWidth - ((margin * 2) * itemShow)  ) / itemShow; //252


		// Wrapper width
		var sliderWrapperWidth =  itemL * ( itemW + (margin * 2)); // 3510

		// Максимальное значение шага
		var nextMax = sliderWrapperWidth - sliderInnerWidth;
		nextMax = nextMax * (-1);
		var td = 0;
		var step;

		$('.prev').click(function(){

			if (td == 0) {
				return false;
			}
			else {
				step = itemW + (margin * 2);
				td += step
				$('.slider-wrapper').css({
					'transform' : 'translate3d(' + td + 'px, 0px, 0px)'
				});
				console.log(td);
			}
		});
		$('.next').click(function(){
			
			if(nextMax == td) {
				return false
			}
			else {
				step = itemW + (margin * 2);

				td -= step
				$('.slider-wrapper').css({
					'transform' : 'translate3d(' + td + 'px, 0px, 0px)'
				});
				console.log(td);
			}
		});

		$(sliderWrapper).css({
			'width': sliderWrapperWidth + 'px'
		});

		$(item).css({
			'width' : itemW + 'px',
			'margin' : margin + 'px'
		});


	};

});
 * {
	padding: 0;
	margin: 0;
}
body {

	background: #EE6E73;
}

.container {
	width: 1170px;
	margin: 50px auto;
}
#slider {
	background: #1AF277;
	padding: 30px 0;
}
.slider-inner {
	overflow: hidden;
}
.slider-wrapper {
	overflow: hidden;
	position: relative;
	transform: translate3d(0px, 0px, 0px);
	transition: 0.3s;
}
.slider-inner .item {
	float: left;
	text-align: center;
	position: relative;
}
.item:nth-child(2n-1) {
	background: #fdeee0;
}
.item:nth-child(3n-1) {
	background: #8E24AA;
}
.item:nth-child(4n-1) {
	background: #FF8A80;
}
.item:nth-child(5n-1) {
	background: #C51162;
}
.item {
	background: #fdeee0;
}

.prev {
	float: left;
}

.next {
	float: right;
}

.pagination {
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
}

.pag-item {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #fff;
	margin: 0 5px;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

	<div class="container">
		
		<div id="slider">
			
			<div class="slider-inner">
				
				<div class="slider-wrapper">
					<div class="item">1</div>
					<div class="item">2</div>
					<div class="item">3</div>
					<div class="item">4</div>
					<div class="item">5</div>
					<div class="item">6</div>
					<div class="item">7</div>
					<div class="item">8</div>
					<div class="item">9</div>
					<div class="item">10</div>
					<div class="item">11</div>
					<div class="item">12</div>
				</div>

				<div class="sliderControll">
					
					<div class="nav">
						<div class="prev">prev</div>
						<div class="next">next</div>
					</div>

					<div class="pagination">
					</div>

				</div>


			</div>

		</div>

	</div>
	
</body>
</html>

9
  • что не так с вашим кодом?
    – Grundy
    Commented 18 янв. 2016 в 7:00
  • мне нужно добавить пагинацию я не знаю как Commented 18 янв. 2016 в 7:54
  • а как она тогда должна выглядеть? разве то, что по ссылке не codepen, без paging?
    – Grundy
    Commented 18 янв. 2016 в 7:56
  • вот что я хочу сделать prntscr.com/9s3zyc. Вот пример сайта owlcarousel.owlgraphic.com/demos/autowidth.html Commented 19 янв. 2016 в 15:12
  • ну там скорее ссылки на конкретный элемент
    – Grundy
    Commented 19 янв. 2016 в 15:23

1 ответ 1

1

$(document).ready(function(){

Slider(20);


function Slider(margin) {

    // html var
    var sliderContainer = $('#slider');
    var sliderInner = $(sliderContainer).find('.slider-inner');
    var item = $(sliderInner).find('.item');
    var itemShow = 4; // Сколько показывать 4
    var pagination = $(sliderContainer).find('.pagination');

    // Head var
    var itemL = item.length; // Количество  12
    var sliderInnerWidth = sliderInner.width(); // 1170
    var sliderWrapper = $(sliderInner).find('.slider-wrapper');  // 3510


    // Item Width 
    var itemW = (sliderInnerWidth - ((margin * 2) * itemShow)  ) / itemShow; //252


    // Wrapper width
    var sliderWrapperWidth =  itemL * ( itemW + (margin * 2)); // 3510

    // Максимальное значение шага
    var nextMax = sliderWrapperWidth - sliderInnerWidth; // => 2340
    nextMax = nextMax * (-1); // => -2340
    var td = 0;
    var step;

    $('.prev').click(function(){

        if (td == 0) {
            return false;
        }
        else {
            step = itemW + (margin * 2);
            td += step
            $('.slider-wrapper').css({
                'transform' : 'translate3d(' + td + 'px, 0px, 0px)'
            });
            console.log(td);
        }
    });
    $('.next').click(function(){

        if(nextMax == td) {
            return false
        }
        else {
            step = itemW + (margin * 2);

            td -= step
            $('.slider-wrapper').css({
                'transform' : 'translate3d(' + td + 'px, 0px, 0px)'
            });
            console.log(td);
        }
    });


    var pgCount =  sliderWrapperWidth / sliderInnerWidth;  // => 3

    console.log(pagination);
    for(i = 0; pgCount > i; i++) {
        $(pagination).append("<div data-slide=" + i + " class='pag-item'></div>");
    };

    var pagItem = $(pagination).find('.pag-item');


    $(pagItem).on('click', function(){

        var dataS = $(this).data('slide');

        var slideS = 0 + (sliderInnerWidth * dataS);
        console.log(slideS);

        slideS = slideS * -1;

        $('.slider-wrapper').css({
            'transform' : 'translate3d(' + slideS + 'px, 0px, 0px)'
        });

    });
















    $(sliderWrapper).css({
        'width': sliderWrapperWidth + 'px'
    });

    $(item).css({
        'width' : itemW + 'px',
        'margin' : margin + 'px'
    });



};

});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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