更轻的滑块在自定义HTML和CSS中不起作用

Question

在HTML和CSS代码下方

.content-slider {
	margin-top:80px;
	padding:0;
}
.content-slider > div {
	float:left;
	width:200px;
	height:100px;
	background:#666666;
	margin-right:4px;
  transition: transform .2s;
}
.content-slider > div:hover {
	-ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari 3-8 */
    transform: scale(2);
	  overflow:hidden;
    position:relative;
	  z-index:9999;
	  background:red;
}
.content-slider > div:hover .thumb-img {
	opacity: 0.3;
}
.overlay-thumb {
  transition: .5s ease;
  opacity: 0;
}
.content-slider > div:hover .overlay-thumb {
	opacity: 1;
}
.image-box {
	text-align:center;
	color:#fff;
	font-weight:bold;
}

<div class="demo">
  <div class="item">
    <div id="content-slider" class="content-slider">
      <div id="slide1">
          <div class="image-box">
            slide 1
          </div>
      </div>
      <div id="slide2">
          <div class="image-box">
            slide 2
          </div>
      </div>
      <div id="slide3">
          <div class="image-box">
            slide 3
          </div>
      </div>
	  <div id="slide4">
          <div class="image-box">
            slide 3
          </div>
      </div>
	  <div id="slide5">
          <div class="image-box">
            slide 3
          </div>
      </div>
	  <div id="slide6">
          <div class="image-box">
            slide 3
          </div>
      </div>
    </div>
  </div>
</div>

但是它看起来像下面的输出，集成到lightslider插件中后，任何人都可以帮上忙，我需要上面显示的HTML和CSS代码以及鼠标悬停时的效果。

 $(document).ready(function() {
		$("#content-slider").lightSlider({
			loop:true,
			item:6,
			pager: false,
			keyPress:true
		});
	});

.content-slider {
	margin-top:80px;
	padding:0;
}
.content-slider > div {
	float:left;
	width:200px;
	height:100px;
	background:#666666;
	margin-right:4px;
  transition: transform .2s;
}
.content-slider > div:hover {
	-ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari 3-8 */
    transform: scale(2);
	  overflow:hidden;
    position:relative;
	  z-index:9999;
	  background:red;
}
.content-slider > div:hover .thumb-img {
	opacity: 0.3;
}
.overlay-thumb {
  transition: .5s ease;
  opacity: 0;
}
.content-slider > div:hover .overlay-thumb {
	opacity: 1;
}
.image-box {
	text-align:center;
	color:#fff;
	font-weight:bold;
}

<link href="http://sachinchoolur.github.io/lightslider/dist/css/lightslider.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="http://sachinchoolur.github.io/lightslider/src/js/lightslider.js"></script>
<div class="demo">
  <div class="item">
    <div id="content-slider" class="content-slider">
      <div id="slide1">
          <div class="image-box">
            slide 1
          </div>
      </div>
      <div id="slide2">
          <div class="image-box">
            slide 2
          </div>
      </div>
      <div id="slide3">
          <div class="image-box">
            slide 3
          </div>
      </div>
	  <div id="slide4">
          <div class="image-box">
            slide 3
          </div>
      </div>
	  <div id="slide5">
          <div class="image-box">
            slide 3
          </div>
      </div>
	  <div id="slide6">
          <div class="image-box">
            slide 3
          </div>
      </div>
    </div>
  </div>
</div>