Hi! Need some help ... How do we do a fading images carousel in bss Thanks
For Bootstrap 3 there is this https://bootstrapstudio.io/forums/topic/jumbotron-with-fading-images/
For Bootstrap 4 there is this
.carousel-fade .carousel-inner .carousel-item {
-webkit-transition-property:opacity;
transition-property:opacity;
}
.carousel-fade .carousel-inner .active.carousel-item-left, .carousel-fade .carousel-inner .active.carousel-item-right, .carousel-fade .carousel-inner .carousel-item {
opacity:0;
}
.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
opacity:1;
}
.carousel-fade .carousel-inner .active.carousel-item-left, .carousel-fade .carousel-inner .active.carousel-item-right, .carousel-fade .carousel-inner .carousel-item-next, .carousel-fade .carousel-inner .carousel-item-prev {
left:0;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
You will need to add carousel-fade class to the parent element that has the class carousel so it will read like class="carousel carousel-fade"
You can see it in action here http://saj.bss.design/
Saj
Thanks Saj, How can I go now about managing the fading or animation timer or duration ... etc
Regards
Select the Carousel block in the Overview pane (bottom/left) then select the Gear Cog icon in the Options pane (top/right) set the interval (ms) to frequency between slide changes.
It seems there's something bugged with the timer as 1,500ms transitions faster then the preset 500ms.
But that is what there is for options.
Saj
Dear Saj, would you please let me know where to find this : .carousel-fade .carousel-inner .carousel-item { -webkit-transition-property:opacity; transition-property:opacity; }
.carousel-fade .carousel-inner .active.carousel-item-left, .carousel-fade .carousel-inner .active.carousel-item-right, .carousel-fade .carousel-inner .carousel-item { opacity:0; }
.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right { opacity:1; }
.carousel-fade .carousel-inner .active.carousel-item-left, .carousel-fade .carousel-inner .active.carousel-item-right, .carousel-fade .carousel-inner .carousel-item-next, .carousel-fade .carousel-inner .carousel-item-prev { left:0; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } step by step please ... I'm really new
Copy that snippet of CSS code. Then in the Design pane (bottom/right) expand the Styles menu and double click on the styles.css file.
This opens the STYLE tab section (middle/bottom/right) with the styles.css file tab selected. Click in that window and then paste the CSS code.
Saj
Thanks for your help Saj, Could u help me with this http://super-queen-9106.bss.design/ ? How can I make the transitions slow and smooth like this http://wowslider.com/bootstrap-carousel-demo.html# [Fade effect] ... also would you please tell me if I can add some animating or transitional text with each color ... like in here http://wowslider.com/wordpress-slider-plugin-absent-cube-demo.html or here http://wowslider.com/image-slider-jquery-epsilon-collage-demo.html (with details please) Regards My css : .carousel-fade .carousel-inner .carousel-item { transition-property:opacity; -webkit-transition-property:opacity; transition:opacity 0.75s ease-in-out; -webkit-transition:opacity 0.75s ease-in-out; opacity:1; }
.carousel-fade .carousel-inner .active.carousel-item-left, .carousel-fade .carousel-inner .active.carousel-item-right, .carousel-fade .carousel-inner .carousel-item { opacity:0; }
.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left, .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right { opacity:1; }
.carousel-fade .carousel-inner .active.carousel-item-left, .carousel-fade .carousel-inner .active.carousel-item-right, .carousel-fade .carousel-inner .carousel-item-next, .carousel-fade .carousel-inner .carousel-item-prev { left:0; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); }
Unfortunately, your comparing Apples to Oranges here. The Carousel that is provided by the Bootstrap Developers is fairly basic in function compared to other sliders like WoWSlider and JSSOR slider.
What you have to work with is found here https://getbootstrap.com/docs/4.0/components/carousel/
The Bootstrap Studio app options to control the cycling between the slides is in the Options pane (top/right/Gear Icon). First select the "Carousel" in the Overview pane (bottom/left) then go to the options.
I can't turn this Carousel into a WoWSlider carousel, the functions just aren't there. I found the CSS online from somewhere and it was slightly modified to work a little nicer.
I don't know and never worked with WoWSlider so I can't help you with that.
I the only thing I can think of to try to smooth the color transitions is to change this part of the CSS
.carousel-fade .carousel-inner .carousel-item {
-webkit-transition: opacity .65s cubic-bezier(0.45, 0.05, 0.55, 0.95);
transition: opacity .65s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
At this point though your getting beyond what I know. I've never really worked that much with transitions and transforms etc...
Saj
If you have access to use WowSlider, why not just use it? That's what I use all the time. What I do is not import any files at all, I create the gallery/slider, put the files on the server where they will reside when the site is exported and uploaded. I put the code that WowSlider provides into a Custom Code box where I want it to be, I add the head code into the Page head area (right click over the page in the list of pages and choose properties and add it there in the Head area).
That's it. No it will not show up in your design in BSS preview or browser preview, but it will be perfectly set up when you upload the files if you've added the code to the page(s) correctly. Be sure to reorder the CSS and JS so the order is correct. Very simple process and if you can bypass the visual part of not being able to preview then you're fine.
P.S. When you set up your slider/gallery be sure to set it up to use Relative paths rather than absolute so that everything will work smoothly on export. You can probably not check the box for using relative paths and specify the full path, then the gallery may show up in previews, but the previews are glitchy anyways at this time so I don't bother, I use the relative paths and be done with it.
Hope that helps :)
Thanks for your help jo ... would be great if you could help with a detailed example so I can follow it step by step
Well just follow these steps and you'll do just perfect:
1. Create your gallery as normal with WowSlider. ........ a. Be sure to check the box in the settings of each gallery that tells it to use Relative Paths. Faster loading that way from what I've seen so far. 2. In BSS create a column where you want your gallery to be. 3. Drag a Custom Code element from the Default Components list (last section in the list). 4. Publish your gallery to a folder on your computer (desktop or where ever works best for you) ........ a. When you publish, make sure you tell it to open the gallery in an html window also. This gives you the code right at your fingertips then. 5. Copy the code that goes to the head area of your page and paste it to the Head Content section of your page (not to be confused with global project Head area). ........ a. To do this right click over the page you want the gallery on in the Pages section of the Design pane of BSS. Choose Properties and click the Head Content tab. Paste the code that WowSlider gives you for that area into that box and click Save. This puts this code "only" on that page. 6. Open the Custom Code element that you created so you can edit the code there. Replace it completely with the code that WowSlider gave you for the gallery itself. 7. Now from here I upload the 2 folders that WowSlider created (dataX and engineX) into the root directory of your website where your html pages usually reside.
This setup keeps you from having to bother with file order for JS and CSS as it's all in that head code which will be put where it needs to be, haven't had any conflicts with it so far doing it this way.
Save your project in BSS, export it and upload it and see what it looks like. You may need to make adjustments, and although this is a little more hassle than a built in gallery system might be, I've not ever had to make adjustments more than once on any site. I have the system down and they almost always turn out exactly right every time, first try. The first one or two may take a little adjusting till you get things how you want them for your particular galleries, after that it's a breeze and less complicated simply because I don't have all those images in the assets folder that have to reupload every time I upload the img folder (which is only when I make changes to it these days)
Note: Use the code exactly as it's given to you. Don't worry about jquery file conflicts, it seems to work them out itself without any issues even though it's calling 2 of them on the page. Not sure why, but I don't question things when they work and don't give errors lol.
Note: If you want to be able to view it in BSS and the browser preview, what I did when I started on these was left out the check box for setting the images to relative paths. Get your gallery set up how you like it (be sure you realize the gallery will not view totally correctly within BSS, something wrong in the viewer and they are working on it for a while now, so far no fix yet) which you can view nicely in the Browser previews. Once you get it how you like it DON'T go through the code and adjust all the paths to relative, do it the easy way and republish the gallery with the check box in using relative paths, the only thing you'll need to do is reupload the engineX folder (be sure to delete the other one, don't overwrite it), and repaste the code for the gallery into the Custom Code box. Everything else should be able to remain as it was.
Hope that helps and let me know if you get stuck or need more assistance.
Thanks jo ... I'll follow your steps and let u know
Did it jo and it worked perfectly ... didn't bother too much being able to view it in BSS couldn't do it or didn't do it the right way ... Anyway thanks a lot for your help and one more thing ... do u have any idea about how to get a transitional text to appear with every slide ?
Regards
Seems like the BSS team has been listening. A Carousel fade transition has been added in Version 4.1.7. Much appreciated!
You're quite welcome anx, glad it was helpful. As for the slider, I haven't really used any of the sliders in BSS so unfortunately no. My clients so far haven't asked for having text on their galleries or any intro sliders as of yet other than one a couple years ago which we used another program for.
@Phil, thanks for that info!