title: Navigation on my own feed grid carousel with bootstrap jquery html
body: <p>I made a feed grid carousel that show a sequence of clickable photos inline.
  Spent a lot of time searching for a plugin like enjoy instagram plugin for wordpress, but it only works... in wordpress!</p>
  
  <p>So I started to try on my own.</p>
  
  <p>I achieved almost all that I want, but I still want to improve the navigation.</p>
  
  <p>The problems: 
  I did a div inside other, so when you mouse over in the navigation arrows(occupy 44% of left and 44% of right #changed to 14% to better visualization in fiddle), it animate inside div left/right - right/left - that's ok.
  But the div occup 44% of left and right, so the photos below this arrows div are not clickable.
  So i made a navigation like common carousels, having arrows on left and right and occupying less than 44%. It works ok, but I want to HIDE these div arrows and MAINTAIN the navigation.
  It's possible?</p>
  
  <p>Example to achieve:
  <a href="http://dobem.com/" rel="nofollow noreferrer">Site DoBem</a> Please look their Instagram feed grid -> section "aí é vida" shows exactly what I want.</p>
  
  <p>Piece of my code:
  <a href="https://jsfiddle.net/felipelima/w8h72uvv/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>In that case I can maintain the 44 percentage and the navigation will be more accurate like the desired effect of example site.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="containerCases"&gt;
  
    &lt;div id="main"&gt;
  
      &lt;div id="maincontainerCases"&gt;
  
        &lt;div id="mainlist" class="contentCases"&gt;
          &lt;div id="mainrow"&gt;
            &lt;div class='contentCases'&gt;
              &lt;div class='frameCases'&gt;
                &lt;a data-target="#myModal" data-toggle="modal"&gt;
                  &lt;div class="item overlay" id="image-1"&gt;
                    &lt;img src="http://placehold.it/281x200" /&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='contentCases'&gt;
              &lt;div class='frameCases'&gt;
                &lt;a data-target="#myModal" data-toggle="modal"&gt;
                  &lt;div class="item overlay" id="image-2"&gt;
                    &lt;img src="http://placehold.it/281x200" /&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='contentCases'&gt;
              &lt;div class='frameCases'&gt;
                &lt;a data-target="#myModal" data-toggle="modal"&gt;
                  &lt;div class="item overlay" id="image-3"&gt;
                    &lt;img src="http://placehold.it/360x200" /&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='contentCases'&gt;
              &lt;div class='frameCases'&gt;
                &lt;a data-target="#myModal" data-toggle="modal"&gt;
                  &lt;div class="item overlay" id="image-4"&gt;
                    &lt;img src="http://placehold.it/281x200g" /&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class='contentCases'&gt;
              &lt;div class='frameCases'&gt;
                &lt;a data-target="#myModal" data-toggle="modal"&gt;
                  &lt;div class="item overlay" id="image-5"&gt;
                    &lt;img src="http://placehold.it/281x200" /&gt;
                  &lt;/div&gt;
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;div class="feedleft"&gt;&lt;!--i class="fa fa-chevron-left"&gt;&lt;/i--&gt;&lt;/div&gt;
        &lt;div class="feedright"&gt;&lt;!--i class="fa fa-chevron-right"&gt;&lt;/i--&gt;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div style="clear: both;"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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);
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>$('.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'
                  });
              });
  </code></pre>