DeniseO Posted March 30, 2020 Share Posted March 30, 2020 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? Link to comment Share on other sites More sharing options...
bsmither Posted March 30, 2020 Share Posted March 30, 2020 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 More sharing options...
DeniseO Posted March 30, 2020 Author Share Posted March 30, 2020 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 More sharing options...
bsmither Posted March 30, 2020 Share Posted March 30, 2020 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 More sharing options...
bsmither Posted March 30, 2020 Share Posted March 30, 2020 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 More sharing options...
DeniseO Posted March 30, 2020 Author Share Posted March 30, 2020 Thanks bsmither! Worked perfectly! Now I need to work on my images to make it look nicer. Thanks a lot for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.