pokaz slajdów z bootstrapem

Question

Próbuję zrobić pokaz slajdów z bootstrapem, abyś mógł przesuwać obrazy. Ale obrazy nie są wyświetlane. Wyświetlany jest tylko następny i poprzedni przycisk. Używam asp.net mvc5

to jest jquery:

$(document).ready(function() { 
      $myModal = $('#myModal'); 

      $('.row img.img-responsive').on('click', function() { // <-- notice the selector change 
       var $this = $(this), 
        src = $this.attr('src'), 
        html = '<img src="' + src + '" class="img-responsive" />'; 

       //Start 
       var index = $(this).parent('.row img.img-responsive').index(); 
       var html = ''; 
       html += html; 
       html += '<div style="height:25px;clear:both;display:block;">'; 
       html += '<a class="controls next" href="' + (index + 2) + '">next &raquo;</a>'; 
       html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>'; 
       html += '</div>'; 
       //End 


       updateModalBody($myModal, html); 
       $myModal.modal(); 
      }); 

      $myModal.on('hidden.bs.modal', function() { 

       updateModalBody($myModal, ''); 
      }); 

      function updateModalBody($modal, html) { 
       $modal.find('.modal-body').html(html); 
       $modal.modal('hide'); 
      } 

     }) 

     $(document).on('click', 'a.controls', function() { 
      //this is where we add our logic 
      var index = $(this).attr('href'); 
      var src = $('ul.row li:nth-child(' + index + ') img').attr('src'); 

      $('.modal-body img').attr('src', src); 

      var newPrevIndex = parseInt(index) - 1; 
      var newNextIndex = parseInt(newPrevIndex) + 2; 

      if ($(this).hasClass('previous')) { 
       $(this).attr('href', newPrevIndex); 
       $('a.next').attr('href', newNextIndex); 
      } else { 
       $(this).attr('href', newNextIndex); 
       $('a.previous').attr('href', newPrevIndex); 
      } 

      var total = $('ul.row li').length + 1; 
      //hide next button 
      if (total === newNextIndex) { 
       $('a.next').hide(); 
      } else { 
       $('a.next').show() 
      } 
      //hide previous button 
      if (newPrevIndex === 0) { 
       $('a.previous').hide(); 
      } else { 
       $('a.previous').show() 
      } 


      return false; 
     }); 

i to css/html:

<div id="tabs-2"> 
    <div class="row"> 
     @foreach (var item in Model.LolaBikePhotos) 
     { 

      @model ContosoUniversity.Models.UserProfile 
      @*<div class="col-lg-3 col-md-4 col-xs-6 thumb">*@ 
      <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 img-thumbnail"> 
       @*<a class="thumbnail">*@ 
       <img class="img-responsive" src="/Images/profile/@item.ImagePath" alt="" /> 
      </div> 

      <div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 

       <div class="modal-dialog"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <div class="modal-content"> 
         <div class="modal-body"></div> 
        </div> 
        <!-- /.modal-content --> 
       </div> 
       <!-- /.modal-dialog --> 

      </div> 
    <!-- /.modal --> 
     } 
    </div> 
</div> 

Dziękuję

muszę zmodyfikować:

html += html; 

Ale nie wiem, jak to zmienić.

ten sposób widać to:

Answer 1

Aby uczynić ten prosty

Jeśli spojrzeć na HTML z

Kopiuj pierwsza i dodać trochę Razor, to powinien generować karuzela dla ciebie.

@model List<YOUR_MODEL_NAME> 
    @{var j = 0;} 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
    @for (var i = 0; i < Model.Count(); i++) 
    { 
     <li data-target="#carousel-example-generic" data-slide-to="@i"></li> 
     } 
    </ol> 

<div class="carousel-inner" role="listbox"> 

@foreach (var item in Model) 
    { 
    <div class="item @(j == 0 ? "active" : "")"> 
     <img src="@(string.Format("/Images/profile/{0}", item.ImagePath))" /> 
    </div> 
    @(j = 1) 
    } 

</div> 

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 

EDIT

Oto przykład z miniatury, gdy miniatury kliknął otworzy modalne-dialog z karuzeli w nim.

Stworzyłem JSFiddle swojego scenariusza: http://jsfiddle.net/u7hxy3zc/1/

należy użyć poniższy kod jako przykład i wykorzystać w swoim widokiem, zmiana nazwy wszystkie modele i parametry.

Uwaga: Poniższy kod nie został skompilowany Może mieć błędy składniowe

// DISPLAY THUMBNAILS 
<div class="col-md-2"> 
@for(int i =0; i < Model.Count(); i++) 
    { 
    <img src="@Model[i].ImageUrl" data-id="@i" data-action="image" /> 
    }   
</div> 



.......... REMOVE HTML TO MAKE EXAMPLE CLEAR 
... MODAL DIALOG START................. 


<div class="modal-body"> 

...........CAROUSEL START............ 


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
<ol class="carousel-indicators"> 
@for(var i = 0 ; i< Model.Count(); i++) 
{ 
<li data-target="#carousel-example-generic" data-slide-to="@i"></li> 
} 
</ol> 

<div class="carousel-inner" role="listbox"> 

@for(var i = 0; i < Model.Count(); i++) 
{ 
<div class="item" data-image-id="@i"> 

    // DISPLAY i for Testing  
    @i  

    <img src="@Model[i].ImageUrl" /> 
} 
</div> 

........... REMOVED REST OF CAROUSEL......(NEXT/PREV BUTTONS)......... 

.............CAROUSEL END................... 

Następnie dodaj jQuery na końcu wyzwolić zdarzenie kliknij:

$('body').on('click', '*[data-action="image"]', function (e) { 
    e.stopPropagation(); 
    var img = $(this); 
    var currentId = img.data('id'); 
    $('#myModal').modal(); 
    var currentSlide = "*[data-slide-to='" + currentId + "']"; 
    var currentImagSlide = "*[data-image-id='" + currentId + "']"; 

    console.log(currentSlide); 

    $("*[data-slide-to]").removeClass("active"); 
    $(".item").removeClass("active"); 

    var item = $('.carousel-indicators').find(currentSlide); 
    var imgItem = $('.carousel-inner').find(currentImagSlide); 
    console.log(item); 
    item.addClass("active"); 
    imgItem.addClass("active"); 
}); 

Answer 2

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <img src="..." alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 
</div>

Zdecydowanie zajrzyj do karuzeli bootstrap