Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel
Added Tiny Carousel's .js and .css files to Bundles.config:
bundles.Add(new ScriptBundle("~/bundles/euro/js").
Include("~/Scripts/euro/*.js", "~/Scripts/euro/jquery.tinycarousel.js"));
bundles.Add(new StyleBundle("~/Content/euro/css").
Include("~/Content/euro/*.css", "~/Content/euro/tinycarousel.css"));
HTML View Code:
<div id="slider1">
<a class="buttons prev" href="#"><</a>
<div class="viewport">
<ul class="overview">
<li><img src="~/images/contact.png" /></li>
<li><img src="~/images/contact.png" /></li>
<li><img src="~/images/contact.png" /></li>
<li><img src="~/images/contact.png" /></li>
</ul>
</div>
<a class="buttons next" href="#">></a>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#slider1').tinycarousel();
});
</script>
Issue Faced:
The "prev" and "next" controls are not working properly and full images are not being displayed correctly.
Could this be due to an old/new jQuery conflict? Any help or suggestions would be appreciated. Is it possible to debug script or CSS file issues using Firebug?
Thank you for your assistance.