DEV Community: Alberto Roldan

Carousel (Slider) component on Bootstrap

Alberto Roldan — Thu, 21 May 2020 09:56:14 +0000

Hello everyone!

Since I worked (and struggled) with Bootstrap carousel component, I wanted to explain the process to understand each part of it, so, let's go.

I built a carousel inside a modal, another Bootstrap component which I tackle in this post. Actually, I built two of them, one inside the other.

Choose the carousel

Pick the carousel you want to add to your code from Bootstrap Documentation section
In this example, we will work with the third (with indicators).

The example showed is a grid of pictures, but this won't change the main code to make the carousel work, then we can customise it with the structure we want.

The opening div contains all the elements that make the carousel.

id will help the slider controls work.
data-ride value triggers the autoplay if set to "carousel", by default is false.
data-interval sets the time an item is displayed until it slides to the next one.

The extra div which don't appear in the Bootstrap Documentation is just to keep the desired structure.

The div that contains class="carousel-item" will be also where we set the .active item. Only one can be set with the active class. If more than one item is set to active it won't work properly.

The <a> element included in the carousel is a button that pops-up another modal with another carousel
Finally, the custom content to display in the first carousel's item. Then we only need to create as many items as we want, which will be displayed every time the slide moves through the controls or the data-ride and data-interval

Slider Controls

Remember to insert the id assigned to the carousel on the href value.

We need to add as many indicators li as items are in the carousel, and with the same logic we used with the items, only one can be set with the .active class.

We can customise controls and indicators style (position, shapes, colours, etc. in our CSS stylesheet. Let me know in the comments if you want to know how to customise the controls and indicators.

I hope to have helped you understand a little bit more the carousel component. If you want to know more about the modal component and how to display a modal inside another have a look at this post.

If you are planning to look for a job this list of remote jobs sites could be a great resource!

Don't forget to bookmark the post if it's useful.

If you liked what you read.

Let's keep in touch:

Follow me on Instagram
Add me to your contacts on Linkedin

Thank you for reading! Some feedback would be awesome!
Leave a comment to share your thoughts, ask questions or just to say hello!

Modal (Light-box or pop-up) component on Bootstrap

Alberto Roldan — Thu, 21 May 2020 09:55:58 +0000

Hello everyone!

I recently worked on a project which included a Bootstrap modal component, so I'd like to explain the process to help you understand this useful component.

I added a modal inside another modal, which both contain a carousel inside, another Bootstrap component which I tackle in this post.

First Modal, centered on the screen with close button customised and containing a carousel.

Second Modal centered on the screen with another close button customised and containing another carousel.

Choose the modal

Pick the modal you want to add to your project from Bootstrap Documentation section
In this example, we will work with the "vertically centered" although we will set some other features.

The first step will be inserting an element (outside our Modal) that triggers the modal, which can be a button, <a>, etc. Where the href will be pointing our Modal id

Button to display the first modal href="#myModal"
First Modal id="myModal"
Button to display the second modal href="#myModal2"
Second Modal id="myModal2"

If we want to avoid our modal closes when we click outside it, we need to set data-backdrop="static"

In the Bootstrap Documentation you can find more elements you can add inside your modal such as header, title, and footer. In this example, I've removed them to keep only the carousel interface.

Important
Once we have added all our content inside our modals, we need to set the close button. Even if you choose to use the default button included in the Bootstrap Documentation, if you are using two modals at a time as in this example, it will be necessary to add the following code in our button or a element. At least in the second modal.

href="#" onclick="$('#myModal2').modal('hide');

Button to close the first Modal
Button to close the second Modal

If we used instead data-dismiss="modal" it would close all the modals that are open.

And finally, we can set a custom style to the modal, background, borders, etc. Let me know in the comments if you want to know more about styling a modal.

I hope to have helped you understand a little bit more the modal component. If you want to know more about the carousel component take a look at this post.

If you are planning to look for a job this list of remote jobs sites could be a great resource!

Don't forget to bookmark the post if it's useful.

If you liked what you read.

Let's keep in touch:

Follow me on Instagram
Add me to your contacts on Linkedin

Thank you for reading! Some feedback would be awesome!
Leave a comment to share your thoughts, ask questions or just to say hello!

Remote Jobs Sites [updated 2022]

Alberto Roldan — Thu, 19 Mar 2020 15:29:50 +0000

In times of great adversity and chaos, we need to stay optimistic, adapt to the circumstances, and help others as much as possible.
The economy may have been globally affected and the way we have to work has been compromised, therefore, some of us might need to find new jobs and working remotely has practically shifted to be the only choice.
In the following list, it can be found several sites with Remote Jobs offers:

Volunteering:

Do-it

And of course:

Don't forget to bookmark the post if it's useful.

Thank you for reading! Some feedback would be awesome!
Leave a comment to share your thoughts, ask questions or just say hello!

Is it ethically correct to ask a candidate to build a better landing page version of the own company?

Alberto Roldan — Thu, 13 Feb 2020 16:53:20 +0000

From my point of view, they will have a bunch of different ideas for free. And still, there is no way of knowing if they really want to take advantage of it or it is just a reliable test to know if you can match their requirements.

What do you think?