Carousel example - Post ID 265707

User 325858 Photo


Registered User
20 posts

I've been messing around with BB and was able to get a working carousel up and running. I wanted to do a slider as a full width background across the top of the page (hero). It is working, however I was unable to figure out how to change the transition to a fade-in ease-in/out, so it just changes by carousel's default properties. Maybe someone else can take a stab at trying to change the transition properties?

I have attached the project file and provided a link to my example.

https://dl.dropboxusercontent.com/u/246 … index.html
Attachments:
User 244626 Photo


Registered User
811 posts

Very nice work Frank ! I was able to modify the transition to a sliding one by just adding the class "slide" next to "carousel" in the top container.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Also to note adding data pause attribute and setting to "hover" pauses slideshow on mouseover.
Bootstrap 5 CSS Grid.
User 244626 Photo


Registered User
811 posts

Here is a solution that may work for you.....the credit goes to this link:
http://www.1squarepear.com/adding-a-res … of-slides/

I used the class "fade" added next to "carousel" in the main container. (You will want to add this at the very last as everything disappears). I started with a blank BS3 instead of BS4 and built using your project guide and the link instructions above. I do not know if that makes a difference. The link states it works for BS3.

I used a list container for the pictures and did not use the background setting as in your project. There are quite a few settings in the attributes to be made but the link above helped me sort through it. Pasting the final code into the Head for control of the fade did the trick.

Hope this helps.....
http://gluexp.coffeecup.com/index.html
Thanks Frank !
Bootstrap 5 CSS Grid.
User 325858 Photo


Registered User
20 posts

Thanks Twinstream for putting in all of the work!

I went back and reconstructed a fresh slider because my original was showing weird anomalies when it was sliding. I have a much better working example attached and added the pause on hover attribute which will also allow for more interaction with each slide such as a button which I added to the first slide.

I selected the parent container (carousel) and created a component in my file so anyone that wants to download they can open and save as a theme for when they want to use in a project.

I am going to look at your example and the links and try to create a fade version based on my specs, and if I can get that working I'll post another file here to share.

https://dl.dropboxusercontent.com/u/246 … index.html
Attachments:
User 325858 Photo


Registered User
20 posts

Geeez! I went back and fixed the typo on "Havana", I know it's anal but, it was bugging me Ha!
User 325858 Photo


Registered User
20 posts

Two versions of the full width slider, one slides, the other fades. The fader version has code dependency in the head. I wasn't able to figure out how to translate those settings over to the visual UI, but it is only a little css and it works.
I also had to adjust the z-index for the .active slide so items for interaction would be clickable.

Here's the working example: https://dl.dropboxusercontent.com/u/246 … index.html

I saved as a theme with both sliders as components so you have your choice. I zipped up the three files the theme uses and you can open the themes folder under "File" in BB and then unzip and save the files there to have access to them each time you open with theme. Enjoy!


Attachments:
User 244626 Photo


Registered User
811 posts

I was able to add touchswipe to the slideshow example I posted above. It will be interesting if this can be adapted to Responsive Content Slider also. Its a JS addon.
Bootstrap 5 CSS Grid.
User 232214 Photo


COO
827 posts

Twinstream wrote:
I was able to add touchswipe to the slideshow example I posted above. It will be interesting if this can be adapted to Responsive Content Slider also. Its a JS addon.


RCS does touch swipe already...right?

The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 244626 Photo


Registered User
811 posts

:) Yes, I did just confirm that my slideshow on my new work in progress website does have touch swipe but seems like the touch sensitivity is off or something ? This might be why I missed that this feature was working. I know the bootstrap slideshow that was created with the Bootstrap Builder Beta is "spot on" when it comes to moving a slide using the touchswipe js add on . I will look and see if there is something conflicting in my RCS slideshow as I am a newcomer to all this. Thanks !
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.