Skip to main content

A New Slider - Infowheel/Slideshow Code

  • April 14, 2025
  • 5 replies
  • 167 views
JZenker
Guide II
Forum|alt.badge.img+2

It was great meeting a lot of the Community at Inspire 2025 this year!

As we all get home and situated, I want to say thank you to all who joined my session - Beyond the Basics: Leveraging Built-in Tools to Enhance Your Platform. It will be available on Docebo University in the coming weeks.

For the community, I wanted to share a slider tool that uses purely CSS & HTML. No more needing to pay extra for something like Comslider.

 

Preview:

 

This slider users the left pane to display an image of your choice, and the right pan has a header, top text, button, and bottom text.

I’ve commented the code so you can easily know where to add your image links, update header and subtext, as well as button links and button text.

Feel free to take this code into the tool of your choice to change colors, font styles, and more.

Enjoy! Look forward to Inspire 2026.

 

CSS:

/* Slide Scroller Home */

.homeslider-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.homeslider-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homeslider-slides {
    display: flex;
    height: 100%;
    align-items: center;
    transition: transform 0.5s ease-in-out;
}

.homeslider-slide {
    min-width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #fff;
}

.homeslider-slide-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    max-width: 100%;
    padding-bottom: 50px;
}

.homeslider-slide img {
    width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
    margin-right: 200px;
    max-width: 100%;
}

.homeslider-slide-content div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    width: calc(100% - 300px);
    max-width: 600px;
}

.homeslider-slide-content h2 {
    margin: 30px 0 !important;
    font-size: calc(1rem + 1vw) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    word-wrap: break-word;
    line-height: 1.1 !important;
    text-align: left;
}

.homeslider-slide-content p {
    margin: 30px 0 !important;
    color: #000000 !important;
    width: 100% !important;
    font-size: calc(.7rem + 0.5vw) !important; /* Smaller font size */
    font-weight: 500;
    word-wrap: break-word;
    line-height: 1.3 !important;
    text-align: left;
}

.homeslider-button-link {
    display: inline-block;
    background-color: #000000 !important;
    color: #fff !important;
    text-decoration: none !important;
    padding: 15px 30px !important;
    cursor: pointer !important;
    font-size: calc(0.45rem + 0.5vw) !important;
    font-weight: bold !important;
    margin: 30px 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
    width: fit-content;
}

input[type="radio"] {
    position: absolute;
    z-index: 99;
    width: 30px;
    bottom: 20px;
    transform: translateX(-50%);
    left: 50%;
    cursor: pointer;
}

input[type='radio']:after {
    width: 16px;
    height: 16px;
    background-color: #ccc;
    border-radius: 15px;
    top: -2px;
    left: 7px;
    content: '';
    display: inline-block;
    visibility: visible;
    border: none;
    position: absolute;
}

input[type='radio']:checked:after {
    background-color: #333;
}

.homeslider-container>input:nth-child(1) {left: 44%;}
.homeslider-container>input:nth-child(2) {left: 46%;}
.homeslider-container>input:nth-child(3) {left: 48%;}
.homeslider-container>input:nth-child(4) {left: 50%;}
.homeslider-container>input:nth-child(5) {left: 52%;}
.homeslider-container>input:nth-child(6) {left: 54%;}

#home_slider_slide_1:checked~.homeslider-slider .homeslider-slides {
    transform: translateX(0%);
}

#home_slider_slide_2:checked~.homeslider-slider .homeslider-slides {
    transform: translateX(-100%);
}

#home_slider_slide_3:checked~.homeslider-slider .homeslider-slides {
    transform: translateX(-200%);
}

#home_slider_slide_4:checked~.homeslider-slider .homeslider-slides {
    transform: translateX(-300%);
}

#home_slider_slide_5:checked~.homeslider-slider .homeslider-slides {
    transform: translateX(-400%);
}

#home_slider_slide_6:checked~.homeslider-slider .homeslider-slides {
    transform: translateX(-500%);
}

.homeslider-footer {
    font-size: calc(.7rem + 0.5vw) !important; /* Smaller font size */
    color: #000000;
    text-align: left;
    width: 100%;
    font-weight: 500;
    margin-top: 10px; /* Adjusted margin-top for spacing */
}

@media (max-width: 1200px) {
    .homeslider-slide img {
        width: 250px;
        height: 400px;
        margin-right: 100px;
    }

    .homeslider-slide-content div {
        width: calc(100% - 250px);
        max-width: 500px;
    }

    .homeslider-slide-content h2 {
        font-size: calc(14px + 1vw) !important;
    }

    .homeslider-slide-content p {
        font-size: calc(10px + 0.5vw) !important;
    }
}

@media (max-width: 768px) {
    .homeslider-slide {
        flex-direction: column;
        text-align: center;
    }

    .homeslider-slide img {
        margin-right: 0;
        margin-bottom: 20px;
        width: 200px;
        height: 300px;
    }

    .homeslider-slide-content div {
        width: 100%;
        max-width: 100%;
    }

    .homeslider-slide-content h2 {
        font-size: calc(12px + 1vw) !important;
    }

    .homeslider-slide-content p {
        font-size: calc(8px + 0.5vw) !important;
    }

    .homeslider-slide-content .homeslider-button-link {
        font-size: calc(8px + 0.5vw) !important;
        padding: 10px 20px !important;
    }
}

