I have a view like this image ,I want to use bootstrap carousel for show small images and I want to show 3 small image in one carousel slide and when hover on small images in carousel , big image showed in above. Can anyone help me how do it ? This is my code :

@foreach (var item in Model.SubGoods)
{
<div>
    <div>
        <div >
            <a href="@Url.Action("GoodDetails", "Home", new { id = @item.SubGoodID })">
                <img class="img-responsive" src="@Url.Content(item.SubGoodImage.ToString())" />
            </a>
        </div>
        @*------------------------*@
        @foreach (var item2 in Model.GoodDetails.Where(p => p.FKSubGoods == item.SubGoodID))
        {
            <div class="col-xs-3">
                <a href="#">
                    <img style="width:50px;height:50px;" src="@item2.DetailsImage" class="img-responsive">
                </a>
            </div>

        }
        @*--------------------------------*@
        <br style="clear:both;" />
        <div>
            <h5 class="h">Models : @item.SubGoodModelNumber</h5>
            <h5 class="h">Type : @item.SubGoodGender</h5>
 }

Related posts

Recent Viewed