0

I am working with ASP.net MVC 5, I have created a bootstrap carousel/slideshow with 4 images, I want to get the id of the active slide on this carousel. Then, when an user is clicking on an submit button, I can redirect him to another page recording the active slide id in the URL.

<form method="post">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#mycarousel" data-slide-to="0" class=""></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>

    <a class="carousel-buttonleft" 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="carousel-buttonright" 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 class="carousel-inner" role="listbox" style="height:300px">

        <div class="item active" align="center">
            <div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
            <div class="carousel-caption">
                <p>NORMAL SKIN</p>
            </div>
            </a>
        </div>
        <div class="item ">
            <div align="center" class="carousel-image">
                <img src="../images/saumon.png" alt="saumon1" />
            </div>
            <div class="carousel-caption">
                <p>SILVER SKIN</p>
            </div>
        </div>

        <div class="item " align="center">
            <div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
            <div class="carousel-caption">
                <p>DEEP SKIN</p>
            </div>
        </div>

        <div class="item " align="center">
            <div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
            <div class="carousel-caption">
                <p>WITH SKIN</p>
            </div>
        </div>

    </div>
</div>

Thanks.

Ben
  • 37
  • 11

1 Answers1

2

sorry i'm currently using my phone. You must select by className.

In css :

.carousel-inner .item .active

In jQuery :

$('.carousel-inner .item .active')

then... .attr('id') and for the value .val() or .text()

In C#, I found this topic to show you how to iterate inside your page controls depending a specific className target : StackOverflow

Community
  • 1
  • 1
Doshibu
  • 156
  • 3
  • 10