鼠标可以拖动的banner图片片切换
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="container">
<div class="bp-hs" id="demo-default">
<div class="bp-hs_inner">
<div class="bp-hs_inner__item" data-transform="scale">
<img src="dist/images/demo/01.jpg" alt="Boompx Hero Slider 01"/>
</div>
<div class="bp-hs_inner__item" data-transform="rotate" data-origin="top-left">
<img src="dist/images/demo/02.jpg" alt="Boompx Hero Slider 02"/>
</div>
<div class="bp-hs_inner__item" data-transform="rotate" data-origin="bottom-left">
<img src="dist/images/demo/03.jpg" alt="Boompx Hero Slider 03"/>
</div>
<div class="bp-hs_inner__item">
<img src="dist/images/demo/04.jpg" alt="Boompx Hero Slider 04"/>
</div>
</div>
</div>
4、书写css代码。
body { font-family: 'Roboto', sans-serif; padding-bottom: 60px; }
.font-heading { font-family: 'Playfair Display', serif; }
.fork-btn { position: fixed; top: 0; right: 0; border: 0; }
.m-t30 { margin-top: 30px; }
.m-0 { margin: 0; }
.bg-transparent { background-color: transparent; }
.doc-container { font-family: $font-family-roboto;
.has-modal {
.modal-dialog {
&.modal-lg {
width: 1170px;
margin: 50px auto;
}
}
}
.table { background-color: #fff; }
.color-demo { width: 16px; min-width: 16px; height: 16px; border-radius: 100%; display: inline-block; position: relative; }
}
.color-swatch { height: 150px; }
pre.prettyprint.prettyprint-std { padding: 15px; border: 1px solid #eee; font-family: consolas; font-size: 14px; background-color: #f9f9f9; border-radius: 0; }
pre.prettyprint.prettyprint-std span.com { color: #919d9f; }
pre.prettyprint.prettyprint-std span.pln { color: #395063; }
pre.prettyprint.prettyprint-std span.tag { color: #6a93d0; }
pre.prettyprint.prettyprint-std span.atv { color: #05ad97; }
pre.prettyprint.prettyprint-std span.pun, pre.prettyprint.prettyprint-std span.opn, pre.prettyprint.prettyprint-std span.clo { color: #B9947B; }
pre.prettyprint.prettyprint-std span.atn { color: #a95ebb; }
5、书写并添加js代码。
<script src="dist/js/bpHS.min.js"></script>
<script src="dist/js/custom.js"></script>
6、代码整体结构。
7、查看效果。
