• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

adding images to a carousel with thumbnails

Participant ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

Hi again, everybody! I've been working on this for days; it's time to call on the experts!

I have a couple of issues. This works...

https://www.greenbeaks.com/thumbnail-carousel.html

This doesn't. It jumps, and I don't why. Also, I have <div> issues.

https://www.greenbeaks.com/aviary-australian.html

Ultimately, I have a total of 36 slides that I'd like contained in one carousel. Of the dozens of ways I've tried to make it happen, none have been successful. tia

 

TOPICS
Bootstrap , Code , How to

Views

938

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 9 Correct answers

Community Expert , Apr 19, 2024 Apr 19, 2024

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.

 

Votes

Translate

Translate
LEGEND , Apr 20, 2024 Apr 20, 2024
quote

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

...

Votes

Translate

Translate
Community Expert , Apr 20, 2024 Apr 20, 2024

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.

 

Votes

Translate

Translate
LEGEND , Apr 21, 2024 Apr 21, 2024
quote

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.

Votes

Translate

Translate
Community Expert , Apr 22, 2024 Apr 22, 2024
  1. 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. 
  2. Images are best served using the the WEBP format. Converters can be found all over the web. I use WebP Converter program.
  3. 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
...

Votes

Translate

Translate
LEGEND , Apr 22, 2024 Apr 22, 2024

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

...

Votes

Translate

Translate
Community Expert , Apr 24, 2024 Apr 24, 2024

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>
        
...

Votes

Translate

Translate
LEGEND , Apr 24, 2024 Apr 24, 2024
quote

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

...

Votes

Translate

Translate
Community Expert , Apr 25, 2024 Apr 25, 2024
quote

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.

 

Votes

Translate

Translate
Community Expert ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

Thanks, Nancy. I did these and it did nothing to correct the problem I'm having.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

It seems to be working now. Refresh your page in browser (Ctrl + R or Ctrl + F5).

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

I have refreshed. https://www.greenbeaks.com/aviary-australian.html

The footer is moving up and down???

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

The page is moving slightly due to increased size of images in your carousel. For best results, all images should have the same height & width as the first image.  Or turn off automatic slide option.

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

Every image is the same size, 900x600px

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 19, 2024 Apr 19, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 20, 2024 Apr 20, 2024

Copy link to clipboard

Copied

quote

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 20, 2024 Apr 20, 2024

Copy link to clipboard

Copied

THANK YOU!! That did it. I'm going to try to add more images, now. Maybe this is why I've been unsuccessful, so far. When I add slide 12, it drops below #11 and the carousel stops.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 20, 2024 Apr 20, 2024

Copy link to clipboard

Copied

I've tried centering this thing with containers, as I read in Nancy's tutorial. I'm doing something wrong???

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 20, 2024 Apr 20, 2024

Copy link to clipboard

Copied

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 20, 2024 Apr 20, 2024

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 22, 2024 Apr 22, 2024

Copy link to clipboard

Copied

quote

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

Seems like the scroll arrows should be on the slide and not on the thumbnails. The thumbnail under the scroll arrow is unclickable. I'm weary.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

I feel the automatic slider with prev & next buttons and thumbnails is overkill, too much stuff going on.

data-interval="false" disables slider autoplay, 

or slow it down with a value in miliseconds, data-interval="10000"

or remove the previous & next buttons.

https://getbootstrap.com/docs/4.6/components/carousel/

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 21, 2024 Apr 21, 2024

Copy link to clipboard

Copied

That stopped the thumbnails from scrolling. 🙂 Thanks. But, they're not active. Nothing happens when you click on a thumbnail, except for third row, farthest right. You can click on it and the slider will change to that image, but that will only happen once. You won't be able to change it again. Of course, the elephant in the room is a carousel with 36 slides that doesn't move.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 22, 2024 Apr 22, 2024

Copy link to clipboard

Copied

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. 

https://pagespeed.web.dev/analysis/https-www-greenbeaks-com-aviary-test-html/4pqpbd5swo?form_factor=...

 

image.png

 

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.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 22, 2024 Apr 22, 2024

Copy link to clipboard

Copied

quote

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. 

https://pagespeed.web.dev/analysis/https-www-greenbeaks-com-aviary-test-html/4pqpbd5swo?form_factor=...

 

image.png

 

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 22, 2024 Apr 22, 2024

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Apr 22, 2024 Apr 22, 2024

Copy link to clipboard

Copied

https://www.greenbeaks.com/aviary.html

My thumbnails are about 50% smaller; I can do better. I don't know what you mean in your second paragraph???

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines