Transitioning effects for Carousel in Bootstrap 4 Beta using Fade technique

I am attempting to customize the new Beta version of Bootstrap 4 Carousel to transition between slides with a fade effect instead of sliding, using CSS. Unfortunately, I have been unsuccessful in getting it to work. I'm unsure if a specific Javascript function is necessary.

Please refer to this Codepen for reference: 

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
  z-index: 2;
}

html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}
<div class="container">

  <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-06.jpg" alt="First slide">
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-08.jpg" alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block img-fluid" src="https://tuniverse.io/wp-content/uploads/2016/12/boss-tu-2-09.jpg" alt="Third slide">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <!-- end carousel -->

</div>
<!-- end container -->

Thank you

javascriptcsscarouselbootstrap-4

Answer №1

Check out this solution that is compatible with Bootstrap 4 Beta.

.carousel-fade .carousel-item {
  display: block;
  position: relative;
  opacity: 0;
  transition: opacity .75s ease-in-out;
}

.row {
width: 100%;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
  display: block;
}
.row {
  width: 100%;
}
.carousel {
  position: relative;
  top: 0;
  left: 0;
  background-color: lightskyblue;
}
.carousel-inner {
  background-color: pink;
  height: 100%;
}
.carousel-item {
  background-color: yellow;
  opacity: .5; /*Added clone in this line*/
}
a.carousel-control-next:link, a.carousel-control-prev:link {
  background-color: transparent;
  text-decoration: none;
  opacity: .5;
}
a.carousel-control-next:hover, a.carousel-control-prev:hover  {
  background-color: transparent;
  text-decoration: none;
  opacity: 1;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
  position:relative;
  background-image: none;
}    
.carousel-control-next-icon:before {
  top:0;
  left:-5px;
  padding-right:10px;
 }
.carousel-control-prev-icon:before {
  top:0;
  left:-5px;
  padding-right:10px;
}
.sidebar {
  background-color: #e1e1e1;
}
<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

</head>


<div class="container">
  <div class="row">
    <div class="col-lg-8">
<div id="carousel" class="carousel carousel-fade" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.imgur.com/FmtTabr.jpg" alt="First slide">
</div> <!-- close carousel-item 1 -->
<div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%">
<img class="d-block w-100" src="https://i.imgur.com/UioJ4ix.jpg" alt="Second slide">
</div> <!-- close carousel-item 2 -->
<div class="carousel-item" style="position: absolute; top:0px; width: 100% ; height: 100%">
<img class="d-block w-100" src="https://i.imgur.com/UkPZYcB.jpg" alt="Third slide">
</div> <!-- close carousel-item 3 -->
</div> <!-- close carousel-inner -->

<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- close carousel -->

<table class="table table-bordered mt-3">
<thead class="thead-default">
<tr>
<th colspan="2" class="text-center">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</tbody>
</table>
    </div> <!-- end col-lg-8 -->
    <div class="col-lg-4 sidebar">
    <p>Sidebar</p>
    </div> <!-- close sidebar -->
  </div>  <!-- close row -->
</div> <!-- close container -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

Answer №2

Check out this effective solution compatible with Bootstrap 4 Stable Released

If you're interested, you can start from the following theme: 

#image1 {
    background-image: url('http://via.placeholder.com/1440x813');
}

#image2 {
    background-image: url('http://via.placeholder.com/1440x813');
}
...
...
<!DOCTYPE html>
<html lang="en">
<head>
...
...

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The email link with a computed property is failing to display the entire message content

When creating a mailto link, I have encountered an issue where the email body is being cut off at around 200 characters, even though my total email length is 1500 characters. This happens despite being below the mailto limit. To address this problem, I hav ...

javascriptvue.jsmailto

Retrieving a specific value from a collection of nested arrays containing objects

