@kferguson I know you were playing around with alternatives to comslider.  Check this out. 

Hi @gstager,

Hope you are well and thanks for the above. 

Could you please copy the whole code you would use as if you were pasting the example you attached above? I’m new to this and each time I try to copy the above, some of the text won’t line up and it shows above the images which then means there are just 4 images in a column rather than a slider.

Appreciate your help with this.

Thanks,

Jake

@JChap - The code above is already exactly as you have requested - only my URL and caption text for the images are different for the HTML code. You’ll need a path to your own and it sounds as though you have that.

If you are seeing the actual code text on your page afterwards it is likely that there is a missing character somewhere else in your code that breaks it.

The code above is placed in two different places.

The CSS is placed in the Branding and Look part of your admin settings.

The HTML is what you use for the HTML/WYSIWYG widget you place on a page.

Do you have other CSS mods in your branding and look section? or just this?

I would start by looking at the HTML

1. Double check the HTML in the widget is accurate. Every quote and bracket must be in the right place. 
2. You might try re-pasting the HTML code above “as-is”. The slider should work but will have the little broken image icon along with the generic caption
3. Be sure to fully save your page and then view. Sometimes the preview tab in the editor does not give the actual end result.

I went ahead and pasted the above code to re-create what I had done as to verify that I didn’t get a typo in the post but it worked ok for me.

Try not to worry about the formatting of the text as the widget will hose that up real fast after you save.

If this doesn’t help resolve - perhaps you can share a couple screenshots to work with.

Hi @gstager,

Thanks for confirming!

We don’t have any CSS set up yet - still understanding what it is and how it works.

So without the CSS set up, the images and caption text do work, however it isn’t a slider; it just comes up as 4 images vertically with the caption underneath (see attached). Is this due to not having the CSS set up yet?

Again, really appreciate your assistance with this!

Thanks,

Jake

@JChap - yes you need the CSS in place. That provides the styling and makes it slide.

You’ll need to go under Branding and Look in the admin panel. Paste the CSS code under the 7.0 section.

As a side note, you will want to use images that are all sized the same as well for a cleaner look.

Thanks @gstager!

Apologies for being a bother, however I am sure there may be a few others who have a similar lack of knowledge on CSS’s to me.

