2

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>
  • Where did you put your jquery.bxslider.min.js and jquery.bxslider.css files? – John Apr 18 '17 at 8:53
  • @John - Right now I created simple php page in folder test. In test folder I have put both js and css file. – jassi Apr 18 '17 at 8:55
  • I checked the same code and its working in my machine. – John Apr 18 '17 at 9:12
  • @John yes code is working fine. But I want to know how to put code in Home page using magento 1.9 . – jassi Apr 18 '17 at 9:15
  • You can put js and css in magento's skin folder and then include using xml files for homepage. – John Apr 18 '17 at 9:19
0

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>
0

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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.