In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load.
But before digging into those extensions, let’s start by creating a carousel based on the default styles.
Building the Carousel
To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:
<!– Indicators –>
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<!– Wrapper for slides –>
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption d-none d-md-block">
<!– slide content –>
<!– slide content –>
<!– more slides –>
<!– Controls –>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
Notice that each of our images contains the custom data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.
Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:
See the Pen Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.
Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%
On the Masonry website, we read that Masonry is …
Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in your project, and you’ll be able to whip up responsive web pages in no time.
I did, and this article highlights what the issue is and what you can do to solve it.
Bootstrap Tabs Explained
If you have some web content that’s best presented in individual chunks, rather than crammed all in one spot, this kind of tabs component might come in handy.
In some cases, the content inside each panel is suited to being displayed in a responsive grid layout. For instance, a range of products, services, and portfolio items are types of content that can be displayed in grid format.
However, if grid cells are not of the same height, something like what you see below can happen.
A wide gap separates the two rows of content and the layout appears broken.
Nowadays, Bootstrap solves the equal-width issue with the brand new card component, which is based on Flexbox. Just adding the card-deck class to a group of card components is sufficient to achieve equal-width columns.
Setting Up a Demo Page
Getting a demo page up and running helps to show how integrating Bootstrap’s Tabs with Masonry is not as straightforward as one might expect.
This article’s demo page is based on the starter template, available on the Bootstrap website.
Below is the skeleton of the markup for the tabs component:
Last week in the newsletter, I mentioned a new release of jQuery 3.3.0.
In this release, a new feature was added: adding/removing/toggling classes from a DOM element using an array.
A Modern Reintroduction to AJAX
We encountered an issue in the release for jQuery 3.3.0, so we’ve immediately released another tag. The code itself is identical, but our release dependencies (only used during release) were added to the dependencies of the jQuery package itself due to the new behavior of npm in version 5+. jQuery 3.3.1 is now recommended if … Continue reading →
It’s been a while since the last jQuery release, but the Core team hasn’t been idle. We’ve got an all new minor release for you, and it’s even got a new feature in it! The .addClass(), .removeClass(), and .toggleClass() methods now accept an array of classes. jQuery(elem).addClass([‘dave’, ‘michał’, ‘oleg’, ‘richard’, ‘jason’, ‘timmy’]); Generally, jQuery is … Continue reading →
When building a responsive website or app, jQuery can be of great help. In fact, it can take the whole user experience to a new level. In this article, I have compiled my favorite jQuery tips and tricks for making and enhancing responsive sites.
Scroll to an Element
Scrolling endlessly isn’t the most fun thing ever. This is why it can be very useful to set scrolls so your visitors won’t need to take 10 seconds to reach the info they’re looking for.
In today’s post, I dig further into how to achieve an autofill with a “permanent placeholder" as my client asked.