[html]
<script type="text/javascript">
$(function() {
var settings = { continuous : true, pageStyles: true, transitions : { content : '', buttons : '' } };
var pages = $("#slider #pages li").length;
var currentPage;
var reachedLastPage, reachedFirstPage;
if (pages > 0)
{
// Hide navigation arrows when there is a single page
if (pages == 1)
{
$("#slider #prev").addClass("hidden");
$("#slider #next").addClass("hidden");
}
//
if(!settings.continuous)
$("#slider #prev").addClass("hidden");
// Set page style if needed
if (settings.pageStyles)
$("#slider").addClass("page1");
// Select the first page and element in the navigation
$("#slider #pages :first-child").addClass("selected");
$("#slider .navigation :first-child a").addClass("selected");
}
// Navigation bullets
$(".navigation a").click(function(e) {
e.preventDefault();
// Remove the selected class from the currently selected indicator
$(this).parent().parent().find(".selected").removeClass("selected");
// Make the clicked indicator the selected one
$(this).addClass("selected");
updateSlideshowForSelectedPage();
});
// Navigation arrows
$("#next").click(function(e) {
goToNext();
});
$("#prev").click(function(e) {
goToPrev();
});
// Keyboard shortcuts
$("body").keyup(function(e) {
if (e.keyCode == 39) // Key right
goToNext();
else if (e.keyCode == 37) // Key left
goToPrev();
});
function goToNext() {
reachedLastPage = $(".navigation .selected").parent().index()+1 >= pages;
if (reachedLastPage && settings.continuous)
{
$(".navigation .selected").removeClass("selected")
$(".navigation :first-child a").addClass("selected");
}
else if (reachedLastPage && !settings.continuous)
return;
else
$(".navigation .selected").removeClass("selected").parent().next().find("a").addClass("selected");
updateSlideshowForSelectedPage();
}
function goToPrev() {
reachedFirstPage = $(".navigation .selected").parent().index() <= 0;
if (reachedFirstPage && settings.continuous)
{
$(".navigation .selected").removeClass("selected")
$(".navigation :last-child a").addClass("selected");
}
else if (reachedFirstPage && !settings.continuous)
return;
else
$(".navigation .selected").removeClass("selected").parent().prev().find("a").addClass("selected");
updateSlideshowForSelectedPage();
}
function updateSlideshowForSelectedPage() {
var index = $(".navigation .selected").parent().index(),
classIndex = parseInt(index+1, 10),
reachedLastPage = $(".navigation .selected").parent().index()+1 >= pages,
reachedFirstPage = $(".navigation .selected").parent().index() <= 0;
if (settings.pageStyles)
$("#slider").attr("class", "page" + classIndex);
if(!settings.continuous)
{
reachedLastPage ? $("#slider #next").addClass("hidden") : $("#slider #next").removeClass("hidden");
reachedFirstPage ? $("#slider #prev").addClass("hidden") : $("#slider #prev").removeClass("hidden");
}
$("#pages .selected").removeClass("selected");
$("#pages li:nth-child(" + classIndex + ")").addClass("selected");
}
});
</script>
<div id="slider">
<ul class="navigation">
<li><a href="#"><span>основное</span></a></li>
<li><a href="#"><span>карта</span></a></li>
<li><a href="#"><span>третья</span></a></li>
<li><a href="#"><span>четвертая</span></a></li>
<li><a href="#"><span>пятая</span></a></li>
<li><a href="#"><span>шестая</span></a></li>
</ul>
<ul id="pages">
<li>
Название проекта: Pulse<br>
Система игры: эпизодическая<br>
Рейтинг игры: NC-21<br>
Вселенная: мир во время зомби-апокалипсиса<br>
Локация: США, Нью-Йорк <br>
Время: наши дни <br>
</li>
<li>
<iframe src="https://www.google.com/maps/d/embed?mid=18Oen_Y1F8_oqY8_PYkaDw0OQRzkCwew&ehbc=2E312F" width="500" height="480"></iframe>
<br>Опасные места:<br><br>
1. Затопленный Гринвуд Хайтс<br>
Затопленный район Гринвуд Хайтс, улицы которого превратились в труднопроходимые реки. Существенно пострадал Сансет Индастриал Парк, конструкции и склады которого наполовину ушли под воду, а вместе с ним морская перегрузочная станция Гамильтон Авеню. Вышедшая из берегов вода смела автомобили, превратила первые этажи в свалки обломанной мебели, снесла опоры автомагистрали и железнодорожных путей.<br><br>
2. Руины Верхнего Манхэттена<br>
В первые дни апокалипсиса Верхний Манхэттен стал эпицентром заражения. Толпы зомби заполонили его улицы, увеличивая свою численность в геометрической прогрессии и захватывая все большую площадь района. Верхний Манхэттен подвергся ковровым бомбардировкам, решившим проблему с ходячими мертвецами, но превратился в опасные руины: от него остались лишь обломки зданий, грозящие обвалом.<br><br>
3. Преступный Джексон Хайтс<br>
Район Куинса, быстро захваченный мелкими бандами мародеров, грызущимися между собой. Беспокойное место, в котором опасно существовать в одиночку. Здесь царит анархия, а все вопросы решаются насилием. Известен своим черным рынком.<br><br>
4. Токсичный Дугластон<br>
Вблизи парка Элли Понд поезд сошел с рельсов. В результате крушения вагонов в воздух, воду и землю района Дугластон попали высокотоксичные химические вещества.
</li>
<li>
Praesent interdum consectetur erat nec volutpat. Vivamus vitae mollis sem. Nam non ultricies ante. Curabitur vitae odio et nisi porta aliquet sit amet ut quam. Vestibulum dictum nunc vitae laoreet faucibus. Nulla a lorem eu mi pulvinar elementum eu et tortor. Nunc turpis odio, sodales in adipiscing sed, interdum vitae felis. Cras aliquam enim leo, eu consequat arcu luctus ullamcorper. Nam scelerisque at diam vel laoreet. Pellentesque bibendum mollis magna, ut tempor nunc aliquam non. Nullam tempus bibendum leo eget aliquet. Duis facilisis luctus neque, at ultricies massa consectetur in.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet felis lobortis mi iaculis porttitor. Quisque euismod eros et scelerisque ultricies. Pellentesque vestibulum erat in ultricies accumsan. Integer blandit dapibus magna et pellentesque. Nam risus sem, interdum a congue a, adipiscing at nisi. Nulla facilisi. Fusce rhoncus porta est. Vivamus purus felis, tincidunt dictum nunc vel, dignissim ornare orci. Vivamus id rhoncus nisl, nec mollis urna. Cras nisi elit, commodo ornare varius in, ultricies vel lectus. Nulla a consectetur metus. Nam ut ipsum nec neque adipiscing facilisis.
</li>
<li>
Proin sed ultricies arcu. Fusce elementum varius odio, in rhoncus risus elementum vel. Phasellus pellentesque, ligula ornare porttitor euismod, metus tellus facilisis lorem, non commodo erat neque non odio. Nam sed condimentum quam, vel rutrum dolor. Fusce sollicitudin posuere pulvinar. Fusce non nisi sit amet urna varius ultricies. Maecenas quis ante ut augue pretium iaculis at vulputate odio. Pellentesque ac magna vel est ornare suscipit. Aliquam congue pulvinar semper. Morbi blandit ipsum at nunc aliquam euismod. Integer vitae turpis magna. Ut aliquet scelerisque faucibus. Morbi non ante id neque pharetra ornare.
</li>
<li>
Praesent interdum consectetur erat nec volutpat. Vivamus vitae mollis sem. Nam non ultricies ante. Curabitur vitae odio et nisi porta aliquet sit amet ut quam. Vestibulum dictum nunc vitae laoreet faucibus. Nulla a lorem eu mi pulvinar elementum eu et tortor. Nunc turpis odio, sodales in adipiscing sed, interdum vitae felis. Cras aliquam enim leo, eu consequat arcu luctus ullamcorper. Nam scelerisque at diam vel laoreet. Pellentesque bibendum mollis magna, ut tempor nunc aliquam non. Nullam tempus bibendum leo eget aliquet. Duis facilisis luctus neque, at ultricies massa consectetur in.
</li>
</ul>
</div>
[/html]