Ways to display sneak peeks of preceding and succeeding images within a carousel using Bootstrap 5

I am looking to achieve a carousel effect where the previous and next images partially show on either side of the central image, similar to what is shown in this example: https://i.sstatic.net/HahbP.png

Below is the code snippet.

    <div class="carousel-container">
      <div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
        <div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
        </div>
          <div class="carousel-item active">
            <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100 carousel-img-one" alt="fitness">
          </div>
          <div class="carousel-item">
            <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion">
          </div>
          <div class="carousel-item">
            <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100 img-fluid" alt="art">
          </div>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

.carousel-container {
  margin: auto;
  width: 50%;
}

.carousel-control-prev, .carousel-control-next {
  margin: -150px !important;
}

Thank you for your help!

htmlcsstwitter-bootstrap-3carouselbootstrap-5

Answer №2

For a live demonstration, visit https://jsfiddle.net/q9ewyd1L/9/

<div class="carousel-container">
  <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://static.wixstatic.com/media/84b06e_4ae660d38c134d9f8c291148c8e378a4~mv2.png/v1/fit/w_1000%2Ch_608%2Cal_c%2Cq_80,enc_auto/file.jpg" class="d-block w-100" alt="fitness">
      </div>
      <div class="carousel-item">
        <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/447dee40e57ab139592d58c4a61cf9b28297bb9c0b945568da9f7122e1e6fe861623238414909.jpg" class="d-block w-100" alt="fashion">
      </div>
      <div class="carousel-item">
        <img src="https://images-wixmp-530a50041672c69d335ba4cf.wixmp.com/templates/image/0ef3b30526d23fee95381bf1b179d129f82c5b30220823b9855b2776e095de701623242117925.jpg" class="d-block w-100" alt="art">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>

.carousel-container {
  margin: auto;
  width: 80%;
}

.carousel-item {
  position: relative;
}

.carousel-item.active img {
  width: 100%;
}

.carousel-item:not(.active) img {
  width: 80%;
  position: absolute;
  top: 0;
  left: 10%;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.carousel-item:not(.active) img:hover {
  width: 90%;
  left: 5%;
  opacity: 0.8;
  cursor: pointer;
}

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

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

I'm running into an issue with the tabs on my website. The revolution slider is working perfectly, but the tab widget seems to be displaying all the tab contents at once instead of each one separately. You can see the problem here: at the bottom of t ...

javascriptjqueryhtmltabsjquery-ui-slider

The JS copy function is successful when operating on a single element, but it encounters issues when attempting to run on multiple elements, only copying

My code includes a copy function that copies the data from a textarea to the clipboard when a button is clicked. The functionality works perfectly for the first textarea, but for subsequent textareas, the buttons do not perform the copy action. Check out ...

javascripthtml

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

While working on a project, I incorporated the FlexStart Bootstrap Template. However, I encountered an issue with the Dropdown feature on the navbar. When hovering over the menu and submenu, they flicker incessantly. Despite investing a considerable amount ...

javascripthtmljquerycssbootstrap-5

What is the method for embedding a concealed form within a table?

I am a beginner in HTML and RoR. I am trying to include a button inside a table that will submit a hidden form. However, I am facing an issue where the button is not showing up in the generated HTML. <table class="centerBox"> <h3>Search Resu ...

htmlruby-on-railsruby

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

htmlcss

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

javascripthtmlsvggradient

The customized Vaadin component with a tag is missing from the MainView layout

I am attempting to integrate my custom vis component into the MainView VerticalLayout. However, it is appearing above the layout and the layout itself contains an empty component tag. Custom component code In this section, I have labeled my component as " ...

javascriptjavahtmlvaadinweb-component

Where can I locate a specific child element in this scenario?

Currently, I am exploring the possibilities of integrating AngularJS into my application and have encountered a question regarding the click event implementation. Within my HTML code: <div ng-click='clickMe()' ng-controller='testCtrl&ap ...

javascriptjqueryhtmlcssangularjs

What steps are involved in incorporating a machine learning algorithm from a Python file into a Django website?

I'm currently utilizing the random forest algorithm in Python to make predictions about college dropouts. The algorithm has been completed, and now I need to integrate the file into a website using Django. However, I am facing issues as the imported f ...

pythonhtmldjangocsvmachine-learning

What is the best way to input keys without losing focus?

I am facing an issue with an HTML <input> field that displays autocomplete suggestions while the user is typing. I want to create an automated test using Selenium, where the driver inputs keys and then verifies the contents of the autocomplete dropdo ...

pythonhtmlseleniumselenium-webdriver

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

javascriptjquerycss

Place the blockquote in the middle, but maintain the text's alignment to

I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap). To see the full code, take a ...

htmlcssbootstrap-4

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Is the jQuery popup malfunctioning? It appears to be stuck within a div

Currently, I am in the process of developing a website at and I am facing an issue with the hover type menu. Whenever I click on the arrows next to the logo, instead of fully opening up, the menu seems to be getting stuck and is not expanding entirely. I ...

jquerycss

Error 410: The Webpage has Disappeared

Unfortunately, my website fell victim to a hacking attack that resulted in the addition of numerous unwanted pages. These pages were quickly indexed by Google, causing a significant drop in traffic. The names of these pages all follow a similar pattern, s ...

html.htaccesshttp-redirect

Automate populating input fields with data

I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...

javascripthtml

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss

What is the best way to implement a collapsible menu in a fixed sidebar for mobile devices using Bootstrap 4?

I have been searching extensively, but I have yet to come across the precise solution for what I am trying to achieve. Being new to coding, I believe that the answer is probably simpler than I realize. My goal is to develop a sidebar navigation that remai ...

htmlbootstrap-4navigationnavsidebar

Is there a way to change an HTML document into a Word file?

I am looking for recommendations on libraries that can help me save HTML documents in memory as Word .DOC files. Any suggestions for both closed and open source options are welcome. Additionally, could someone provide links to these libraries based on the ...

htmlms-word

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...

htmlcss