title: Previous and next in slide with ASp.net mvc and jquery
body: <p>I have slide.There is main img for main image and many small icon.When user click small icon it show that in main image</p>
  
  <pre><code>&lt;div class="hotel-galeri"&gt;
      &lt;div class="galeri-ust"&gt;
          &lt;img src="@Model.Images[0].Url" 
               style="width:auto !important;height:auto !important" 
               class="galeri-show"
               id="imgshower"/&gt;
      &lt;/div&gt;
      &lt;div class="galeri-alt"&gt;
          //for small icon
          @for (var hotelImageIndex = 0; hotelImageIndex &lt; Math.Min(Model.Images.Count, 20); hotelImageIndex++)
          {
              &lt;div class="galeri-item"&gt;
                  &lt;img src="@Model.Images[hotelImageIndex].ThumbnailUrl" 
                       onclick="$('#imgshower').attr('src', '@Model.Images[hotelImageIndex].Url');"
                       onmouseover="$('#imgshower').attr('src', '@Model.Images[hotelImageIndex].Url');"/&gt;
              &lt;/div&gt;
          } 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to add next and previous icon.So i added this </p>
  
  <pre><code>&lt;img style="width:30px;height:31px;margin-top:-11px"
       src="~/Content/images/prev.png"/&gt;  
  &lt;img style="width:30px;height:31px;margin-top:-11px;margin-left:411px" 
       src="~/Content/images/next.png"/&gt;
  </code></pre>
  
  <p>but how can i handle next or previous image on main image?
  I need anything likes this</p>
  
  <pre><code>$('#imgshower').attr('src', 'NEXT ITEM.....
  </code></pre>