导航我自己饲料网格传送带引导jquery html

Question

我做了一个饲料网格轮播，显示一系列可点击的照片内联。 花了很多时间寻找喜欢插件的插件喜欢的WordPress插件，但它只适用于...在WordPress！

所以我开始尝试自己。

我实现了几乎所有我想要的，但我仍然想改善导航。

问题： 我在里面做了一个div，所以当你在导航箭头（占据左侧44％，右侧44％，改变为14％，以更好的可视化） div左/右 - 右/左 - 没关系。 但div占据左右两侧的44％，所以该箭头div下的照片不可点击。 所以我做了像普通轮播一样的导航，左右两侧有箭头，占据不到44％。它工作正常，但我想隐藏这些div箭头并保持导航。 有可能吗？

实现示例： Site DoBem请看他们的Instagram feed grid - > section“aíévida”显示我想要的东西。

我的一段代码： Fiddle

在这种情况下，我可以保持44个和导航将更加准确像示例站点的预期效果。

HTML

<div id="containerCases"> 

    <div id="main"> 

    <div id="maincontainerCases"> 

     <div id="mainlist" class="contentCases"> 
     <div id="mainrow"> 
      <div class='contentCases'> 
      <div class='frameCases'> 
       <a data-target="#myModal" data-toggle="modal"> 
       <div class="item overlay" id="image-1"> 
        <img src="http://placehold.it/281x200" /> 
       </div> 
       </a> 
      </div> 
      </div> 
      <div class='contentCases'> 
      <div class='frameCases'> 
       <a data-target="#myModal" data-toggle="modal"> 
       <div class="item overlay" id="image-2"> 
        <img src="http://placehold.it/281x200" /> 
       </div> 
       </a> 
      </div> 
      </div> 
      <div class='contentCases'> 
      <div class='frameCases'> 
       <a data-target="#myModal" data-toggle="modal"> 
       <div class="item overlay" id="image-3"> 
        <img src="http://placehold.it/360x200" /> 
       </div> 
       </a> 
      </div> 
      </div> 
      <div class='contentCases'> 
      <div class='frameCases'> 
       <a data-target="#myModal" data-toggle="modal"> 
       <div class="item overlay" id="image-4"> 
        <img src="http://placehold.it/281x200g" /> 
       </div> 
       </a> 
      </div> 
      </div> 
      <div class='contentCases'> 
      <div class='frameCases'> 
       <a data-target="#myModal" data-toggle="modal"> 
       <div class="item overlay" id="image-5"> 
        <img src="http://placehold.it/281x200" /> 
       </div> 
       </a> 
      </div> 
      </div> 
     </div> 

     </div> 

     <div class="feedleft"><!--i class="fa fa-chevron-left"></i--></div> 
     <div class="feedright"><!--i class="fa fa-chevron-right"></i--></div> 

    </div> 
    <div style="clear: both;"></div> 

    </div> 

</div> 

CSS

#containerCases { 
    width: 100%; 
    /*background: lightgrey;*/ 
    overflow:hidden; 
} 
#maincontainerCases { 
    max-width: 100%; 
    overflow: hidden; 
} 
#mainlist { 
    display: table; 
    /*background: lightblue;*/ 
    white-space: nowrap; 
/* position: fixed; */ 
/* overflow: hidden; */ 
    margin-left: 0px; 
    max-width: 100%; 

} 
#mainrow { 
    display: table-row; 
    max-width: 100%; 
    overflow: hidden; 

} 
.contentCases { 
    display: table-cell; 
    min-width: 100%; 
} 
.frameCases { 
    margin: 5px; 
    width: 100%; 
    /*border: 1px solid red;*/ 
    background: white; 
box-sizing:border-box; 
} 

.feedleft{ 
    background:red; 
    position:absolute; 
    float:left; 
    left:0; 
    margin-top:-214px; 
    height:214px; 
    width:14%; 
    z-index:999; 
} 
.feedleft i { 
    float: left; 
    font-size: 40px; 
    top: 40%; 
    position: relative; 
    margin-left: 30px; 
    color: #841173; 
    color:rgba(132,17,115,0.3); 
} 
.feedright{ 
    background:lightblue; 
    position:absolute; 
    float:right; 
    right:0; 
    margin-top:-214px; 
    height:214px; 
    width:14%; 
    z-index:999; 
} 
.feedright i { 
    float: right; 
    font-size: 40px; 
    top: 40%; 
    position: relative; 
    margin-right: 30px; 
    color: #841173; 
    color:rgba(132,17,115,0.3); 
} 

JAVASCRIPT

$('.feedright').mouseover(function(e) 
      { 
       e.preventDefault(); 
       $('#mainlist').animate 
       ({ 
        'margin-left' : (parseInt($(this).parent().css('width')) - parseInt($('#mainlist').css('width'))) + 'px' 
       }); 
      }); 

      $('.feedleft').mouseover(function(e) 
      { 
       e.preventDefault(); 
       $('#mainlist').animate 
       ({ 
        'margin-left' : '0px' 
       }); 
      }); 

Answer 1

简单：改变你的div's到transparent的背景颜色，往其中加一个箭头。

.feedright{ 
    background:transparent; 
    position:absolute; 
    float:right; 
    right:0; 
    margin-top:-214px; 
    height:214px; 
    width:14%; 
    z-index:999; 
} 

.feedleft{ 
    background:transparent; 
    position:absolute; 
    float:left; 
    left:0; 
    margin-top:-214px; 
    height:214px; 
    width:14%; 
    z-index:999; 
} 

而不是我在你的div里面只是放了两个箭头。

<div class="feedleft"> << </div> 
<div class="feedright"> >> </div> 

我已经在你的小提琴中试过它，它的工作原理。