How to add slider in homepage? [closed]

Question

How to put code in home page for bxslider?

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <!-- bxSlider Javascript file -->
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="jquery.bxslider.css" rel="stylesheet" />
   <ul class="bxslider">
      <li><img src="images/tree_root.jpg" title="Funky roots testing" /></li>
      <li><img src="images/hill_road.jpg" title="The long and winding road dancing" /></li>
      <li><img src="images/trees.jpg" title="Happy trees singing" /></li>
 </ul>
<script>
   jQuery('.bxslider').bxSlider({
   mode: 'fade',
   captions: true
  });
</script>

Answer 1

Create custom module.

app\design\frontend\base\default\layout\slider.xml

 <?xml version="1.0"?>   
 <layout version="0.1.0">
<default>
    <reference name="head">
         <action method="addJs"><script>bannerslider/jquery.bxslider.min.js</script></action>
         <action method="addCss"><stylesheet>css/bannerslider/css/jquery.bxslider.css</stylesheet></action>
    </reference>
</default>

<slider_index_index>   
<reference name="root">   
  <action method="setTemplate"><template>page/1column.phtml</template></action>   
</reference>   
 <reference name="content">   
  <block type="slider/index" name="slider_index" template="slider/index.phtml"/>   
</reference>   
</slider_index_index> 
</layout>

app\design\frontend\base\default\template\slider\index.phtml

  <ul class="bxslider">
     <li><img src="images/tree_root.jpg" title="Funky roots testing" /></li>
     <li><img src="images/hill_road.jpg" title="The long and winding road dancing" /></li>
     <li><img src="images/trees.jpg" title="Happy trees singing" /></li>
 </ul>
 <script>
    jQuery('.bxslider').bxSlider({
    mode: 'fade',
    captions: true
   });
 </script>

Answer 2

You have two things to do if of course your code works well

1) create template: in app/design/template/{your package}/{your theme}/template/page/slider.phtml then put your slider code inside

2) declare it in xml: in your local.xml you put this:

<cms_index_index>
    <reference name="root">
        <block type="core/template"  name="name.slider" before="content" template="page/slider.phtml" after="breadcrumbs" />
    </reference>
</cms_index_index>