Bootstrap slideshow

Question

I'm trying to make a bootstrap slideshow so that you glide over images. But images are not displayed. Only the following and previous buttons are displayed. I am using asp.net mvc5

this is 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; }); 

and this is 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> 

thanks

I need to edit this:

 html += html; 

But I do not know how to change this.

Here is how you will see it:

Answer 1

To make this simple

If you look at the HTML from http://getbootstrap.com/javascript/#carousel

Copy the first and add Razor , this should create a carousel for you.

 @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

Below is an example of thumbnails, clicking on the thumbnails will open a modal dialog box with a carousel.

I created a JSFiddle of your script: http://jsfiddle.net/u7hxy3zc/1/

As an example, you should use the following code and use in your presentation, renaming all models and parameters.

Note. The following code has not been compiled. May have syntax errors.

 // 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................... 

Then add this jQuery to the end to trigger the click event:

 $('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> 

Definitely look at the bootstrap carousel