从右到左滚动ul li

Question

任何人都可以帮忙解决这个问题。我有两个按钮（左箭头按钮和右箭头按钮）。我想通过点击右箭头按钮（即向右滚动目录图片）或左箭头按钮（即向左滚动目录图片），从右向左水平滚动我的编目图片项目，反之亦然。我有以下代码：

span.arrow-left,span.arrow-right,h3.m_1 span,h3.m_2 span {
    display: block;
    color: #434343;
    z-index: 2;
    cursor: pointer;
	float: right
}
span.arrow-left:hover, span.arrow-right:hover, h3.m_1 span:hover, h3.m_2 span:hover {
    color: #FFA200;
}

ul.product_grid{
	margin-top: 0.7em;
	padding:0;
	list-style:none;
	overflow: hidden;
}	
ul.product_grid li{
	width: 15.936%;
	float: left;
	margin-right: 10px;
}
ul.product_grid li img{
	border:8px solid #fff;
}
ul.product_grid li.last_product{
	margin:0;
}			
.product h3 {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	margin: 0 0 0.2em 0;
	color: #434343;
	font-size: 1.5em;
}

<h3>Products
<span class='arrow-left'><i class="arrow_right_alt"></i></span>
<span class='arrow-right'><i class="arrow_left_alt"></i></span></h3>
<ul class="product_grid">
  <!-- I want to scroll horizontally items from here with the arrow buttons at the top-->
				  <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="images/i1.jpg" class="img-responsive"alt=""/></a></li>
				  <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="images/i2.jpg" class="img-responsive" alt=""/></a></li>
				  <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="images/i3.jpg" class="img-responsive" alt=""/></a></li>
				  <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="images/i4.jpg" class="img-responsive" alt=""/></a></li>
				  <li><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="images/i5.jpg" class="img-responsive" alt=""/></a></li>
				  <li class="last_product"><a class="popup-with-zoom-anim" href="#small-dialog1"><img src="images/i6.jpg" class="img-responsive" alt=""/></a></li>
  
  <!-- And stop here -->
  
				  <div class="clearfix"></div>
				  <div id="small-dialog1" class="mfp-hide">
					<div class="pop_up">
						<h4>Item Name</h4>
						<img src="images/i_zoom.jpg" class="img-responsive" alt=""/>
					</div>
				  </div>
				</ul>

由于

詹姆斯