tms web core not work with Bootstrap 3 Carousel

WEB TMS WEB Core
1

hi
i wanna to use Bootstrap 3 Carousel
but that not work
please guide me

<!-- Carousel container -->
<div id="my-pics" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">

<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#my-pics" data-slide-to="0" class="active"></li>
<li data-target="#my-pics" data-slide-to="1"></li>
<li data-target="#my-pics" data-slide-to="2"></li>
</ol>

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

<!-- Slide 1 -->
<div class="item active">
<img src="https://www.quackit.com/pix/samples/16l.jpg" alt="Sunset over beach">
</div>

<!-- Slide 2 -->
<div class="item">
<img src="https://www.quackit.com/pix/samples/4l.jpg" alt="Rob Roy Glacier">
</div>

<!-- Slide 3 -->
<div class="item">
<img src="https://www.quackit.com/pix/samples/15l.jpg" alt="Longtail boats at Phi Phi">
</div>

</div>

<!-- Previous/Next controls -->
<a class="left carousel-control" href="#my-pics" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#my-pics" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>

</div>
2

I see only HTML, so if you embed this in the page, TMS WEB Core framework should not interfere. It should render on the page just the same as a 100% HTML page. Did you check this out first on a standalone static HTML page?

3

hi dear Bruno
yes this code work corectly on html page
you can check this adress

this code show in web core
but did not work
did not navigate and change slides!!

4

Please provide a sample source project with which we can reproduce this.

5

Hi dear
please check this address:

http://www.mahsantii.com
you can use search key to apply change in html code

and also i upload sample here
pls check it
WEBCORE SAMPLE.zip (1.5 MB)

6

When I open your project, the carousel I see in the TMS WEB Core app is exactly the same as when I use it in a standalone HTML file, i.e.:

image
image405Ă—277 30.2 KB

I see nowhere in your code that you initialize the carousel with code

`$('.carousel').carousel()`

as the Bootstrap doc prescribes:

So, in a nutshell, this is your carousel code and it is not related to TMS WEB Core.
See also:

7

dear burno
this code work correctly on html
but not work in any tms web core
pls check it

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="productCarousel" class="carousel slide" data-ride="carousel" style="width:300px;margin:auto;">
                    <ol class="carousel-indicators">
                        <li data-target="#productCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#productCarousel" data-slide-to="1"></li>
                        <li data-target="#productCarousel" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="https://www.quackit.com/pix/samples/16l.jpg">
                        </div>
                        <div class="item">
                            <img src="https://www.quackit.com/pix/samples/4l.jpg">
                        </div>
                        <div class="item">
                            <img src="https://www.quackit.com/pix/samples/15l.jpg">
                        </div>
                    </div>
                    <a class="left carousel-control" href="#productCarousel" role="button" data-slide="prev">
                        <span class="icon-prev" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#productCarousel" role="button" data-slide="next">
                        <span class="icon-next" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

test.html (2.1 KB)
WEBCORE SAMPLE.zip (1.6 MB)

8

Your fixed project is here:
INDEX.zip (7.4 KB)

9

Thanks Dear Bruno
I did it
and it s work now.

WebDBResponsiveGrid1.EventStopPropagation := [];