Jump to content

Multiple bxsliders on the same page


DeniseO

Recommended Posts

Hi,

I wanted to show a list of brands on my homepage.

Similar to this slider where you can see a few images rotating.

I've been looking around the forum but I couldn't find where I need to create the properties for a second slider.

Would you please help me?

image.png.8fdef90ec5807335888081708f6a3191.png

Link to comment
Share on other sites

Welcome DeniseO! Glad to see you made it the forums.

A second slider (and third, fourth, etc) can be coded anywhere - assuming you want them all to behave the same way.

Just use a <ul class="bxslider"> list and you should be good to go.

Please let us know the level of detail you need to implement this.

Link to comment
Share on other sites

Hi!  Thanks for your prompt response! 😀

I was actually trying to give it a different look, more like a carousel.  And if possible locate it at the very bottom of my home page.

After the product lists and so.

Can I do that? 

Thanks!

Link to comment
Share on other sites

I'm not sure how to get more than one image in the view at once, but to get a different behavior, you would need to give it a different class, then add another call for the function in the Foundation skin template element.js_foot.php using that class identifier.

The <ul> list will need to be added manually at the very end of the Foundation skin template content.homepage.php.

After making edits to a document or skin template, be sure to have CubeCart clear it's internal cache - in order to see the changes.

 

 

Link to comment
Share on other sites

For example, give the second list a class of bxslider2. Then, make this edit:

In element.js_foot.php, find at the end of the last line:

{/literal}</script>

Add the following just before it:

$('.bxslider2').bxSlider({auto:true,captions:true,minSlides:2,maxSlides:3,slideWidth:400,moveSlides:1,slideMargin:0});

You may need to experiment with some things. I wasn't able to get rid of a thin slice of the image that just moved out of view on the left edge.

The docs for BXSlider are at:
https://bxslider.com/

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...