[Solved] .bx-wrapper style multiple slideshow

[innocuous]

Hi,

I am using default homeslider module on homepage to show slideshow.

 

I added a simple div to header.tpl where I would like to show a simple text slideshow.

 

Problem is default .bx-wrapper height is set to 350px and using below code creates a 350px height div. IF I force specify bx-wrapper height, then the content below the homeslider disappears.

 

How do I fix this?

Top header slideshow is:10px height

HOmeslider slideshow is : 350px height.

 

 

--------------------------------------------

I added the following to header.tpl in header section

--------------------------------------------

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script src="jquery.bxSlider.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#slider2').bxSlider({

auto: true,

autoControls: false

});

});

</script>

 

AND THE DIV in body:

<div id="slider2" style="position:absolute;margin-top:5px;padding-left:5px;height:5px;font-size:12px;color:rgb(110,110,110)">

 

<div>Free Shipping!*</div>

<div>Cash on Delivery</div>

<div>100% secure payment</div>

 

</div>

Edited December 4, 2012 by innocuous (see edit history)

[innocuous]

Solved this by using simple jquery script instead of bxslider.

To anyone who wants it:

 

Include in head section:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

 

<script type="text/javascript">

function tick(){

$('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });

}

setInterval(function(){ tick () }, 5000);

</script>

 

Then in body use following code:

<ul id="ticker_01" style="position:absolute;margin-top:5px;padding-left:5px;height:25px;font-size:12px;color:rgb(110,110,110);overflow:hidden">

<li>

Free Shipping

</li>

<li>

Cash on Delivery

</li>

<li>

100% Secure Shopping

</li>

</ul>