@media (max-width: 480px) {
    .homeslider-slide img {
        width: 100%;
        height: auto;
        margin-right: 0;
    }

    .homeslider-slide-content h2 {
        font-size: calc(10px + 1vw) !important;
    }

    .homeslider-slide-content p {
        font-size: calc(6px + 0.5vw) !important;
    }

    .homeslider-slide-content .homeslider-button-link {
        font-size: calc(6px + 0.5vw) !important;
        padding: 8px 16px !important;
    }
}









HTML:

<div class="homeslider-container">
    <input type="radio" name="homeslider_slider_group" value="slide 1" id="home_slider_slide_1" checked="checked" />
    <input type="radio" name="homeslider_slider_group" value="slide 2" id="home_slider_slide_2" />
    <input type="radio" name="homeslider_slider_group" value="slide 3" id="home_slider_slide_3" />
    <input type="radio" name="homeslider_slider_group" value="slide 4" id="home_slider_slide_4" />
    <input type="radio" name="homeslider_slider_group" value="slide 5" id="home_slider_slide_5" />
    <input type="radio" name="homeslider_slider_group" value="slide 6" id="home_slider_slide_6" />

    <div class="homeslider-slider">
        <div class="homeslider-slides">
            <div class="homeslider-slide">
                <div class="homeslider-slide-content">
                    <img src="YOUR IMAGE LINK HERE" alt="Random Image 1" />
                    <div>
                        <h2>SLIDE 1</h2>
                        <p>TOP SLIDE TEXT</p>
                        <a href="CALL TO ACTION LINK" id="button-1" class="homeslider-button-link">BUTTON TEXT</a>
                        <p class="homeslider-footer">BOTTOM SLIDE TEXT</p>
                    </div>
                </div>
            </div>
            <div class="homeslider-slide">
                <div class="homeslider-slide-content">
                    <img src=" YOUR IMAGE LINK HERE " alt="Random Image 2" />
                    <div>
                        <h2>SLIDE 2</h2>
                        <p>TOP SLIDE TEXT</p>
                        <a href="YOUR LINK HERE" id="button-2" class="homeslider-button-link">BUTTON TEXT</a>
                        <p class="homeslider-footer">BOTTOM SLIDE TEXT</p>
                    </div>
                </div>
            </div>
            <div class="homeslider-slide">
                <div class="homeslider-slide-content">
                    <img src="YOUR IMAGE LINK HERE" alt="Random Image 3" />
                    <div>
                        <h2>SLIDE 3</h2>
                        <p>TOP SLIDE TEXT</p>
                        <a href="YOUR LINK HERE" id="button-3" class="homeslider-button-link">BUTTON TEXT</a>
                        <p class="homeslider-footer">BOTTOM SLIDE TEXT</p>
                    </div>
                </div>
            </div>
            <div class="homeslider-slide">
                <div class="homeslider-slide-content">
                    <img src="YOUR IMAGE LINK HERE" alt="Random Image 4" />
                    <div>
                        <h2>SLIDE 4</h2>
                        <p>TOP SLIDE TEXT</p>
                        <a href="YOUR LINK HERE" id="button-4" class="homeslider-button-link">BUTTON TEXT</a>
                        <p class="homeslider-footer">BOTTOM SLIDE TEXT</p>
                    </div>
                </div>
            </div>
            <div class="homeslider-slide">
                <div class="homeslider-slide-content">
                    <img src="YOUR IMAGE LINK HERE" alt="Random Image 5" />
                    <div>
                        <h2>SLIDE 5</h2>
                        <p>TOP SLIDE TEXT</p>
                        <a href="YOUR IMAGE LINK HERE" id="button-5" class="homeslider-button-link">BUTTON TEXT HERE</a>
                        <p class="homeslider-footer">BOTTOM SLIDE TEXT</p>
                    </div>
                </div>
            </div>
            <div class="homeslider-slide">
                <div class="homeslider-slide-content">
                    <img src="YOUR IMAGE LINK HERE" alt="Random Image 6" />
                    <div>
                        <h2>SLIDE 6</h2>
                        <p>TOP SLIDE TEXT</p>
                        <a href="YOUR LINK HERE" id="button-6" class="homeslider-button-link">YOUR BUTTON TEXT HERE</a>
                        <p class="homeslider-footer">BOTTOM SLIDE TEXT</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

JeanetteMcVeigh
D
T

5 replies

JZenker
Guide II
Forum|alt.badge.img+2
  • JZenker
  • Author
  • Guide II
  • April 15, 2025

As mentioned in the session, please be sure to test in a site like CodePen before adding to Docebo

D
averygrammel
Contributor III
Forum|alt.badge.img+2
  • averygrammel
  • Contributor III
  • April 16, 2025

Excited to try this out! Thank you for sharing! 

- Avery Grammel
JZenker
A
Forum|alt.badge.img
  • Adimarzo
  • Newcomer
  • April 17, 2025

Thank you for sharing this!  It was great to meet you at Inspire and see your presentation!

JZenker
JZenker
Guide II
Forum|alt.badge.img+2
  • JZenker
  • Author
  • Guide II
  • April 18, 2025

Thank you for sharing this!  It was great to meet you at Inspire and see your presentation!

Thank you so much for joining!

gstager
Hero III
Forum|alt.badge.img+8
  • gstager
  • Hero III
  • October 9, 2025

This slider went and slid past my radar.

Looks like these are popping up all over now.

LOL

Greg
Terms & ConditionsCookie settingsAccessibility statement