3 changed files with 157 additions and 0 deletions
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,121 @@
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
||||
<meta name="description" content=""> |
||||
<meta name="author" content="netmoose"> |
||||
|
||||
<title>Presentation on JQuery and Bootstrap</title> |
||||
|
||||
<!-- Bootstrap core CSS --> |
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> |
||||
|
||||
<!-- Custom styles for this template --> |
||||
<link href="sticky-footer.css" rel="stylesheet"> |
||||
|
||||
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
||||
<!--[if lt IE 9]> |
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
||||
<![endif]--> |
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
||||
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> |
||||
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> |
||||
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script> |
||||
</head> |
||||
|
||||
<body> |
||||
|
||||
<!-- Begin page content --> |
||||
<div class="container"> |
||||
<div class="page-header"> |
||||
<h1>Пример презентации</h1> |
||||
</div> |
||||
<div id="presentation"> |
||||
<div> |
||||
<strong>1</strong> |
||||
<p><img src="image.png" class="image-left"></p> |
||||
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit, orci consectetur posuere efficitur, risus dolor vulputate |
||||
nibh, ac venenatis mauris quam id elit. In non dapibus lectus, in placerat diam. Aenean finibus volutpat nibh, quis maximus augue bibendum |
||||
eget. Cras euismod risus vitae risus consectetur, ac consectetur augue gravida. Etiam condimentum nulla sem, in venenatis quam consequat nec. |
||||
Nam sed nulla felis. Duis in feugiat felis. Curabitur eget varius purus. In malesuada accumsan felis eu vehicula. Donec convallis mauris vel |
||||
odio efficitur vestibulum.<p> |
||||
</div> |
||||
<div> |
||||
<strong>2</strong> |
||||
<p><img src="image.png" class="image-left"></p> |
||||
<p class="lead">Sed non egestas tellus, a aliquet ex. Donec id velit in purus vehicula auctor id vel nulla. Cras molestie urna ac pellentesque rutrum. In |
||||
at convallis dui, et sollicitudin lacus. Aenean purus quam, faucibus vel est at, efficitur euismod lacus. Ut consectetur maximus ligula, sed |
||||
pellentesque lacus pretium ut. Suspendisse pellentesque ut tellus vitae facilisis. Cras auctor elit in dui tempus dictum. </p> |
||||
</div> |
||||
<div> |
||||
<strong>3</strong> |
||||
<p><img src="image.png" class="image-left"></p> |
||||
<p class="lead">Praesent et risus lorem. Nullam massa eros, maximus et ipsum suscipit, mattis cursus metus. Vestibulum dapibus enim imperdiet dui ornare |
||||
pharetra. Aenean pulvinar eros metus, semper maximus diam tincidunt in. Suspendisse fermentum mi at augue feugiat blandit imperdiet at quam. |
||||
Pellentesque libero ligula, vulputate vitae sapien eu, dapibus tempor nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices |
||||
posuere cubilia Curae; Sed pharetra dolor a elementum feugiat. Aliquam erat volutpat. Morbi volutpat cursus dapibus. Sed luctus nisi purus, |
||||
id rutrum dui dignissim sit amet.</p> |
||||
</div> |
||||
<div> |
||||
<strong>4</strong> |
||||
<p><img src="image.png" class="image-left"></p> |
||||
<p class="lead">Praesent est ipsum, lobortis sed sapien vel, pellentesque vestibulum nunc. Fusce rutrum ligula risus, eu maximus lacus fermentum nec. Cum |
||||
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt in nunc sed feugiat. Sed non ex sed justo |
||||
eleifend pulvinar non vel odio. Nunc ultricies ipsum in velit mattis euismod. Donec aliquet efficitur molestie. Nam a nulla consectetur, |
||||
malesuada neque vel, mattis nisl. Suspendisse nibh ante, mattis non varius vel, sodales non ligula. Sed consequat eget neque vitae |
||||
ullamcorper. Proin lobortis iaculis magna, sit amet dictum augue dignissim id. Vestibulum vestibulum massa ut leo aliquet, tempor varius quam |
||||
ultricies. Sed molestie felis ac justo blandit, id pretium purus suscipit.</p> |
||||
</div> |
||||
<div> |
||||
<strong>5</strong> |
||||
<p><img src="image.png" class="image-left"></p> |
||||
<p class="lead">Donec porta semper fringilla. Etiam ac orci tempor, euismod risus ac, posuere felis. Suspendisse congue, dui sed tempor hendrerit, diam orci |
||||
malesuada dolor, ut placerat nisl neque quis odio. Vivamus gravida accumsan augue at semper. In hac habitasse platea dictumst. Mauris auctor |
||||
dui a enim vulputate elementum. Morbi enim massa, ullamcorper maximus neque non, facilisis commodo turpis. Mauris ornare euismod rhoncus. |
||||
Vivamus tincidunt tincidunt orci, non ultrices felis fermentum et. Praesent porttitor nunc a purus fermentum, congue faucibus dui laoreet. |
||||
Vivamus efficitur sollicitudin lacus, ac ultricies orci eleifend eget. Nullam at odio et turpis accumsan sollicitudin. Etiam auctor sodales |
||||
diam, at efficitur massa hendrerit vel.</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<footer class="footer"> |
||||
<div class="container"> |
||||
<p class="text-muted"><center><a id="prev" href="#">Предыдущий слайд</a> | <a id="prespause" href="#">Пауза</a> | <a id="next" href="#">Следующий слайд</a></center></p> |
||||
</div> |
||||
</footer> |
||||
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
||||
<script type="text/javascript"> |
||||
var run = 1; |
||||
console.log('run = '+run); |
||||
|
||||
$.fn.cycle.defaults.timeout = 6000; |
||||
$('#presentation').cycle({ |
||||
fx: 'scrollLeft,scrollDown,scrollRight,scrollUp', |
||||
delay: -1000, |
||||
next: '#next', |
||||
prev: '#prev' |
||||
}); |
||||
$('#prespause').click(function () { |
||||
console.log('pause'); |
||||
if(run == 1) { |
||||
run = 0; |
||||
console.log('run = '+ run); |
||||
$('#presentation').cycle('pause'); |
||||
$('#prespause').text('Запуск'); |
||||
} |
||||
else { |
||||
run = 1; |
||||
console.log('run = '+run); |
||||
$('#presentation').cycle('resume'); |
||||
$('#prespause').text('Пауза'); |
||||
} |
||||
return false; |
||||
}); |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,36 @@
@@ -0,0 +1,36 @@
|
||||
/* Sticky footer styles |
||||
-------------------------------------------------- */ |
||||
html { |
||||
position: relative; |
||||
min-height: 100%; |
||||
} |
||||
body { |
||||
/* Margin bottom by footer height */ |
||||
margin-bottom: 60px; |
||||
} |
||||
.footer { |
||||
position: absolute; |
||||
bottom: 0; |
||||
width: 100%; |
||||
/* Set the fixed height of the footer here */ |
||||
height: 60px; |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
|
||||
/* Custom page CSS |
||||
-------------------------------------------------- */ |
||||
/* Not required for template or sticky footer method. */ |
||||
|
||||
.container { |
||||
width: auto; |
||||
max-width: 1024px; |
||||
padding: 0 15px; |
||||
} |
||||
.container .text-muted { |
||||
margin: 20px 0; |
||||
} |
||||
.image-left { |
||||
float:left; |
||||
margin: 7px 7px 7px 0; |
||||
} |
||||
Loading…
Reference in new issue