Question

我制作了多个视频滑块，但没有响应（视频之间应该有差距......但是当你改变浏览器的宽度时它不存在）

此外，当我尝试更改宽度＆amp;视频的高度..看起来很乱

你能告诉我我做错了什么吗？

以下是代码：

我使用了slidesToScroll：1`，因为我希望视频一个接一个地出现..

＆＃13;

$('.responsive').slick({
  dots: true,
	prevArrow: $('.prev'),
	nextArrow: $('.next'),
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

＆＃13;

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
}
.slick-dots li {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}
.slick-dots li.slick-active button {
  background-color: black;
}
.slick-dots li button {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: #999;
  border: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.slick-dots li :hover {
  background-color: black;
}

/* Custom Arrow */
.prev {
  color: #999;
  position: absolute;
  top: 38%;
  left: -2em;
  font-size: 1.5em;
}
.prev :hover {
  cursor: pointer;
  color: black;
}

.next {
  color: #999;
  position: absolute;
  top: 38%;
  right: -2em;
  font-size: 1.5em;
}
.next :hover {
  cursor: pointer;
  color: black;
}

@media screen and (max-width: 800px) {
  .next {
    display: none !important;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css'>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">
   <br/> <br/>
    <div class="row">
      <div class="col-md-12 heroSlider-fixed">
        <div class="overlay">
      </div>
         <!-- Slider -->
        <div class="slider responsive">
            <div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
			<div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
			<div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
			<div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
			<div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
			<div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
			<div>
				<video style="object-fit:cover" onmouseover="this.play();" onmouseout="this.pause()" muted="muted" width="280" height="auto">
                <source src="http://beta.veyev.net/uploads//dc2167261820a5e1e85768c89b56eb06.mp4" width="280" height="auto" type="video/mp4"></video>
		    </div>
        </div>
				 <!-- control arrows -->
				<div class="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				</div>
				<div class="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				</div>
				
      </div>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

＆＃13;

这里是小提琴Example

视频滑块无响应

0 个答案: