Wes81 Posted April 14, 2015 Share Posted April 14, 2015 Hi,how do you use the BXSlider. I can't make it workKind RegardsWesley Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 14, 2015 Share Posted April 14, 2015 For which skin?Foundation from CC602 needs an edit. Find near the bottom of the template file main.php:$('.bxslider').bxSlider({captions:true});Change to:$('.bxslider').bxSlider({auto:true, captions:true});For any other skin, follow these instructions:1. From /skins/foundation/js/vendor/, copy jquery.bxslider.min.js to /js/plugins/.2. From /skins/foundation/css/, copy jquery.bxslider.css to /js/styles/.3. Create the folder /js/images/.4. From /skins/foundation/images/, copy the folder /bxslider/ to /js/images/.5. Create the new file /skins/YOUR_SKIN/js/bxslider_start.js. The contents of this file will be:$('.bxslider').bxSlider({auto:true, captions:true});Decide where you want the slider. For example, let's make the slider appear as part of the Homepage document.In admin, Documents, edit the HomePage document. Switch the editor to Source mode. The slider list must be in this format: <ul class="bxslider"> <li><img src="location/of/slide1.jpg" title="Promotional Message One" /></li> <li><img src="location/of/slide2.jpg" /></li> <li><img src="location/of/slide3.jpg" title="Promotional Message Two" /></li> </ul>Reload the Homepage. Quote Link to comment Share on other sites More sharing options...
Wes81 Posted April 14, 2015 Author Share Posted April 14, 2015 Hi,I edited it in the the main.php from the foundation file but still no result so farKind RegardsWesley Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 14, 2015 Share Posted April 14, 2015 Can we have a web address to look for ourselves? Quote Link to comment Share on other sites More sharing options...
Wes81 Posted April 15, 2015 Author Share Posted April 15, 2015 www.ncom.be/webshopKind RegardsWesley Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 15, 2015 Share Posted April 15, 2015 I would like for you make this edit, then test. In the file /classes/gui.class.php: Find near line 161: $js = glob('skins/'.$this->_skin.'/'.'{js,scripts}/*.js', GLOB_BRACE | GLOB_NOSORT); Change to: $js = glob('skins/'.$this->_skin.'/'.'{js,scripts}/*.js', GLOB_BRACE); // Issue #465 | GLOB_NOSORT);I see in the HTML of your page that the javascript files are not getting loaded in the proper order. As such, there will be malfunctions.Once the files are being loaded in the proper order, we will see if the bxslider code will function properly.Decide where you want the slider. For example, let's make the slider appear as part of the Homepage document.In admin, Documents, edit the HomePage document. Switch the editor to Source mode. The slider list must be in this format:<ul class="bxslider"> <li><img src="location/of/slide1.jpg" title="Promotional Message One" /></li> <li><img src="location/of/slide2.jpg" /></li> <li><img src="location/of/slide3.jpg" title="Promotional Message Two" /></li> </ul> Quote Link to comment Share on other sites More sharing options...
Wes81 Posted April 15, 2015 Author Share Posted April 15, 2015 Hi,Thx that's already working so where do I start to put pictures in it?Kind RegardsWesley Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 15, 2015 Share Posted April 15, 2015 The code above suggests that you replace "location/of/slide1.jpg" and the rest with the actual location of the images you want to show. Quote Link to comment Share on other sites More sharing options...
Wes81 Posted April 15, 2015 Author Share Posted April 15, 2015 I put the images in /domains/ncom.be/public_html/webshop/skins/foundation/images/examples Quote Link to comment Share on other sites More sharing options...
bsmither Posted April 15, 2015 Share Posted April 15, 2015 Change it to:"skins/foundation/images/examples/slide1.jpg""skins/foundation/images/examples/slide2.jpg""skins/foundation/images/examples/slide3.jpg" Quote Link to comment Share on other sites More sharing options...
papadatos Posted March 30, 2016 Share Posted March 30, 2016 A little correction for the back-front arrows. Case: 4. From /skins/foundation/images/, copy the folder /bxslider/ to /js/images/. must be: 4 The two files from /skins/foundation/images/bxslider/(bx_loader.gif, controls.png), must be copied to /js/styles/images/ (bx_loader.gif, controls.png) . Before however doing the above we have to rename the file controls.png to bxcontrols.png and edit the file jquery.bxslider.css renaming in four cases (lines 106-114-143-157) the referred file controls.png to bxcontrols.png That's all... Quote Link to comment Share on other sites More sharing options...
Brian T Posted March 4, 2018 Share Posted March 4, 2018 (edited) I've just managed to put a carousel of pictures on my website main page, www.mentalstarters.co.uk following the above instructions, and this has worked well, apart from slightly unsightly arrows to the right and left of the graphic - is there any way of making them look neater by any chance. Also it is possible to turn off the auto advance easily, so that the user has to manually advance the slides? Many thanks Edited March 4, 2018 by Brian T additional question Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 4, 2018 Share Posted March 4, 2018 The problem with the left/right arrow buttons is that the file of the controls sprite belongs to a different effect. Suggest that you edit the /js/styles/jquery.bxslider.css so that the controls.png file called would be bx_slider_controls.png, then copy the controls.png from the Foundation skin, renaming it bx_slider_controls.png. Then force the browser to reload the page's resources. 1 Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 4, 2018 Share Posted March 4, 2018 Somewhere, you have this: $('.bxslider').bxSlider({auto:true,captions:true}); Change to: $('.bxslider').bxSlider({autoStart:false,auto:false,captions:true}); 1 Quote Link to comment Share on other sites More sharing options...
Brian T Posted March 5, 2018 Share Posted March 5, 2018 3 hours ago, bsmither said: The problem with the left/right arrow buttons is that the file of the controls sprite belongs to a different effect. Suggest that you edit the /js/styles/jquery.bxslider.css so that the controls.png file called would be bx_slider_controls.png, then copy the controls.png from the Foundation skin, renaming it bx_slider_controls.png. Then force the browser to reload the page's resources. I've done the above, I think, but it didn't work, so I'm not sure what I did wrong. (I've changed the graphic to manual changing only ok though ) Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 5, 2018 Share Posted March 5, 2018 In the file /js/styles/jquery.bxslider.css, you must replace controls.png with bx_slider_controls.png. Line numbers affected are: 106, 114, 143, 157 1 Quote Link to comment Share on other sites More sharing options...
Brian T Posted March 5, 2018 Share Posted March 5, 2018 Done that (I thought I did it the first time, but it mustn't have saved correctly), and the file has the correct replacements now, but still not showing a nice arrow. Quote Link to comment Share on other sites More sharing options...
bsmither Posted March 5, 2018 Share Posted March 5, 2018 (edited) In the folder /js/styles/, do you have two copies of jquery.bxslider.css -- perhaps one being named something like orig_jquery.bxslider.css? If so, then styles.php is picking up both copies, with the original taking precedence over the edited. I am also not finding the file /js/styles/images/bx_slider_controls.png. Edited March 5, 2018 by bsmither 1 Quote Link to comment Share on other sites More sharing options...
Brian T Posted March 5, 2018 Share Posted March 5, 2018 Fantastic - Many thanks - That's sorted it. I thought I'd done all of the above, but some of it didn't seem to have saved. Quote Link to comment Share on other sites More sharing options...
jim paradise Posted July 5, 2020 Share Posted July 5, 2020 hi, is there anyway to change the speed in transitions between each slide regards JIm Quote Link to comment Share on other sites More sharing options...
bsmither Posted July 5, 2020 Share Posted July 5, 2020 Please examine the Foundation skin template element.js_foot.php. There is a <script> tag as the last line. Find this part of that <script> tag: $('.bxslider').bxSlider({auto:true,captions:true}); Change just that part to: $('.bxslider').bxSlider({auto:true,captions:true,pause:##1,speed:##2}); So, ##1 is the delay in milliseconds (default 4000) between a transition. And ##2 is the time expended in milliseconds (default 500) in performing that slide transition. See more options at: https://bxslider.com/options/ Quote Link to comment Share on other sites More sharing options...
jim paradise Posted July 8, 2020 Share Posted July 8, 2020 thank you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.