導航我自己飼料網格傳送帶引導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> 

我已經在你的小提琴中試過它，它的工作原理。