Positioning buttons and elements on top of a BootstrapVue Carousel slide: a handy guide

Can different elements be positioned on the BootstrapVue Carousel slide without restrictions, such as in any corner or position?

I have attempted to accomplish this by nesting additional elements within 

<b-carousel-slide></b-carousel-slide>
tags.

However, it appears that all these elements end up inside the div.carousel-caption and I am unable to move them outside of that div.

I want to place buttons in the top-right and bottom-left corners of the carousel-slide, but every attempt leads to results like this:

https://i.stack.imgur.com/S2S6K.png

As shown, all elements are contained within the caption div...

I have three queries:

  1. How can I achieve my objective and place elements in different corners of the carousel slide?
  2. Is it feasible to freely add elements to the carousel slide, but outside of the caption div?
  3. How do I relocate the entire caption div and indicators to the top of the carousel slide?

My code:

 <b-carousel
            id="story-carousel"
            controls
            indicators
            :interval = "3000"
        >
            <b-carousel-slide 
                text="asdasdasdsa"
                img-src="https://picsum.photos/1024/480/?image=10">

                <b-link>
                    LINK
                </b-link>

                <b-avatar size="md" variant="primary" icon="bookmark-heart" class="ml-2 highlight-button" button
                </b-avatar>
            </b-carousel-slide>
 </b-carousel>

And CSS:

.highlight-button{
        position: absolute;
        top: 0;
        right: 0;
    }
csstwitter-bootstrapvue.jscarouselbootstrap-vue

Answer №1

If you want to customize the content of your <b-carousel-slide> in BootstrapVue, you can utilize the img slot and adjust the layout using CSS:

  1. Firstly, add a <template #img> within the <b-carousel-slide> component.

  2. Inside this slot, include a <b-img> element with the desired image source.

  3. Create a new <div> with class carousel-extra-content and move additional elements like <b-link> and <b-avatar> into it.

<template>
  <b-carousel>
    <b-carousel-slide text="asdasdasdsa">
      <template #img>
        <b-img
          fluid-grow
          src="https://picsum.photos/1024/480/?image=10"
          alt="Random image"
        ></b-img>

        <div class="carousel-extra-content">
          <b-link> LINK </b-link>

          <b-avatar
            size="md"
            variant="primary"
            icon="bookmark-heart"
            class="ml-2 highlight-button"
            button
          >
          </b-avatar>
        </div>
      </template>
    </b-carousel-slide>
  </b-carousel>
</template>

  1. You can then style the .carousel-extra-content element to position it in the top-right corner and ensure clicks are possible by adjusting the z-index.

  2. Adjust the styling of .carousel-indicators and .carousel-caption to relocate them to the top of the slide, taking advantage of their current absolute positioning.

<style>
.carousel-extra-content {
  position: absolute;
  right: 5em;
  top: 1em;
  z-index: 20; /* Ensure clickable area */
}

.carousel-indicators {
  top: 1em;
}

.carousel-caption {
  top: 1.5em;
}
</style>

Check out the demo here

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

Ways to eliminate all content preceding a specified value

Currently utilizing Bootstrap Vue and aiming to incorporate a formatter callback for injecting HTML into a table column. In the provided example from Bootstrap's documentation, the link is formatted as an anchor link: Ex. <b-table striped respon ...

regexvue.jsbootstrap-vue

Implementing interactive input binding with Vue.js for invoices

I was attempting to create invoice number four, but I got stuck in the process. Let me provide an example: If Quantity is 1 and Unit Price is 2000 with a Percent of 18, the net total should be "2360". Moreover, if the user updates the "net_total" value, I ...

vue.js

The Link Breaks the Overlay Hover Effect

Currently, the code functions as intended when you hover over or touch the thumbnail, an overlay will appear. The issue lies in the fact that to navigate to a specific URL, you have to click directly on the text. The overlay itself is not clickable and ca ...

javascripthtmlcsswordpress

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

htmlcsscss-float

Continuously animate a series of CSS properties

Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...

javascriptcssanimation

Add the scss file to the vuejs component npm package only if certain conditions specified in the project are met

Creating css/scss themes for my Vue Components Npm package has been a focus of mine lately. This particular package is local and currently being tested using npm link. Both the Package and Project are utilizing webpack. index.js of Package import "./src ...

javascriptvue.jsnpmwebpack

The markers on Google Maps are currently displaying in the wrong position, despite the latitude and longitude being correct

Utilizing the Google Maps API, I have implemented a system to dynamically add map markers tracking 2 of our company's vehicles. The website is developed in asp.net c# mvc with bootstrap 4.3.1. An ajax request retrieves the latest marker location from ...

javascripthtmlcssajaxgoogle-maps

I am currently utilizing Nuxt, Vue, and Vuex as my store. One question I have is, how can I efficiently load the state and access the data within it when the application first loads

I'm facing an issue with loading data from a JSON file into the VueX store. The state doesn't get loaded until I manually refresh the VueX Store. My goal is to have the state loaded with data before the app renders, ideally before accessing the ...

vue.jsvuexnuxt.js

Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution. In TextInput, a similar outcome can be achieved by implementing ...

javascriptcssreactjsmaterial-ui

Create a dynamic webpage where two div elements glide in opposite directions

My apologies for this seemingly basic question, but I am wondering if anyone knows how to create an animation where a div moves up and down while scrolling, similar to the effect on this website: On that site, near the footer, there are 2 sections with 2 ...

jqueryhtmlcss

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

csswebpacksasslessnext.js

Acquire the content of a nested element using jQuery

I have a navigation list with separate headlines and text for each item. The goal is to switch the main headline and paragraph of text when hovering over a navigation item. CodePen Example Currently, my code displays all text. I only want to display the ...

javascriptjquerycss

CSS3PIE is failing to function properly in Internet Explorer

Looking for a solution to achieve rounded corners in Internet Explorer? Consider using . In my CSS file named template.css, I have included the following code which is loaded when the page loads on Joomla 1.5. .form_field {color:#222 !important; border:2p ...

htmlcssjoomlacss3pie

Changing the background color of the legend text when hovering over a d3 doughnut chart

I have a doughnut chart that displays values on mouse hover. However, I would like to change the background of the legend text when hovering over the respective area of the doughnut chart. return { restrict: 'E', scope: { values: ...

htmlcssangularjsd3.js

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

What is the method for compressing text in CSS?

I'm curious about how to condense my text so it doesn't extend beyond the page. Any ideas on how to achieve this? Issue: Solution: .Subheading{ text-align:center; font-family: 'Mukta', sans-serif; margin-top:70px; m ...

htmlcsstext

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

Is there a method to incorporate scss into a project without requiring a separate stylesheet?

I am currently working on a Gatsby application that utilizes SCSS. My code snippet looks like this: import React from "react"; import styles from "./mosaic.module.scss"; import Tile from '../tile/tile'; const Mosaic = (): JSX.Element => ( ...

cssreactjssassgatsby

Expanding the padding within a box results in an increase in the overall height of the table row that encapsulates it

My goal is to create a table displaying marks with a box around each mark that expands slightly when hovered over to indicate activity. Below is the code I am using: .container { position: absolute; width: 80%; left: 50%; transform: translateX(-5 ...

htmlcss