移动平滑滚动jQuery箭头的位置

Question

我在我的网站上使用了jQuery Smooth Scrolling插件，只是简单地将显示在滚动元素容器旁边的箭头移动到它的内部。如果您将鼠标悬停在旋转木马上方，则会让您向左和向右滚动。我打算让箭头永久可见的左侧和右侧。如何将箭头移动到滚动条容器外部并在左右两侧显示它们？

这里是一个活的URL链接 - http://bit.ly/1dIDzFJ 该插件的主页 - http://smoothdivscroll.com/

箭头动态创建/使用jQuery的显示。但是，这里是一些现在实现的用于平滑滚动jQuery的HTML/CSS。

HTML

<div class="box-product" id="makeMeScrollable"> 
         <div id="carousel-product"> 
          <div class="span2"> 
           <img src="img/ted.jpg" /> 
           <p class="product-carousel-title">Angry Birds Adult Costume</p> 
           <h5>ONLY &#163;46.99</h5> 
           <a href="#"><img src="img/addtocart.jpg" /></a> 
          </div> 
         </div> 
         <div id="carousel-product"> 
          <div class="span2"> 
           <img src="img/ted.jpg" /> 
           <p class="product-carousel-title">Angry Birds Adult Costume</p> 
           <h5>ONLY &#163;46.99</h5> 
           <a href="#"><img src="img/addtocart.jpg" /></a> 
          </div> 
         </div> 
         <div id="carousel-product"> 
          <div class="span2"> 
           <img src="img/ted.jpg" /> 
           <p class="product-carousel-title">Angry Birds Adult Costume</p> 
           <h5>ONLY &#163;46.99</h5> 
           <a href="#"><img src="img/addtocart.jpg" /></a> 
          </div> 
         </div> 
         <div id="carousel-product"> 
          <div class="span2"> 
           <img src="img/ted.jpg" /> 
           <p class="product-carousel-title">Angry Birds Adult Costume</p> 
           <h5>ONLY &#163;46.99</h5> 
           <a href="#"><img src="img/addtocart.jpg" /></a> 
          </div> 
         </div> 
         <div id="carousel-product"> 
          <div class="span2"> 
           <img src="img/ted.jpg" /> 
           <p class="product-carousel-title">Angry Birds Adult Costume</p> 
           <h5>ONLY &#163;46.99</h5> 
           <a href="#"><img src="img/addtocart.jpg" /></a> 
          </div> 
         </div> 
         <div id="carousel-product"> 
          <div class="span2"> 
           <img src="img/ted.jpg" /> 
           <p class="product-carousel-title">Angry Birds Adult Costume</p> 
           <h5>ONLY &#163;46.99</h5> 
           <a href="#"><img src="img/addtocart.jpg" /></a> 
          </div> 
         </div> 
        </div><!-- end makemescrollable --> 

CSS

div.scrollingHotSpotLeft { 
left: 5%; 
} 

#makeMeScrollable div.scrollableArea img 
{ 
    position: relative; 
    float: left; 
    margin: 0; 
    padding: 0; 
    /* If you don't want the images in the scroller to be selectable, try the following 
     block of code. It's just a nice feature that prevent the images from 
     accidentally becoming selected/inverted when the user interacts with the scroller. */ 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -o-user-select: none; 
    user-select: none; 
} 

Answer 1

我会用CSS来定位的箭头：

.scrollingHotSpotRight { posistion:relative; right:-50px; } 
.scrollingHotSpotLeft { posistion:relative; left:-50px; }