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%
If an image on your page isn’t really there for any purpose, you might struggle to come up with meaningful alt text for it, so it’s quite common to leave the alt attribute out of the image tag:
There are so many editors and plugins available that knowing the basics of HTML is no longer required to create a site.
The problem with this is that if you don’t know a few basics, you can easily get into real trouble and have to hire a pricey developer to fix what may be a minor problem. Not only that, but creating changes to your blog such as adding a custom text widget requires a little knowledge.
After this holiday season, many of us would like to lose a little weight, page weight that is. In my app, CodeTriage, I make extensive use of SVG elements for images, the logo, and icons. Until recently, I’ve been rendering the SVG elements directly in the HTML. This was the easiest thing to do. As you might guess by my intro sentence, I’ve been working on decreasing page weight by removing SVG elements from the HTML. How well did it work? Before making changes the homepage was 14kb (77kb unzipped). After the change, the homepage is 6kb (30kb unzipped). That’s a 57% reduction in “over the wire" bytes per page load. What exactly did I do, and what were the trade-offs I made to get to a smaller page? Let’s look at how I was previously using SVG.
Here’s the raw SVG:
Successful online services like marketing and e-commerce websites rely on exceptional customer experiences. As a front-end developer, it’s your job to create flawless layouts, so your customer can complete necessary actions (like submit a sign-up form or purchase a Christmas gift). As you probably know, layout issues can cause users to distrust your website, so you’ll want to fix them up ASAP. These are some of the most common front-end mistakes that cause layout problems on websites, using examples from our website, Raygun.com (in a test environment, of course!).
Want to know how to design cool web interfaces using CSS (Cascading Style Sheets)? Well, it’s super easy and this article will dig deep to show you how you can use CSS to design these interfaces.
For starters, the best way to define CSS is by showing you these two images from Twitter. The difference between the two images that meets the eye is CSS.