Steps for updating a text section beneath a carousel

I'm looking to enhance my webpage with a bootstrap carousel, which is pretty standard. However, I want the content under each slide to change dynamically, but I'm struggling to make it work. As a newbie, I could use some guidance.

I've attempted nesting the div within the section as advised in this Stack Overflow thread, but it doesn't quite align with my vision. Currently, the section remains the same for all slides since it's a single-page layout... Is there a way to sync the section changes with the slide transitions?

<header>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">

                <!-- Slide One - Set the background image for this slide in the line below -->
                <div class="carousel-item active" style="background-image: url('https://images.pexels.com/photos/2053922/pexels-photo-2053922.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940')">
                    <div class="slide__content">
                        <h2 class="slide__heading">First Slide</h2>
                        <p class="slide__text">This is a description for the first slide.</p>
                    </div>                    
                </div>

                <!-- Slide Two - Set the background image for this slide in the line below -->
                <div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Second Slide</h2>
                        <p class="lead">This is a description for the second slide.</p>
                    </div>                    
                </div>


                <!-- Slide Three - Set the background image for this slide in the line below -->
                <div class="carousel-item" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
                    <div class="carousel-caption d-none d-md-block">
                        <h2 class="display-4">Third Slide</h2>
                        <p class="lead">This is a description for the third slide.</p>
                    </div>                    
                </div>                       
            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </header>

 <!-- Page Content -->
    <section class="py-5">
        <div class="container">
            <h1 class="display-4">Full Page Image Slider</h1>
                <p class="lead">The goal is to have the section content "move" along with each slide, so the text can be tailored specifically to each one.</p>
        </div>
    </section>

It would be great if the section content can seamlessly transition with each slide.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Consider removing the carousel caption class and using an image instead of setting the slide background as the image. Please execute the code snippet provided below:

.item img {width: 100%; height: auto}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://images.pexels.com/photos/2053922/pexels-photo-2053922.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Slide 1">
      <div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt tortor vitae purus facilisis fringilla. Mauris egestas urna enim, vehicula placerat nibh mattis ut. Sed condimentum, metus ac ultricies varius, urna massa rhoncus leo, vel ultrices quam orci id est. Vestibulum nisl enim, dignissim vitae vehicula sed, egestas quis tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis faucibus volutpat arcu, eget molestie arcu malesuada quis. Duis sed nunc sit amet libero aliquam accumsan nec eu sapien.
      <p>
      </div>
    </div>
    <div class="item">
      <img src="https://thehappypuppysite.com/wp-content/uploads/2017/06/marshmallows.jpg" alt="Slide 2">
      <div>
        <p>
        Vestibulum ultricies eu neque at suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer at dui vel lectus sagittis tincidunt eu quis urna. Proin dapibus nisl id ipsum lacinia, quis euismod dui aliquam. Nulla nisi neque, aliquam id dolor eu, porttitor vehicula ante. Curabitur odio nisl, dignissim ac sem ac, luctus cursus eros. Quisque ornare cursus eros eget posuere. Proin in malesuada dui, et ultrices eros. Curabitur dictum leo arcu, quis pellentesque orci pretium a. In leo odio, accumsan eget elit sit amet, luctus efficitur nulla. Vivamus porta pharetra dictum. Nullam consectetur neque ante, sed vestibulum augue efficitur lobortis. Donec at neque porttitor, dapibus lectus nec, condimentum ligula.
        </p>
      </div>
    </div>
    <div class="item">
      <img src="https://thehappypuppysite.com/wp-content/uploads/2015/01/puppy-search-2.jpg" alt="Slide 3">
      <div>
       <p>
       Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed fringilla volutpat ornare. Vivamus nunc justo, sollicitudin vitae hendrerit et, vestibulum nec justo. Praesent eu finibus purus. Maecenas vel eros malesuada mauris luctus consectetur. Nunc viverra porta diam, vel sagittis felis blandit ut. Sed elementum bibendum lectus, iaculis tempus ex suscipit et. Aliquam erat volutpat. Nullam eget magna sit amet metus blandit hendrerit in non elit. Quisque imperdiet sem nec laoreet rutrum. Pellentesque semper, odio eu iaculis euismod, orci orci maximus elit, eget suscipit nibh tellus a lacus. Praesent convallis est placerat nunc congue cursus eu eu risus. Etiam ante libero, tristique eu faucibus eget, posuere in erat. Maecenas elementum imperdiet tincidunt. Nulla ac ex quis quam ultricies volutpat sed quis sem.
       </p>
      </div>
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

Vue: setInterval not updating timer variable

