Known Participant

Answered

adding images to a carousel with thumbnails

Forum|Forum|1 year ago
April 19, 2024
1 reply
5020 views

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

This topic has been closed for replies.

Correct answer BenPleysier

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.

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 @Haybound23605476

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.

Nancy OShea

Community Expert

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

H

Haybound23605476Author

Known Participant

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

BenPleysier

Community Expert

I did as you suggested. https://www.greenbeaks.com/aviary.html

Am I loading more images than necessary?

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>
        .thumbnails {
            display: flex;
            margin: 1rem auto 0;
            padding: 0;
            justify-content: center;
        }

        .thumbnail {
            width: 70px;
            height: 70px;
            overflow: hidden;
            list-style: none;
            margin: 0 0.2rem;
            cursor: pointer;
        }

        .thumbnail img {
            width: 100%;
            height: auto;
        }

        .splide__slide img {
            width: 100%;
            height: auto;
        }

        .splide__slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
</head>

<body id="index">
    <main>
        <div class="container mt-5">
            <div class="row">
                <div class="col-8 offset-2">
                    <section id="main-carousel" class="splide" aria-label="My Awesome Gallery">
                        <div class="splide__track">
                            <ul class="splide__list">
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-bay-headed-tanager.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-bearded-tit.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-chlorophonia.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-burnished-buff-tanager.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-dacnis.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-euphonia.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-honeycreeper.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-orange-breasted-tanager.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-pekin-robin.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-spotted-tanager.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-turquoise-tanager.jpg" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-warbling-white-eye.jpg" alt="">
                                </li>
                            </ul>
                        </div>
                    </section>
                    <section id="thumbnail-carousel" class="splide mt-2" aria-label="The carousel with thumbnails. Selecting a thumbnail will change the Beautiful Gallery carousel.">
                        <div class="splide__track">
                            <ul class="splide__list">
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-bay-headed-tanagerTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-bearded-titTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-chlorophoniaTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-burnished-buff-tanagerTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-turquoise-tanagerTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-euphoniaTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-honeycreeperTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-orange-breasted-tanagerTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-pekin-robinTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-spotted-tanagerTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-turquoise-tanagerTN.webp" alt="">
                                </li>
                                <li class="splide__slide">
                                    <img src="https://www.greenbeaks.com/images/carousel/carousel-warbling-white-eyeTN.webp" alt="">
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener( 'DOMContentLoaded', function () {
        var main = new Splide( '#main-carousel', {
            type      : 'loop',
            autoplay  : true,
            rewind    : true,
            pagination: false,
            arrows    : false,
        } );

        var thumbnails = new Splide( '#thumbnail-carousel', {
            fixedWidth  : 100,
            fixedHeight : 60,
            gap         : 10,
            rewind      : true,
            pagination  : false,
            isNavigation: true,
            breakpoints : {
            600: {
                fixedWidth : 60,
                fixedHeight: 44,
            },
            },
        } );

        main.sync( thumbnails );
        main.mount();
        thumbnails.mount();
        } );    
    </script>S
</body>

</html>

Notes:

The code uses Bootstrap 5.3.3 for styling
The code has been created specifically to show the carousel. It does not allow for things like the lang attribute
Image have an absolute link to show the images. These links should be changed to root relative. In other words, remove https://www.greenbeaks.com
Styles and scripts are best moved to their own files
A main element has been introduced to make it easier for assistive technology and search engines to find the main content

Please enjoy.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded