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

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

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

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 := [];
1 Like