I try to use the transition Photos:

Question

1.00/5 (1 vote)

See more:

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner" role="listbox">
                    @{
                int x = 0;
                foreach (var img in Model.POIsImages)
                {
                    @Html.Hidden("imageids[" + x + "]", img.ImageId);
                        <div class="item active">
                            <input type="hidden" name="keep[@x]" value="1" data-imageid="@x" />
                                <a class="darken" >
                            <img src="@Url.RouteUrl("Media", new { id = img.FileId })" width="80" height="80" />
                            <span class="hoverText" data-imageid="@x">Remove</span>
                                </a>
                        </div>
                    @Html.Hidden("imageids[" + x + "]", img.ImageId);
                        <div class="item">
                            <input type="hidden" name="keep[@x]" value="1" data-imageid="@x" />
                            <a class="darken" >
                                <img src="@Url.RouteUrl("Media", new { id = img.FileId })" width="80" height="80" />
                                <span class="hoverText" data-imageid="@x">Remove</span>
                            </a>
                        </div>

                    x++;
                }
                @Html.Hidden("NumberofImages", x);
                    }

                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>

He put all the pictures together - does not create DIV for each image,
How do I correct it-pass image image and will not appear all together??

Posted 1-Sep-15 1:32am

Member 11919288

Updated 1-Sep-15 1:52am

v2

Add a Solution

Comments

CHill60 1-Sep-15 7:43am

Not clear - use Improve question link to explain what your problem is. Where did you get this code from?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-09-01T06:05:00

Solution 1

The problem is that you're rendering two carousel items for each image, one of which is marked as "active". Looking at the documentation[^], only the first item should be marked as "active".

Try changing your loop to:

int x = 0;
string cssClass = "item active";
foreach (var img in Model.POIsImages)
{
    @Html.Hidden("imageids[" + x + "]", img.ImageId);
    <div class="@cssClass">
        ...
    </div>
    
    cssClass = "item";
    x++;
}

Posted 1-Sep-15 6:05am

Richard Deeming

Updated 1-Sep-15 6:07am

v2

Comments

Member 11919288 8-Sep-15 2:10am

It's genius, and works beautifully! Thank you!

Member 11919288 9-Sep-15 5:47am

I tried the example in this way:
<div class="carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
@{
int x = 0;
int x1 = 0;
string cssClass = "item active";
foreach (var img in Model.POIsImages)
{
@Html.Hidden("imageids[" + x1 + "]", img.ImageId);
<div class="@cssClass">
<input type="hidden" name="keep[@x]" value="1" data-imageid="@x" />

<img id="image" class="img-rounded" data-imageid="@x" src="@Url.RouteUrl("Media", new { id = img.FileId })" width="80" height="80" />
<span class="hoverText" data-imageid="@x">Remove</span>

</div>
x1++;
x++;

}
@Html.Hidden("NumberofImages", x);
}
</div>

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

</div>
But the result of this one image after another, while the side has arrows (2 Hitzim- one right and one left on all images that meet together one after the other.
Why? How can we fix it?

Member 11919288 9-Sep-15 5:48am

the result of this one image after another, while the side has arrows (2 Hitzim- one right and one left on all images that meet together one after the other.
Why? How can we fix it?
thank you!!!!

Richard Deeming 14-Sep-15 8:13am

You haven't changed the cssClass from "item active" to "item" within the loop. You're still trying to render every slide as active, which is why they're all appearing at once.

Member 11919288 16-Sep-15 2:52am

Thank you very much!
I still have two annoying things:
1. When I add images is not stopped me in the form of Carousel - only after I do save and edit again - see it in the form of Carousel.
2. When I press the arrow he passes an empty picture - and then do not see any images, only the keys.