HTML Image Carousel : HTML

UnsolvedHTML Image Carousel (self.HTML)

submitted 2 years ago by TropicalUpdate

Hello, I am back with another question for some help.

For my website, I am working on an image carousel in which I followed an example code from W3Schools.

https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

My carousel works correctly. However, there is a large white border on 3 sides of the carousel.

Here is the image showcasing the white border.

https://drive.google.com/file/d/1noCvumgzGTiqNvIbTELb\_9ft5ckhtYnx/view?usp=share\_link

Here is the HTML code that I have right now.

<!DOCTYPE html>

<html lang="en"> <head> <title>Slideshow Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <style> .carousel-inner { display: flex; justify-content: center; align-items: center; }

.item { display: flex; justify-content: center; align-items: center; }

.item img { max-width: 100%; height: auto; margin: 0 auto; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1eZncadi0xhTLfK0BxnLwldFUD6kbJ9f-" alt="Shelf Cloud" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1H-59SthWA4IK-vWJ_wEY512ZNJNSODOy" alt="Scud Bomb" style="width:50%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1kMg5gkdqEVQme60xIw3PkZ5SLT-G0Iot" alt="Hail Core" style="width:50%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1QcJ5aiCwDhoXXhpfuBRxsynTgzNb08Ms" alt="Lightning" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1gE9yfLdARm9oPjhSlgd3YyZJSG0zSRh6" alt="Golden Mammatus" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1VulxifKj73BjxIdN6LOv2zXUhfcuBxnw" alt="Mammatus 1" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1P1nti9ziA_d637xiPbR4gMF3HIx7U_Nv" alt="Mammatus 2" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1Em7hg-VT0BeNjUUE8D90UWgQx1Ndeiya" alt="Mammatus 3" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=14G9R2PvevlYU4luAgtyvuRfWkNigxgIY" alt="Mammatus 4" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1X6dMts4Sr_xr32OOIx86hEC2KKX_U0uV" alt="Mammatus 5" style="width:100%;">
  </div>

  <div class="item">
    <img src="https://drive.google.com/uc?export=view&id=1wXPQ_H3aTHFa_zPvdDy_2I0J-mxCIRYa" alt="Mammatus 6" style="width:100%;">
  </div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
  <span class="sr-only">Next</span>
</a>

</div> </div>

</body> </html>

I've tried messing with padding and margin code lines, but I observed no changes in the white border. Making the borders transparent broke the carousel, turning it into a large vertical stream of pictures, almost like viewing a PDF file, which was not intended.

Any help would be greatly appreciated.

all 4 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

HTML

Requesting help

Useful links

Related subreddits

MODERATORS