Which widget do you use with Comslider? 

You can use the html code that contains the <iframe> code in the html widget.

While I have not used this myself - I believe you need to iFrame it in.

Funny I just posted on this a little while ago.

It is another option that is CSS and HTML

• The Search for a Better Slider - Option 1

dklinger wrote:

Use the HTML widget.

Here is my mojo with some key stuff...kinda blurred out.

Ha! @dklinger just beat me!

Ah - looks like we’re all typing together - LOL

I see the code has <iframe> in it which is what I figured but I will stand corrected on using the iFrame widget.

Do I get the best answer😁? I am so close to the hero rank….I can almost taste it.

CSS 

gstager wrote:

While I have not used this myself - I believe you need to iFrame it in.

Funny I just posted on this a little while ago.

It is another option that is CSS and HTML

• The Search for a Better Slider - Option 1

 

I think CSS may be best as iframes are know for security issues. We use CSS to do SLIDING PANELS. 

/* ////////////////////////////////
    SLIDING PANELS
used for Article tiles in Help Center and Job Aid Portal
//////////////////////////////// */
    .final__slide{
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    .final__slide img{
        display: inline-block;
        vertical-align: middle;
    }
    .final__slide-content{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom:0;
        width:100%;
        height: 100%;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left;
        padding:20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background-color: rgba(0, 45, 115, 0.9);
        color: #ffffff;
        transition: transform 0.3s ease;
        -webkit-transition: transform 0.3s ease;
    }
    .final__slide:hover .final__slide-content{
        transform:translate(0, 0);
        -webkit-transform:translate(0, 0);
    }
    .final__slide-content a{
        color: white;
    }
    /*Directions*/
    .slide-top .final__slide-content{
        transform:translate(0, -100%);
        -webkit-transform:translate(0, -100%);
    }
    .slide-left .final__slide-content{
        transform:translate(-100%, 0);
        -webkit-transform:translate(-100%, 0);
    }
    .slide-right .final__slide-content{
        transform:translate(100%, 0);
        -webkit-transform:translate(100%, 0);
    }
    .slide-bottom .final__slide-content{
        transform:translate(0, 100%);
        -webkit-transform:translate(0, 100%);
    }

Hi @karilynnrussell - not sure if you have solved this or not yet, but if not - the problem may be the code you are copying.  Docebo don’t allow JavaScript, and so you need to make sure you copy the iFrame code instead.  It’s underneath the main HTML code:

It took us a while to figure that one out 😀

I tried it on the sandbox environment using both, the iframe and HTML widget, but when I test the URL, the slider has no functionality:

This slider sample was made with a 14-days trial account which has expired by the time I tried adding the codes on the sandbox. I am guessing that the URL is broken until account is switched to a paid one. =)

Has anybody had the same scenario?

Txs!

Cesar

@archoll72 I had the same thing happen. None of my slideshows were available after my 14-day trial ended. They were restored when I purchased a Comslider.com subscription. 

@karilynnrussell Thanks for the input! We went with their Premium account a few weeks ago, so I’ll use that one to continue testing. =) 

ok so it has to be iframe not embed code? @dklinger 

Jeremy.DeLong wrote:

 CSS 

gstager wrote:

While I have not used this myself - I believe you need to iFrame it in.

Funny I just posted on this a little while ago.

It is another option that is CSS and HTML

• The Search for a Better Slider - Option 1

 

I think CSS may be best as iframes are know for security issues. We use CSS to do SLIDING PANELS. 

/* ////////////////////////////////
    SLIDING PANELS
used for Article tiles in Help Center and Job Aid Portal
//////////////////////////////// */
    .final__slide{
        position: relative;
        display: inline-block;
        overflow: hidden;
    }
    .final__slide img{
        display: inline-block;
        vertical-align: middle;
    }
    .final__slide-content{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom:0;
        width:100%;
        height: 100%;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: left;
        padding:20px;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        background-color: rgba(0, 45, 115, 0.9);
        color: #ffffff;
        transition: transform 0.3s ease;
        -webkit-transition: transform 0.3s ease;
    }
    .final__slide:hover .final__slide-content{
        transform:translate(0, 0);
        -webkit-transform:translate(0, 0);
    }
    .final__slide-content a{
        color: white;
    }
    /*Directions*/
    .slide-top .final__slide-content{
        transform:translate(0, -100%);
        -webkit-transform:translate(0, -100%);
    }
    .slide-left .final__slide-content{
        transform:translate(-100%, 0);
        -webkit-transform:translate(-100%, 0);
    }
    .slide-right .final__slide-content{
        transform:translate(100%, 0);
        -webkit-transform:translate(100%, 0);
    }
    .slide-bottom .final__slide-content{
        transform:translate(0, 100%);
        -webkit-transform:translate(0, 100%);
    }

 

Where do the images come from here? this is pretty amazing.

We do still want to integrate comslider - what are the best settings on the COMSLIDER side (NOT the docebo side) for a 1/3 width widget please? If anyone has suggestions that would be lovely. I’m having various cropping issues and have a bunch of fires burning right now so no time to play with comslider settings sadly. (explanation not excuse for my laziness)

Thank you all! Y’all are the very best.

Bring a native slider to Docebo - vote here!

https://community.docebo.com/ideas/idea-built-in-basic-image-slider-7634