карусель carouFredSel: динамическое создание элементов

Аксинья · May 25, 2016

День добрый.

В проекте используется карусель carouFredSel. Галерея не циклическая, т.е. важен порядок элементов: именно c-a-r-o-u-F.
По нажатию на Add item динамически создается элемент в конце списка. (Далее здесь будет ajax).
Проблема в том, что, когда мы стоим на втором элементе, т.е. видим "a-r-o-u" и создаем новый элемент, карусель как будто перестаёт видеть первым элементом "с" и не может докрутить до него. Подскажите, как это можно исправить? Или в чем вообще моя ошибка?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="author" content="caroufredsel.frebsite.nl" />
		<title>carouFredSel: a circular, responsive jQuery carousel</title>
		<!-- include jQuery + carouFredSel plugin -->
		<script type="text/javascript" language="javascript" src="jquery-1.8.1.min.js"></script>
		<script type="text/javascript" language="javascript" src="jquery.carouFredSel-6.0.0.js"></script>
		<!-- optionally include helper plugins -->
		<script type="text/javascript" language="javascript" src="helper-plugins/jquery.mousewheel.min.js"></script>
		<script type="text/javascript" language="javascript" src="helper-plugins/jquery.touchSwipe.min.js"></script>
		<!-- fire plugin onDocumentReady -->
		<script type="text/javascript" language="javascript">
			$(function() {
                                var a = 1;

				//	Scrolled by user interaction
				$('#foo2').carouFredSel( {
                                        circular: false,
                                        infinite: false,
					auto: false,
					prev: '#prev2',
					next: {
                                            button: '#next2',
                                            onEnd: function( d ) {
                                                return;
                                            }
                                        },
                                        scroll: 1,
                                        items: {
                                            visible: 4,
                                            minimum: 4
                                        }
				});

        $('#li_add').click(function(){
            $('#foo2').trigger("insertItem", ['<li>'+ (a) +'</li>', 'end', true]);
            a++;
           return false;
        });


			});
		</script>

		<style type="text/css" media="all">
			html, body {padding: 0;margin: 0;}
			body, div, p {font-family: Arial, Helvetica, Verdana;color: #333;}
                        body {background-color: #eee;}
			a, a:link, a:active, a:visited {color: black;text-decoration: underline;}
			a:hover {color: #9E1F63;}
			.list_carousel {background-color: #ccc;margin: 0 0 30px 60px;width: 290px;}
			.list_carousel ul {margin: 0;padding: 0;list-style: none;display: block;}
			.list_carousel li {font-size: 40px;color: #999;text-align: center;background-color: #eee;border: 5px solid #999;
				width: 50px;height: 50px;padding: 0;margin: 6px;display: block;float: left;}
			.clearfix {float: none;clear: both;}
			.prev {float: left;margin-left: 10px;}
			.next {float: right;margin-right: 10px;}
		</style>
	</head>
	<body>

			<div class="list_carousel">
				<ul id="foo2">
					<li class="first">c</li>
					<li>a</li>
					<li>r</li>
					<li>o</li>
					<li>u</li>
					<li>F</li>
				</ul>
				<div class="clearfix"></div>
				<a id="prev2" class="prev" href="#">&lt;</a>
				<a id="next2" class="next" href="#">&gt;</a>
			</div>
            
                        <a href="" id="li_add">Add item</a>
            
	</body>
</html>

carouFredSel-6.0.0_my.zip

Sign In

карусель carouFredSel: динамическое создание элементов

Question

Аксинья

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information