Currently, I'm in the process of incorporating a straightforward modal into my gallery design. I have a slide carousel positioned at the top of the page, while at the bottom, there are thumbnails of the gallery.
While the slide carousel control button is functioning properly, the gallery isn't displaying as expected. Instead of showing the Glyphicon symbols for next and previous (< and >), it's displaying as Next>> and Prev<< Text
Here is a snippet of my code for the gallery:
<section class="bg-dark" id="gall">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading"><i class="fa fa-1x fa-picture-o wow bounceIn text-primary"></i> Workshop Gallery </h2>
<hr class="primary">
</div>
</div>
<ul class="row">
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/1.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/2.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/3.jpg">
</li>
<li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
<img class="img-responsive" src="resources/images/workshop/4.jpg">
</li>
<li class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="img-responsive" src="resources/images/workshop/5.jpg">
</li>
</ul>
</div; <!-- /container -->
// More code here...
My custom CSS contains styles for the gallery and carousel elements, ensuring proper display and functionality.
For further details, check out the included code snippets and the corresponding screenshot for reference. Any suggestions on resolving the carousel control issue are welcome and appreciated.