<div class=”container-fluid”><div class=”container-fluid”> <!–课程体系–> <div id=”layout-curriculum” class=”row” style=”position: relative;”> <div class=”carousel”>   <div class=”carousel-cell”>   <img  src=”img/curriculum-img01.jpg” alt=”课程体系” title=”课程体系”>   <div class=”curriculum-bg”></div>   <div class=”curriculum-icon”></div>   </div>   <div class=”carousel-cell”>   <img  src=”img/curriculum-img02.jpg” alt=”课程体系” title=”课程体系”>   <div class=”curriculum-bg”></div>   <div class=”curriculum-icon”></div>   </div>   <div class=”carousel-cell”>   <img  src=”img/curriculum-img03.jpg” alt=”课程体系” title=”课程体系”>   <div class=”curriculum-bg”></div>   <div class=”curriculum-icon”></div>   </div>   <div class=”carousel-cell”>   <img  src=”img/curriculum-img04.jpg” alt=”课程体系” title=”课程体系”>   <div class=”curriculum-bg”></div>   <div class=”curriculum-icon”></div>   </div> </div> </div> </div>

<link href=”https://cdn.bootcss.com/flickity/2.1.2/flickity.min.css” rel=”stylesheet”>
<script src=”https://cdn.bootcss.com/flickity/2.1.2/flickity.pkgd.min.js”></script>

<style>.carousel-cell {  width: 25%; }.curriculum-bg{ position: absolute; width: 100%;height: 100%; top: 0;left: 0; background: #000000; opacity: 0.8; display: none; }.curriculum-icon{ position: absolute; width: 100%;height: 100%; top: 0;left: 0; background:url(img/curriculum-hover.png) center center no-repeat; display: none; }

.carousel-cell:hover .curriculum-bg,.carousel-cell:hover .curriculum-icon{display: block;}.carousel-cell img{ width:100% ; max-height: 782px;}</style>

<script>$(‘.carousel’).flickity({        // options        cellAlign: ‘center’,        contain: true,        wrapAround: true,        autoPlay: true,        pageDots: false,        groupCells: true      });</script>