9 Correct answers
Code errors effect performance.
Fix these code warnings & errors first:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.greenbeaks.com%2Faviary-australian.html
If after code errors are corrected you still need help, come back & we'll take another look.
Do the controls have anything to do with it? The arrows are shifting up and down, not holding their place. I don't know if I'm explaining things correctly.
By @Haybound
See in bold red below, you don't appear to need those 2 lines, which is what is making the navigation arrows/page content jump up and down as it adds extra padding when a specific 'carousel-item' container is selected. The padding is not on your other 'carousel-item' container so when the selected 'carousel-item' is active it gets
...
To see what you're doing, add a "border" to the element you're trying to center with auto margins.
For example, <div class="col-sm-10 border border-primary mx-auto">
Bootstrap References:
https://getbootstrap.com/docs/4.0/utilities/borders/
https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins
Hope that helps.
Bingo! 😊
https://www.greenbeaks.com/aviary.html
By @Haybound
Only issue l have is you need to move the thumbnail arrows away from the first and last images because if you click the first or last image in the thumbnail set it moves to the next set of thumbnails but the large image doesn't reflect the first or last image clicked on, which is rather confusing.
- The second paragraph is not relevant when you serve the site on an HTTP/2 or HTTP/3 server. At the moment, you are serving the site from an HTTP/1 server. Speak to your host or choose a host that does have modern servers.
- Images are best served using the the WEBP format. Converters can be found all over the web. I use WebP Converter program.
- To stop layout shift, images must have an explicit size (width and height) allocated to them. None of the slider images have the sizes added to them. If t
OP what l mean, regarding the 2nd paragraph, is code bloat, regardless of what server youre hosted on will affect page load time. From my point of view l would probably only load the default images required on page load but that's a whole different approach which is not really possible to fully cover in a post here.
Less code not only helps load time but it helps you manage the code as well. Large volumes of code such as creating a gallery of images manually rather than dynamically, which uses r
...
Have a look at this code using Splide:
<!doctype html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Untitled Document</title>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<link rel="stylesheet" href="css/style.css" />
<style>
I did as you suggested. https://www.greenbeaks.com/aviary.html
Am I loading more images than necessary?
By @Haybound
I'm troubled to be honest, maybe because l look for small issues, features which are absent and if introduced could improve user experience, which is important.. The biggest issue l have now is as a user l have no idea how many slides are in the gallery. It's not until the default set of thumbnails move along that l get an indication that there are additional images to view, so l ma
...
Thanks, Ben. This is what I did... https://www.greenbeaks.com/aviary.html
This is so much better. I like the smaller thumbnails, but I do wish the carousel were a bit larger. It's tiny when viewed on a phone.
By @Haybound
Change the line
<div class="col-8 offset-2">
to
<div class="col col-md-8 offset-md-2">
If you want to know more, see the Bootstrap documentation.
Don't forget to change all images to WebP.
43
Replies
Do the controls have anything to do with it? The arrows are shifting up and down, not holding their place. I don't know if I'm explaining things correctly.
By @Haybound
See in bold red below, you don't appear to need those 2 lines, which is what is making the navigation arrows/page content jump up and down as it adds extra padding when a specific 'carousel-item' container is selected. The padding is not on your other 'carousel-item' container so when the selected 'carousel-item' is active it gets the extra padding or not if its not present, making the layout vertically jump down as the padding gets added and up again when the padding is not present.
<div id="carousel-selector-11" class="thumb col-4 col-sm-2 px-1 py-2" data-target="#myCarousel" data-slide-to="9">
<img src="images/carousel/carousel-australian-zebra.jpg" class="img-fluid" alt="zebra finch">
</div>
<div class="col-2 px-1 py-2"></div>
<div class="col-2 px-1 py-2"></div>
Bingo! 😊
https://www.greenbeaks.com/aviary.html
By @Haybound
Only issue l have is you need to move the thumbnail arrows away from the first and last images because if you click the first or last image in the thumbnail set it moves to the next set of thumbnails but the large image doesn't reflect the first or last image clicked on, which is rather confusing.
Thanks, Oz! Another challenge solved. I'll learn how to move my scroll arrows, now.
My goal was to have a 36+ image carousel. I haven't been able to find any tutorials, the do's and don'ts, of expansion. I was closer to succeeding, but then I started adding, deleting and moving tags to the point of no return. Throw in a couple of Dreamweaver crashes and this is the aftermath. https://www.greenbeaks.com/aviary-test.html
I won't give up. Everyone's help is invaluable. Ty
By @Haybound
You're probably NOT copying, pasting and altering the 'data-slide-to' attribute/s correctly.
For the thumbnail images you just need to copy and paste the <div class="carousel-item"> </div> container to beneath the last <div class="carousel-item"> </div> container then update the div ids, so the next sequence of ids will be <div id="carousel-selector-12" up to <div id="carousel-selector-17". You also need to alter the data-slide-to=" " attribute which is associated with each div to reflect the id of the <div> which contains the thumbnail image, so data-slide-to="12" up to data-slide-to="17"
For the large images you just need to copy and paste the <div class="carousel-item"> </div> container to beneath the last <div class="carousel-item"> </div> container 6 times and update the data-slide-number=" " attribute in sequence so, 12 - 17
If you take it slowly and carefully copy, paste and update the squence of data attributes, you can do it.
I think I've done that. But, I don't know why the carousel isn't moving, or why the thumbnails aren't on one row, moving.
By @Haybound
Nope you have NOT done that at all. You've started to introduce additional thumbnail galleries instead of including all the thumbnail images in the 1 thumbnail gallery, which is why youre creating seperate rows of thumbnails and not a single row.
<div id="carousel-thumbs2" class="carousel slide" data-interval="false" data-ride="carousel">
Go back to a cleaner version and introduce 1 set of 6 thumbnail images and larger images at a time and then test it before moving on to introducing the next 6. You're not experienced enough to try and copy and paste all the Bootstrap code in one go, it's a dogs dinner at best and in the hands of the inexperienced becomes unmanagable.
You must weigh the importance of multiple images with the hit you're taking on page performance. Every image, script, background image, etc... adds up. 100 KB x 36 images = 3.6 MB.
Google PageSpeed Insights rates mobile performance at 62 out of 100.
I would start by replacing the oversized page background-image with a background-color of beige or antiquewhite. And limit the Carousel images to under 1 MB.
You must weigh the importance of multiple images with the hit you're taking on page performance. Every image, script, background image, etc... adds up. 100 KB x 36 images = 3.6 MB.
Google PageSpeed Insights rates mobile performance at 62 out of 100.
I would start by replacing the oversized page background-image with a background-color of beige or antiquewhite. And limit the Carousel images to under 1 MB.
By @Nancy OShea
That could be improved. At the moment the OP is using the large images as the thumbnails too. Thumbnails should be reduced to the actual thumbnail size needed.
Obviously using a lot of excessive/repetitive code on page load doesn't help matters but that's the trade off when you're not just loading the images needed at the time.....a skilled operator could do that, but that cant be expected from someone who is relatively inexperienced.
'Accessibilty' and 'Best Practice' is good though so with some weight removed from the images the 'Performance' level should rise - my results for 'mobile' show as 66% so Lighthouse shouldnt be considered the be all and end all, it just provides some thoughtful results to consider.
AdChoices