I am currently facing an issue with a carousel that contains multiple images and text. In order to make the text responsive, I have implemented a script called FlowText. The script works perfectly on the initial carousel image (the active one), but as soon as the carousel moves, it fails to resize the text accordingly. I suspect that the issue lies in the fact that the script only runs once, and once the carousel moves, it ceases to function properly. How can I modify the script so that it dynamically resizes the text every time the carousel moves?
<div class="carousel slide" id="imageCarousel3" data-interval="2000"
data-ride="carousel" data-pause="hover" data-wrap="true">
<ol class="carousel-indicators">
<li data-target="#imageCarousel3" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel3" data-slide-to="1"></li>
... (remaining list items)
<li data-target="#imageCarousel3" data-slide-to="14"></li>
</ol>
<div class="carousel-inner" style="max-width: 946px; overflow: hidden; margin: 0 auto;">
<div class="item active">
<img src="/Content/Images/Slide21.jpg" class="img-responsive">
<div class="flowtext1" style="width: 50%; height: 100%; top: 0px; right: 0px; position: absolute; background-color: rgba(0, 0, 0, 0.75);">
<div class="carousel-caption" style="top: 0%; position: absolute;">
<p style="font-family: 'Open Sans Light'; font-size: 1.9em; text-align: center; left: 20%;"><strong>DSM e-FRE</strong></p>
<p style="font-family: 'Open Sans Light'; font-size: 1.5em; text-align: center;"><strong>Freight Management Systems</strong></p>
</div>
... (remaining carousel content)
</div>
</div>
<div class="item">
<img src="~/Content/Images/Slide22.jpg" class="img-responsive">
<div class="flowtext2" style="width: 50%; height: 100%; top: 0px; right: 0px; position: absolute; background-color: rgba(0, 0, 0, 0.75);">
<div class="carousel-caption" style="top: 0%; position: absolute;">
<p style="font-family: 'Open Sans Light'; font-size: 1.9em; text-align: center; left: 20%;"><strong>DSM e-HMS</strong></p>
<p style="font-family: 'Open Sans Light'; font-size: 1.4em; text-align: center;"><strong>Haulage Management Systems</strong></p>
</div>
... (remaining carousel content)
</div>
</div>
For the script section:
@section scripts{
<script src="~/Scripts/jquery.fittext.js"></script>
<script src="~/Scripts/flowtype.js"></script>
<script type="text/javascript">
$(".flowtext1").flowtype();
</script>
<script type="text/javascript">
$("#fittext1").fitText();
$("#fittext2").fitText(1.2);
$("#fittext3").fitText(1.1, { minFontSize: '10px', maxFontSize: '75px' });
</script>
}
Lastly, here are the images attached. The first image carousel works fine, while the second one does not resize properly.
EDIT: Changed from id to class as suggested.
However, the functionality is still not as expected. Even in the regular size (desktop) view, the text is extremely small now, except for the first slide.
Any suggestions or assistance would be greatly appreciated?