MVC Static files not doing its functionality - asp.net-mvc

Question

I am trying to include a jquery plugin in an MVC application via bundling css and js files.
But the functionality does not work.
I am aware about how to bundle the files with bundles.add(….)
What exactly am I doing wrong?
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/js/rainbow.min.js",
"~/js/tiksluscarousel.js"));
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/animate.css",
"~/css/normalize.css",
"~/css/tiksluscarousel.css",
"~/css/github.css"));
#Styles.Render("~/bundles/css")
#Scripts.Render("~/bundles/js")
Global asax: BundleConfig.RegisterBundles(BundleTable.Bundles);
Index.cshtml:
<div id="fruits">
<ul>
<li><img src="~/images/fruits1.jpg" /></li>
<li><img src="~/images/fruits2.jpg" /></li>
<li><img src="~/images/fruits3.jpg" /></li>
<li><img src="~/images/fruits4.jpg" /></li>
<li><img src="~/images/fruits5.jpg" /></li>
<li><img src="~/images/fruits6.jpg" /></li>
<li><img src="~/images/fruits7.jpg" /></li>
<li><img src="~/images/fruits8.jpg" /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#fruits").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1,type:'zoom'});
});
</script>

Answer 1

After adding the files to a bundle you'll need to reference the bundle in your headers, and be sure to register your bundles in your Global.asax file i.e.
Global file:
// Registers default bundle collection
BundleConfig.RegisterBundles(BundleTable.Bundles);
You also need to split the bundles to register styles and scripts separately so in your headers you can run:
Layout Sheet:
#Styles.Render("~/bundleLocation/cssBundleName")
#Scripts.Render("~/bundleLocation/scriptBundleName")
The final item (which is what this one is), the bundle names can't be the same as the folder locations of the bundles so where there is
bundles.Add(new ScriptBundle("~/bundles/js").Include(
"~/js/rainbow.min.js",
"~/js/tiksluscarousel.js"));
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/css/animate.css",
"~/css/normalize.css",
"~/css/tiksluscarousel.css",
"~/css/github.css"));
You'll just need to rename the ScriptBundles to something other than /js and /css
i.e
bundles.Add(new ScriptBundle("~/bundles/jsScripts").Include(
"~/js/rainbow.min.js",
"~/js/tiksluscarousel.js"));
bundles.Add(new StyleBundle("~/bundles/cssStyles").Include(
"~/css/animate.css",
"~/css/normalize.css",
"~/css/tiksluscarousel.css",
"~/css/github.css"));
This is just a routing convention of MVC where it will be confused by the bundle name and attempt to link a non-existing folder