3 changed files with 157 additions and 0 deletions
|
After Width: | Height: | Size: 1.4 KiB |
@ -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 @@ |
|||||||
|
/* 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