Carousel Problems

Bootstrap Studio Help
1

Hi guys;

I have been trying to do a working carousel on Bootstrap Studio, but I cannot see the images. I place the images in each slide as background, do some css on them, but I cannot see the images. Can someone tell me what I am doing wrong.

The image is 1440*900 I am putting this in CSS: background-image: url("foto-1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: auto;

Am I missing something or doing something wrong.

Thank you.

Pd. I also see in the left panel that beside each slide there is an img there, does that have something to do, do I need to erase it?

Thank you !

Clau

2

Carousels slide images, not background images by default. So you will need to remove the images like you say because they are laying over the top of your background images. You will very likely need to compensate for the missing image in width/height of the container because the image helps create that space.

However, you may have to create the carousel manually so that you have the ability to remove the image as it's a locked element of the carousel component.

Saj

3

Saj;

First of all, Thank you for taking the time answer my question. 1. Why would they put a carousel if we cannot use it? They need to fix this. 2. How can I edit the HTML code so I can put carousel in manually?

Thank you for the answers!

Clau

4

The Carousel is based off the frameworks supplied carousel coding. https://getbootstrap.com/docs/4.0/components/carousel/#with-captions

The Bootstrap Studio app is designed to help developers quickly prototype Bootstrap framework based websites. They have provided framework based components to help you achieve that quickly. It's also designed with the intent to help develop semantic bootstrap sites. Therefore, many things are locked in the provided components in order to help achieve that.

You can drag/drop the carousel as a guide and then drag/drop DIV's to create your own and set ID/class/attributes in the Attribute pane found after expanding the HTML pane.

However, you don't need to do all that.. because, if you select the Slide element in the Overview pane then select the Gear Cog icon in the Options pane, you can disable the image/caption. This will allow you to drag/drop other elements or have none in the Slide element.

Saj

5

Hey, I also have problems with a carousel. I actually want a simple text slider and I was hoping to get that with the Caption slider. But unfortunately this does not start. The text blocks are just superimposed and nothing works. What do I have to do. Do I have to insert any Java code? How exactly do I do that? Thank you doescher

This code I copy into a Custum Code. It was not a solution to build it with various divs, it did not work either.

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

    <li data-target="#myCarousel" data-slide-to="0" class="active"> <li data-target="#myCarousel" data-slide-to="1"> <li data-target="#myCarousel" data-slide-to="2">

<!-- Wrapper for slides -->

<div class="carousel-inner"> <div class="item active"> Chania <div class="carousel-caption"> <h3>Los Angeles</h3>

LA is always so much fun!

</div> </div>

&lt;div class="item"&gt;
  <img src="platzhalter.jpg" alt="Chania" />
  &lt;div class="carousel-caption"&gt;
    &lt;h3&gt;Chicago&lt;/h3&gt;
    <p>Thank you, Chicago!</p>
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="item"&gt;
  <img src="platzhalter.jpg" alt="Chania" />
  &lt;div class="carousel-caption"&gt;
    &lt;h3&gt;New York&lt;/h3&gt;
    <p>We love the Big Apple!</p>
  &lt;/div&gt;
&lt;/div&gt;

</div>

<!-- Left and right controls --> Previous Next </div>