Move carousel buttons out of carousel

This commit is contained in:
Matthew Grove
2018-12-08 15:56:38 +00:00
parent f675b0d9c7
commit 88a4c44e59
6 changed files with 85 additions and 54 deletions

View File

@@ -38,7 +38,7 @@
<link href="/assets/material-components-web.min.css" rel="stylesheet" type="text/css">
<link href="/assets/material_icons.css" rel="stylesheet" type="text/css">
<script src="/assets/material-components-web.min.js" type="text/javascript"></script>
<!-- import Bootstrap -->
<script src="/assets/bootstrap.min.js" type="text/javascript"></script>
<link href="/assets/bootstrap.min.css" rel="stylesheet" type="text/css">
@@ -77,54 +77,55 @@
<h1>HTTP Introduction</h1>
<div class="presentation-container">
<div id="http_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--<div class="item">-->
<!-- <img src="la.jpg" alt="Los Angeles" style="width:100%;">-->
<!--</div>-->
</div>
<div class="presentation-flexbox">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
<!-- </div> -->
</div>
</div>
<div class="presentation-buttons-container">
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
</div>
</div>
<!-- HTML presentation -->
<h1>HTML, CSS & JS Introduction</h1>
<div id="html_presentation" class="carousel slide" data-interval="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
</div>
<div class="presentation-flexbox">
<!-- Indicators -->
<ol class="carousel-indicators">
</ol>
<!-- <div class="presentation-buttons-container"> -->
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#http_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#http_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
<!-- </div> -->
</div>
</div>
<div class="presentation-buttons-container">
<!-- button to go to previous slide -->
<button class="presentation-button-left mdc-button mdc-button--outlined" href="#html_presentation" data-slide="prev" data-mdc-auto-init="MDCRipple">
<i class="material-icons mdc-button__icon">navigate_before</i>
Previous
</button>
<!-- button to go to next slide -->
<button class="presentation-button-right mdc-button mdc-button--outlined" href="#html_presentation" data-slide="next" data-mdc-auto-init="MDCRipple">
Next
<i class="material-icons mdc-button__icon">navigate_next</i>
</button>
</div>
<!-- link to source code on GitHub -->