So with the CSS, can I just paste the exact CSS wording you have on this post (including all the lines with /**) on a new line under the current CSS content (screenshot of it below - so from line 19)?

Apologies if these are silly questions!!

Thanks again for your help!

@JChap No worries - I am glad to help.

Yes, you can paste the code there in its entirety.

Personally, I would leave one blank line between blocks for readability.

Thank you @gstager! Works perfectly! 

Curious on your personal one Greg are you manually adding the content like you have above? I have built similar to this but too lazy to manually update all the time so usually have the html load dynamically from a SharePoint list. (Also let’s others load and update, and schedule changes) have you played with any kind of dynamic setup?

Awesome - glad to hear you got it going!

No - have not played with anything like that but I only have one slider at the moment and I don’t anticipate having to change out pictures so frequently as to become a burden.

We don’t have Sharepoint and I work outside of both IT and Marketing as a sort island unto myself so I cannot even access any web facing storage for files to even humor the idea of playing around. I just upload pictures via the HTML widget and use those URLs.

So it’s funny as I am not IT or marketing (or even the learning group now) the reason I use SharePoint is as a workaround for not having a proper content server, and it’s what we have :)

Basically the list acts as a database/lookup table that anyone in the company can be granted access to edit. The real beauty is the scheduling and the ability to distinguish slides for different roles (each role has a different homepage with gives a URL variable to check against). 
 

Sounds like you’ve got some sweet skills.

Hi @gstager! Thank you for this. This may provide the exact solution I am looking for. 

Apologies in advance as this may be a very basic question, but is it possible to change the ‘widget’ height of this slider? Or is that based on the row the HTML widget is put into?

Also, regarding the need to tweak the code depending on the number of images in a slide...how do I change percentages/time accordingly?

The widget is meant to scale with the images - at least that was the intent.

My example uses a full row widget and all the images are 1532 x 400.

If you want something a bit smaller, you should be able to work with smaller images and/or a smaller widget and  the widget will respond accordingly. 

I recommend using all images of the same dimension for best results.

Hopefully that helps.

Thanks Greg, I will give that a shot. Can I ask, how did you determine timing for each slide? For example, if I use 3 slides instead of 4. Or even increase to 5 how do I account for such changes?

Good question.

Once you decide the number of images and total duration of the animation we can use that information to make the adjustments in a few places.

Take a look at the following three blocks of code.

In my example, I use four images but I actually use the first image twice so that it appears at the beginning and end of the animation. This helps it give the appearance of smoothly starting over from the beginning. So I have only four unique images but I must configure for 5. The highlighted value is the percentage of the whole that each of the five images would be  100 ÷ 5 = 20. You will adjust this value accordingly if 3 unique images - Use first one twice - so 4 images (100 ÷ 4 = 25) set the width for 25%.

Now take a look at the next block.

In this block I have two things to adjust. The width will be 100% for every image. In my example 4 unique images but we use the first one twice - so five images total. Therefore width is 500%

The animation duration is a more loosely calculated value. This is the amount of time for the entire animation to run from start to finish so just consider how long you would like each image to show and multiply that out. 30 seconds allows 5 images to show for approximately 6 seconds (little less) each with some time in between with transitions.

Now look at the keyframes block. This will be the mind boggler.

For smoothness of timing - I I worked to make all the percentages follow a pattern.

First of all I have five different percentages - one for each image - starting with 0%

If you add images, you’ll simply need to divvy up the percentages more. You may need to do a little trial and error to get the feel you like. With my example I liked the transition time that 4% gave me and there were four transitions so that is 16% of my total animation duration leaving me with 84% for static display which for the four images is 21% each. I then simply segmented my 100% up that way.

If I put in an extra picture, I might start with a couple options for test.

1. 4% transition time x 5 or 20% of total leaving 80% static display for a total of 16% each picture.
2. 3% transition time x 5 or 15% of total leaving 85% static display for a total of 17% each picture.

Adjust the total duration to affect the desired outcome.

Here is what using option 2 above would look.

/** For five pictures **/

@keyframes slide {
  0% { left: 0%; }
  17% { left: 0%; }
  20% { left: -100%; }
  37% { left: -100%; }
  40% { left: -200%; }
  57% { left: -200%; }
  60% { left: -300%; }
  77% { left: -300%; }
  80% { left: -400%; }
  97% { left: -400%; }
  100% { left: -500%; }
  }

I hope this made some sense.

After finding out that comslider is not something I can use at my organization for security reasons, I endeavored to use this  solution. And oh wow my “knows enough to be dangerous” level of expertise did not prepare me for the amount of math I had to do to make this work with three images instead of four.

To save you some time, below is my CSS for using three images. To make this look right, make sure there are actually four images in your slideshow, but the first image should also be your last image. Enjoy!

/** Begin Slider **/
/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/

@keyframes slide {
  0% { left: 0%; }
  28% { left: 0%; }
  33% { left: -100%; }
  62% { left: -100%; }
  66% { left: -200%; }
  96% { left: -200%; }
  100% { left: -300%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 400%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 25%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }
  /** End Slider **/

Hmm. This sounds like a perfect example case for using an excel workbook to create/manage/update css and html things. Will take a look to make one. 

This post is meant to be an attempt at helping folks implement a slider type of widget with images that cycle through in an endless loop. No interaction. Down the road, I will offer one that has some manual selection to it. That is why this is titled as option 1.

There has indeed been a number of postings referencing Comslider as a great resource for this sort of thing. I have not used it personally but I would venture a guess that it is much nicer and simpler than what I am about to offer here but this is free - so I guess you get what you pay for - LOL. At any rate - I figure that for some folks - Comslider may not be an option. If that is the case - you have one here.

This is a CSS and HTML option - no JavaScript. This would still require some work on your part to tweak it for your number of images and to put in your image URLs - etc. I will try to help with that part as best I can.

Here is a quick look at the one I built as a sample. Sorry it is a little small and blurry but I had to get it under the 5MB limit to post it in this thread. You get the idea though. My example cycles through four images continuously for about 5 seconds each. (I reduced time for the gif).

 

As with other things like this - there are two parts. The CSS for the Branding and Look section and the HTML for your widget.

In this case - I went with a full sized row for the widget.

Take a look at the @keyframes block at the top.

This will need adjusting if you change the number of images.

I calculated this out so each image had the same amount of percentage and percentage spacing in-between. This way the transition between images stays smooth at the same speed.

Also - I end the transition to the last image (same as first) right at 100% so that it can restart the animation at 0% with the first image for the same amount of time. That is one trick for the loop. The other trick is in the HTML. (see below)

What we are doing is actually sliding all the images off in a big line which is why the transitions are in increments of 100% so if you add more images or remove some - you’ll have to adjust to keep it smooth.

There are two other spots you’ll need to tweak if you change the number of images. See the comments for more on those.

/** This is the timing of the animated images. **/
/** These will need to be adjusted if you change the total number. **/

@keyframes slide {
  0% { left: 0%; }
  21% { left: 0%; }
  25% { left: -100%; }
  46% { left: -100%; }
  50% { left: -200%; }
  71% { left: -200%; }
  75% { left: -300%; }
  96% { left: -300%; }
  100% { left: -400%; }
  }

/** This block helps use the whole widget and keeps out scroll bars. **/

  #bannerSlider { 
    width: 100%;
    overflow: hidden; 
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It needs to correspond with the number of images you have. **/

  figure.slider { 
    position: relative;
    width: 500%;
    animation-name: slide; 
    animation-duration: 30s;
    animation-iteration-count: infinite;
  }

/** This block has a key value for the width. **/
/** Pay close attention to this value. **/
/** It should represent a fraction of the whole for each image. **/
/** Ex. 5 images - each image is 20 % **/

  figure.slider figure { 
    width: 20%;
    height: auto;
    display: inline-block; 
    position: inherit; 
  }

/** This block refers to each image. **/

  figure.slider img { 
      width: 100%;
      height: auto;
  }

/** This block formats the label caption at the bottom **/
/** You could tweak the colors and font as desired **/

  figure.slider figure figcaption { 
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    color: #ffffff;
    width: 100%;
    font-size: 32px;
    padding: 10px; 
  }

 

Here is the HTML for the widget. I swapped out the specific details

The other trick to making this loop work - notice that there are five images but the first one and the fifth one are the same. So in a four image set - you are working with “5” images.

<div id="bannerSlider">
	<figure class="slider">
		<figure>
			<img src="https://path/to/your/image1.jpg" alt="" />
			<figcaption>Image 1 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image2.jpg" alt="" />
			<figcaption>Image 2 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image3.jpg" alt="" />
			<figcaption>Image 3 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image4.jpg" alt="" />
			<figcaption>Image 4 Caption</figcaption>
		</figure>
		<figure>
			<img src="https://path/to/your/image1.jpg" alt="" />
			<figcaption>Image 1 Caption</figcaption>
		</figure>
	</figure>
</div>

Hope this helps someone out today!

@gstager It works 100%...Thanks for sharing the handy codes.

We have a HTML widget in landing page which shows the upcoming events and Due dates of the compliance courses.

Is that possible to blink/highlights the announcements in docebo without help of CSS? Any Inputs?

Without using CSS..?

I suppose you could host a JavaScript file or other solution elsewhere that does something like that without CSS and then iFrame it in. Otherwise - No

@Baskaran venugopal - check out comslider - better option for your case.

@dklinger  I cannot use Comslider due to security reasons. So, I've to relay only on CSS codes…

@gstager one last help, current CSS code works well, and it does not have any buttons init (Showing < > or radio buttons) I tried googling and some code websites, but doesn't work for me (I don't have enough knowledge on CSS) Is that possible to share the codes?