So having tried many different testimonial sliders from both the BSS Online library and external resources like Bootsnip, I was left unsatisfied. The main gripe I had was that they all required custom code, and couldn't be edited or styled like normal BSS components. So I decided to do something about it.
Behold, my Ultimate Testimonial Slider created OUT OF the standard Boostrap Carousel, totally customizable from within BSS using the standard styling tools in the Options and Look & Feel Panels. You can even animate elements. It's available in the Online Library - just search for Ultimate Testimonial Slider.
Live example here... http://thelightwavegroup.com/slider.html
Nice job, now animate it so it slides automatically. J/K :P
I've used a handful over the years that I tend to stick with and will try rebuilding one of them soon myself too so that it's more easily customizable. I have one that I use on this site here: https://pgbmbaptist.org/ that is in the sidebar at the bottom. It's automated and customizable within the the bss setups (not custom code fully, some little parts are) and works pretty slick as well. I have no idea where I got it, it's a bit old but has done the job nicely so far.
And an old site that has a lot of old code on it (they don't want to upgrade at all) has one at the bottom of the site that is also animated: https://nbliteracy.org/
Now what I want to do is an animated slider that has say 3 of them side by side that slides to the left one block at a time to show a new one on the right and so on. I've seen them so I'll find one an see what I can do with it. That's the beauty of this app. Sure we have to work around a handful of things, but ... it's still more powerful than most when it comes to ease of use/learning and speed of building things.
Now what I want to do is an animated slider that has say 3 of them side by side that slides to the left one block at a time to show a new one on the right and so on
I should be able to modify mine to look like this, since I'm using a standard bootstrap column to display the content. I shall have to try this. Hmmm... maybe I will make a whole series of these sliders.
After spending the better part of a day investigating how to display multiple slides with the Bootstrap Carousel where only one slide at a time moves in and out, I've concluded that it's just not worth the aggravation. I must have tried 6-7 different examples from Codepen, Bootsnip, and jsfiddle. And while they worked fine on those sites, I could not get them to work within BSS. For some reason, although the slides were obviously shrunken down so to display three side-by-side, only the first slide was ever visible. The slider worked, but out of three slides, only the first one was visible. Not only that, but I also tried the code in Pinegrow, which is basically the same as writing pure code, and same problem. I spent hours pulling my hair out and couldn't figure it out. Maybe it's a Bootstrap version thing (All of them were using Bootstrap 4.x versions below the latest version being used by BSS)
In any event, it's just not worth the time because I can easily do multi-slide type stuff in jssor slider, which is a million times more powerful than the Bootstrap Carousel, and it's only $12 a year. But it does mean going outside BSS to set it up. https://www.jssor.com
Well isn't that a beautiful tool. I've been using WowSlider for years, but they aren't updating things to newer code setups, falling behind the times etc. and still expecting the update fees for nothing really done each year so I stopped upgrading that one a few years back and have used the old version I've had (which hasn't changed in any of the newer ones, imagine that lol).
This looks pretty fresh and clean and I love that it has a content slider setup as well. I wish it wasn't just an "Online" builder, I prefer software, but for only 12 bux a year that might be worth the hassle of online builders. They tend to run slower than software is the only reason I rather have software installed, as well as being subject to having an internet connection and not losing it in mid creation etc.
I've had to go outside of BSS for WowSlider for years, so not a big deal to do it with a new one. Thanks for the share Printninja!
I've used WowSlider quite a bit in the past, but like you said, they're not doing much with it anymore. I also prefer software on my own computer, but the Jssor slider online builder has been a dream to use. And you can do a LOT more with it than you can with WowSlider. I built this whole thing with a single slide in Jssor slider, and the slider is much easier to add to a site. Just two folders, one for the images, and one for the .js
www.bustosmartialarts.com
The only thing that was weird, which took me a bit to figure out, was how you actually download the slider after you finish building it. You have to click the "view" button, and then in the window that opens, there's a small arrow where you can choose how to download it.
Thank you Printninja,
I am new to BSS but i know how to use jssor. My problem is that i don't know how i can bring the jssor slide to my project in BSS. Can Printninja help me out with sample of how to do it. Thanks
If you do a search for WowSlider, you'll come across a lot of posts that tell how I use/used that program's slider in my BSS projects. It's not hard once you get the hang of it, but it's been explained quite often so it shouldn't take much to find posts that one. :)
Jssor slider is very easy to bring into BSS, but word of warning... I have been emailing the developer for about 5 months about a bug I found in the last release with no response, so I have a fear that the project is no longer being actively developed. It still works fine, but I don't think there will be any new versions (nor will the bug get fixed, which is frustrating.)
Anyway, how you bring Jsorr sliders into BSS depends on how you are using the program. Are you building slideshows using their online page (ie. do you have an online jssor account?) or did you download the slider from their github respository?
I have online account, and to get a slider in to BBS, you simply open your slider project in the jssor workspace, choose "view" from the menu, and then click the "get" button in the upper right to download a zipped file of your slider that contains all its assets - the HTML, images and the javascript files (I usually download the jquery version which seems to work the best in BSS.)
Unzip the file and you will see an img folder and js folder. They get uploaded to your website's root folder. You can put them in your BSS website's export folder, or just upload them directly with your ftp program.
Then open the HTML file that jssor created and copy everything between...
<!-- #region Jssor Slider Begin -->
and
<!-- #endregion Jssor Slider End -->
and paste this into a BSS Custom Code component. I usually do something like Container > Row > Custom Code
Export and upload your website BSS, and your jssor slider should work.
I have also used Wow slider in some of my earlier projects, but I switched to jssor because it was more flexible, and offered a lot of cool animation features that Wow slider did not. I've used used something called fraction slider which does animation, but is a lot less user friendly, and requires more coding knowledge. Wow Slider is definitely the easiest of the bunch. Jssor is the most powerful, but it a bit more of a learning curve.
I though Jssor was the last slider I'd ever need until the recent bug I out found (which is related to adding "timing pauses" in animations that are called "idles." They no longer function in version 28.x. So where before you could have events on an animation timeline and simply add a 4 second "idle with a single click on the timeline, now you actually have to move the objects 4 seconds further down the timeline. It's not a total deal-breaker, but it's frustrating, because I used to use "idle" a lot in my slideshow animations to achieve various effects. jssor 27.5 doesn't have the problem, but their online builder only uses 28.0.
Printninja
Thank you for your explanation. Just as i said i am very new to BSS though is very lovely. Now i have created slide in Jssor, downloaded and extracted the files. I have copy HTML code from <!-- #region Jssor Slider Begin -- To <!-- #endregion Jssor Slider End --> I created Container > Row and right click row and convert to HTML it then show custom code ( i am not sure if i am right doing that ) but i was unable to paste copy html on it. This is where i stuck. Please can you or some help me from this point with screen short; please don't assume that its simple i should know it, sincerely what i know is what i explain please help me with screen short.
I created Container > Row and right click row and convert to HTML it then show custom code ( i am not sure if i am right doing that ) but i was unable to paste copy html on it.
This is wrong. Do not "convert your row to HTML!
Go to the Studio panel (upper left in the program workspace), look for the Custom Code component (use search, or just scroll to the Misc category at the bottom.) Drag a Custom Code component into your row,. Double click it (delete the bit of default code you see) and paste the Jssor slider HTML code that you copied. then hit apply.
You won't see the active slideshow until you publish your website, because BSS doesn't know where to look for the jssor folders in the Workspace or Browser Preview, but it will work on your live website.
Printninja
Thank so much for your explanation. I appreciate it. I got your message clear. so, what i did is to re-dragged and dropped Container > Row > Custom Code on the body, i right click on the custom code so as to paste copied jssor html but it doesn't bring pasting or any option for me to click on. I also want to know how i can set the slider images to be responsive since you said the slides wouldn't show on BSS to see how it looks except on live website. Please i need more detail if possible with screen short example.
Thanks.
Not to sound rude, but I get paid by the hour to build websites for living. I don't have the time or inclination to create a step-by-step lesson with "screenshots" on how to install a third party application into Bootstrap Studio.
When you use the BSS custom code component, you copy your code from wherever (ctrl-c), double-click the BSS custom code component (it opens in the HTML/Styles panel next to the Styles tab) and then paste your code (ctrl-v) inside it, and hit Apply.
Read the Bootstrap Studio tutorials
https://bootstrapstudio.io/tutorials/writing-html
Read the Jssor Slider tutorials
https://www.jssor.com/tutorial/
And teach yourself. That's how you learn to build websites if you don't want to pay other people to do it.
Hello guys, for anyone at this point in time looking have a simple clients slider in their website… I published a online component for BS5 in BSS. Just type “client slider” to find it.