HTML - Carousel not working as expected |
HTML - Carousel not working as expected |
Dale Francis |
Nov 18 2020, 09:39 AM
Post
#1
|
Group: Members Posts: 4 Joined: 16-October 20 Member No.: 27,597 |
(HTML/Carousel/Angular)
A properly working carousel has a single row of images. If the images exceed the width of the viewport, the overflow will drop off to the left or right but can be accessed with left/right arrow keys. My carousel attempt isn't working properly. The overflow in my case drops down on the page creating one or more additional rows. And I haven't gotten the font-awesome arrows to appear either. Here is the code: <!-- carousel here! --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <!-- <img [src]="#/assets/{{images[0]}}" alt="Cats Pic"> --> <!-- <img class="pics" src="#/assets/Monaco-and-Spirit.jpeg"> --> <img class="pics" src="assets/Monaco-and-Spirit.jpeg"> <img class="pics" src="assets/Monaco-and-Spirit2.jpeg"> <img class="pics" src="assets/Monaco-and-Spirit3.jpeg"> </div> <!-- Left and right controls --> <!-- use font-awesome --> <!-- <fa-icon [icon]="filmIcon"></fa-icon> --> <fa-icon [icon] = angleLeft></fa-icon> <!-- <i class="fa fa-icon"></i> --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <!-- <span class="angles angleLeft"></span> --> <i class="fas fa-icon"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="angles angleRight" alt="" width="40" height="40"></span> <span class="sr-only">Next</span> </a> </div> Can someone address one or both of the issues described above? Thank you. |
Christian J |
Nov 18 2020, 10:21 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Have you installed the associated CSS and JS files?
|
Dale Francis |
Nov 19 2020, 08:29 AM
Post
#3
|
Group: Members Posts: 4 Joined: 16-October 20 Member No.: 27,597 |
Have you installed the associated CSS and JS files? I have this in my angular.json file: "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/font-awesome/css/font-awesome.min.css" ], I have a reference to the font-awesome 5.15.1 CDN in my index.html file, although I'm not sure it should go there. I have the following CSS snippet in my CSS file: .pics { width: 200px; height: 200px; margin-bottom: 50px; margin-top: 20px; overflow: scroll; } Thanks. I added the overflow setting this morning but to no effect. - Dale |
Dale Francis |
Nov 21 2020, 08:51 AM
Post
#4
|
Group: Members Posts: 4 Joined: 16-October 20 Member No.: 27,597 |
[quote name='Dale Francis' date='Nov 19 2020, 08:29 AM' post='140515']
[quote name='Christian J' post='140511' date='Nov 18 2020, 10:21 AM'] Have you installed the associated CSS and JS files? [/quote] Here's an update on the associated CSS: .pics { width: 200px; height: 150px; } .pics.active { border-style: solid; border-width: 5px; } img { float: right; } .fa-angle-left { float: left; } .fa-angle-right { float: right; } .carousel-wrapper { overflow: hidden; } .carousel-inner { display: flex; flex-direction: row; } |
Lo-Fi Version | Time is now: 26th April 2024 - 04:01 AM |