Вернитесь, чтобы начать в конце полосы прокрутки - PullRequest
Новая
       9

Вернитесь, чтобы начать в конце полосы прокрутки

0 голосов
/ 26 июня 2018

Я создал своего рода фальшивую прокрутку, используя JS, так как мой босс использует mac, и полосы прокрутки по умолчанию отключены, и он хотел посмотреть, что происходит.

Мой код для этого выглядит так: 

$(function() {
	var popular_products_span = $("#popular_products_span");
	var items = popular_products_span.children();
	popular_products_span.prepend('<div id="right-button"><a href="#"><</a></div>');
	popular_products_span.append('<div id="left-button"><a href="#">></a></div>');
	items.wrapAll('<div id="inner" />');
	popular_products_span.find('#inner').wrap('<div id="outer"/>');
	var outer = $('#outer');
	var updateUI = function() {
		var maxWidth = outer.outerWidth(true);
		var actualWidth = 0;
		$.each($('#inner >'), function(i, item) {
			actualWidth += $(item).outerWidth(true);
		});
	};
	updateUI();
	$('#right-button').click(function() {
		var leftPos = outer.scrollLeft();
		outer.animate({
			scrollLeft: leftPos - 300
		}, 300);
	});
	$('#left-button').click(function() {
		var leftPos = outer.scrollLeft();
		outer.animate({
			scrollLeft: leftPos + 300
		}, 300);
	});
	$(window).resize(function() {
		updateUI();
	});
});
#popular_products_span{
	overflow:hidden;
}
img{
	padding:10px;
}
#outer {
	float:left;
	width:400px;
	overflow:hidden;
	white-space:nowrap;
	display:inline-block;
}
#left-button {
	float:left;
}
#right-button {
	float:left;
}
#inner:first-child {
	margin-left:0;
}
.hide {
	display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="popular_products_span">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
<img src="http://via.placeholder.com/100x100">
</span>

Однако я хочу, чтобы он прокручивался бесконечно, поэтому вместо того, чтобы заканчиваться, вы снова вернетесь к началу и не знаете, как это сделать.

Любая помощь или помощь с этим будет принята с благодарностью.

1 Ответ

0 голосов
/ 31 июля 2019

Это то, что я использовал гораздо проще https://kenwheeler.github.io/slick/

...