Here is my code for updating and displaying the number of elapsed seconds: <template> <div> {{timerValue}} </div> </template> <script> export default { name: "App", components: { }, da ...

javascriptvue.jsvuejs3

What is the optimal approach for managing script initialization on both desktop and mobile devices?

I have implemented a feature on my website that can detect whether the viewer is using a mobile device. Additionally, I have created a JavaScript script that adjusts settings based on whether the user is on a mobile device or not. However, I am wondering ...

javascriptjquery

Update Button Colour upon clicking the Button

I have multiple buttons lined up in a row on my webpage. I want the button's color to change when I click on them. Below is a snippet of my code: $( "button.change" ).click(function() { $(this).toggleClass( "selected" ); }); .Button { font-fa ...

javascriptjqueryhtmlcss

offspring of offspring in jquery animation remains stationary

I'm experiencing an issue with a jquery animation on containers that are set to 100% width and height. Specifically, the children elements that have position absolute move with the container, but when a child of a child has two instances of position a ...

javascriptjqueryhtmlcss

The NPM version needs to be updated as it is outdated

Struggling with a dilemma here. My Laravel project is quite dated, and I'm unable to execute npm run dev. Let's take a look at some code: php artisan laravel --version: Laravel Framework 5.8.38 node --version: v16.16.0 This is the current Node v ...

javascriptnode.jsnpmwebpacklaravel-5

Optimal method for detecting changes in a React webpage

As I create React hook components that utilize Material-UI input controls, I have searched extensively but have not found a satisfactory example. My goal is to display a popup message to the user if they have made changes to an input field, checkbox, rad ...

javascriptreactjsreact-native

Using a customized layout, merge AngularJS into Vaadin

I experimented with integrating an angular JS application into Vaadin by utilizing a custom layout as shown below: VerticalLayout mainLayout = new VerticalLayout(); mainLayout.setMargin(true); mainLayout.setWidth("1380px"); setCompositionRoot( ...

javascriptjavaangularjsvaadin

While utilizing Ajax with Spring, it is possible to send a JavaScript object and receive it as a custom object. However, there was an issue with

One of my challenges in Java is working with a custom class that looks like this: public class AddressesVO { private Long addressId; private String address; public Long getAddressId() { return addressId; } public void setAddressId(Long addressId ...

javascriptajaxspringjspspring-mvc

Is there a way for me to duplicate a complex element multiple times within the same page?

As an illustration, let's say I have a social tab located in my header that I would like to duplicate in the footer. This tab is comprised of various buttons with SVG images on top, event listeners linked to button IDs, and CSS styling. One option is ...

javascripthtmlcssrepeatcopying

The Ajax request fails to set a value within the done callback

Here is a function I have: var isNameUnique = false; function ValidateName() { var url = "/SomeRules/CheckIfNameExists/"; var request = $.ajax({ url: url, method: "GET", data: { sName: name}, ...

javascriptjqueryajax

Retrieve the erased document using Google's cache feature

After accidentally overwriting my .php web document file with an old version, I attempted to access the cached copy on Google. The only thing I could find was the HTML scripts, as the PHP coding was not visible. Now I am seeking a method to recover the e ...

phphtml

Customize the CSS for material-ui buttons or create a new style altogether

Looking to customize the background color of a material UI RaisedButton, I have encountered a challenge. This is what I currently have: const style = { backgroundColor: 'green' }; export default class CreateLinksave extends React.Component { ...

javascriptreactjsmaterial-ui

Is it possible to show an image without altering the Box dimensions?

Hi there, I am currently working on designing a footer and I have encountered an issue. I want to add an image in a specific position, but when I do so, it affects the size of the box. I was wondering if there is a way to set the image as a background or b ...

javascriptreactjsmaterial-ui

Can we keep a portion of the input placeholder content?

The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...

htmlcssbootstrap-4

Mastering React: Implementing default values in components using Ajax

I am facing an issue while trying to create a form for editing existing values. The problem arises with the initial data retrieved from an ajax request, causing my component to render twice - first with empty values and then again when the data is populate ...

javascriptreactjs

There is a vast expanse separating the header of the page and the navigation bar

Hello! I'm trying to figure out why there is a huge space between the top of the page and the navbar on this site: . I've included the CSS and HTML below. Any help would be greatly appreciated, thank you! HTML: <!DOCTYPE html> <html> ...

htmlcss

Engaging JavaScript Navigation

I am looking to create an interactive JavaScript menu or image map where users can press down, highlight, and hit enter on four different items to reveal hidden messages. However, I struggle with JavaScript and could really use some assistance. I have alr ...

javascripthtmlcss

A guide on immediately invoking a method when a class is initialized in JavaScript

I'm having some trouble with a class I created to handle user information. When I try to add an init() function to the class so that it runs as soon as the class is initialized, I keep getting a SyntaxError. I've tried following the advice from ...

javascriptclass

Use Object.assign to swap out the current state with a new

Why does the React component with state { key: bool } not omit the existing state key from the new state when a different option is clicked? Link to the code var SampleComponent = React.createClass({ getInitialState: function() { return {}; }, ...

javascriptreactjs

Tips for preventing the use of eval when invoking various functions

Here's a snippet of code I've been using that involves the use of eval. I opted for this approach as it seemed like the most straightforward way to trigger various factory functions, each responsible for different web service calls. I'm awa ...

javascriptangularjs