jquery - 在移动 View 而不是桌面 View 中制作响应式 slider

Question

	

.box{
	//border: thin black solid;
	display: block;
	text-align: center;
}

.box ol{
	margin:auto;
}

.box ol li {
	list-style-type: none;
	display: inline;
	margin: auto;
}

ol li img {
	border-radius: 50%;
}

<div class="box">
<ol class="carousel-indicators">
	<li>
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80">
	</li>
	<li>
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80">
	</li>
	<li >
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80">
	</li>
	<li>
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80" style="border:2px black solid;">
	</li>

	<li >
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80">
	</li>
	<li >
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80">
	</li>
	<li>
		<img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80">
	</li>

</ol>

</div>

我有 n 张图片。我已将图片用于推荐。

当我在移动 View 中看到时，所有图像都应该有手动 slider ，并且中心图像应该处于事件状态并带有黑色边框。所以当我在图像上向左或向右滚动时，它应该在移动 View 中相应地滑动。

所以当我手动向左或向右滑动时，中心图像应该显示为事件状态。

谢谢。

Answer 1

您可以将代码写两次。

<div class="desktop-view">your code goes here</div>
<div class="mobile-view">your code goes here</div>
<style> /*hide mobile view for desktop view*/  
    .mobile-view {display:none}
      @media all and (max-width :767) {
      .desktop-view {
        display:none;
      }
     .mobile-view{ 
      display:block;
      }
     }

 </style>