Having trouble extracting values from fields and have tried various methods like nesting the map function and concatenating fields without success. I have an object with a structure similar to this: [{ name: 'sean', age: 26, address: ...

javascripttypescript

Data exchange among sibling form components

I have a two-step form that is divided into switchable tabs. It is crucial for the user to seamlessly move from one tab to another without losing any information that has already been filled out. Therefore, I am looking for a solution to prevent React from ...

javascriptreactjs

Display two columns side by side using Bootstrap on all screen sizes

I'm attempting to have two column divisions appear on the same line. Take a look at my code: <div class="col-md-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Left Division </div> ...

csstwitter-bootstrapbootstrap-4responsive

Customize the background color of a clipPath in SVG

I'm looking to design a landing page featuring a colored div with a clip-path, intended to showcase a video playing in the background. However, I'm encountering an issue where the background looks grayish without any clear explanation. Despite t ...

htmlcsssvgclip-path

Issue arose following implementation of the function that waits for the event to conclude

I've encountered a problem with my HTML and jQuery Ajax code. Here's what I have: <form> <input name="name_field" type="text"> <button type="submit">Save</button> </form> $(document).on("submit", "form", fu ...

javascriptphpajaxjquery

Creating a key-value pair array upon checking a checkbox with jQuery

Every time I check a checkbox, two key-value pairs are generated, such as: Object {id: "101", name: "example"} These pairs are generated for each checked checkbox, and I want to create an array with multiple checkbox values that look like this: [{id:" ...

javascriptjqueryarrayscheckbox

AngularJS: Hide Row in NG-Grid Based on Condition

I am a beginner in angularJS and I have a requirement to hide a row in my ng-grid table if the value of a column is '0'. The grid consists of 4 columns: User Today This Week This Month I need to hide an entire row if the value in the 'Th ...

javascriptangularjsng-grid

Attempting to proceed to the next prompt in the questioning sequence based on the user's choice

Hey there, I'm currently a bootcamp student and I'm working on creating a team profile. I'm facing an issue with the code related to adding engineers to the team. After inputting manager information, I should be able to choose to add an engi ...

javascriptnode.jsinquirer

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4. https://i.sstatic.net/3eKwN.png From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

The font sizes appear larger when styled with HTML compared to using Photoshop

When I view my <nav> element in Chrome, the font size of each list element appears much larger than it was originally designed in Photoshop. The font is displaying 23px wider in Chrome compared to Photoshop, even though my resolution is set at 72dpi ...

htmlcssphotoshopwebfonts

Mastering Complex Selectors in ExtJS

In jQuery, I have code that fades out links which do not contain the text entered into a textfield (#searchServices) and fades in links that do contain the text. How can I achieve this in ExtJS? $('#searchServices').keyup(function () { if ( ...

javascriptjqueryextjs

Is <form> tag causing code deletion after an ajax request?

I'm working on a form that looks like this: <form> <input class="form-control" id="searchField" type="text"> <button type="submit" id="searchUserButton">SEARCH BUTTON</button> </form> When I click on SEARCH BUT ...

javascriptjqueryhtmlajax

Tips for populating an array with information gathered from an axios request within a React application

Currently, I am using axios to fetch data from an API and attempting to store the retrieved data in a variable that represents an array within the state of the component. However, when I try to do so, I encounter the following error: Objects are not valid ...

javascriptreactjs

What is the best way to show a div after successfully sending a post value using AJAX?

How do I show this specific div after a successful AJAX post? This is what I want to display: <div class="love" id="love_0" style="border-radius: 3px; padding: 8px; border: 1px solid #ccc; right: 13px; background: #fff; top: 13px;"> <a class ...

javascriptjqueryhtmlcssajax

Unable to access account: HTML Javascript login issue

Problem with Login Code As a newcomer to HTML, CSS, and almost unknown in Javascript, I sought help from others to create a login code. The code was working fine earlier, but now it's not functioning as expected. Despite checking everything, I can&ap ...

javascripthtmlcss

Issues arise when attempting to utilize Async/Await with a gRPC method

Here is the code snippet used to initialize a gRPC server: export const initServer = async (finalPort: number): Promise<string> => { let initStatus = 'initial'; gRPCserver.addService(webcomponentHandler.service, webcomponentHandler.h ...

javascripttypescriptgrpc-node

The Bootstrap menu does not show the menu items

I'm currently experiencing two issues with my bootstrap menu. The first problem is that the menu items are not displaying on the right as intended. The second issue is related to the mobile toggle button, which is always showing up on the left next t ...

bootstrap-4

Difficulty arranging objects in both horizontal and vertical orientation within a single flexbox container

I'm struggling with aligning my bootstrap flexbox container properly. I want the image to remain horizontal on the left, while the title, description, and "powered by" sections stack vertically to its right. So far, all my attempts to achieve this hav ...

htmlcssflexboxtwitter-bootstrap-4

Is utilizing React's useEffect hook along with creating your own asynchronous function to fetch data the best approach

After attempting to craft a function for retrieving data from the server, I successfully made it work. However, I am uncertain if this is the correct approach. I utilized a function component to fetch data, incorporating useState, useEffect, and Async/Awa ...

javascriptreactjsasynchronousasync-awaitreact-hooks