How to add an image slider to Clean theme using CSS3

How to add an image slider to Clean theme using CSS3

Mary Evans -
回帖数：8

I discovered that if I added a logo to Clean theme via the Clean custom setting page and added some CSS3 to animate it, it actually looks like a slider.

Here is what you need to do:

  1. Download and save the attached flower-sprite.jpg image to your desktop.
  2. Login to your Moodle 2.5 test site
  3. Select the Clean theme
  4. Click Clean theme's custom setting page from the links under Site Administration > Appearance > Themes in the side block
  5. Now Add or drag-n-drop the flower-sprite.jpg into the image loader.
  6. Next add the following CSS3 to the Custom CSS box provided in the Clean settings page:
    a.logo {
    width:100%;
    height:110px;
    position:relative;
    animation: imageSlider 5s infinite ease-in-out;
    }

    @keyframes imageSlider {
    from {background-position: 0 0;}
    to {background-position: -1024px 0;}
    }
  7. SAVE Settiings

That's it. 微笑

Enjoy!

cheers

附件 flower-sprite.jpg
平均分：Useful (1)
回复Mary Evans

Re: How to add an image slider to Clean theme using CSS3

Gareth J Barnard -
Core developers的头像 Particularly helpful Moodlers的头像 Plugin developers的头像

Nice one Mary, it would be cool if the YUI port of the Bootstrap JS version of Carousel http://jshirley.github.io/bootstrap/javascript.html#myCarousel could be placed in Bootstrap base and made to work 微笑

平均分： -
回复Gareth J Barnard

Re: How to add an image slider to Clean theme using CSS3

Mary Evans -

Is the Carousel not working? It probably would be better. I have been reading about YUI, I did not realise it was a more robust framework, and better suited to large CMS sites like Moodle.

I have obviously been away from Uni too long and need a refresher...all this new technology is doing my head in.

I'd love to have a go converting jQuery to YUI as per the jsrosettastone method. Looks like my kind of thing. LOL

rosettastone! humph!

平均分： -
回复Gareth J Barnard

Re: How to add an image slider to Clean theme using CSS3

Mary Evans -

This is another similar idea the works on the same principle I discovered.

http://demosthenes.info/blog/495/Make-A-CSS3-Animated-Image-Slider

although this uses <img> tags in the page which are not cached in Moodle, so you end up downloading them to your PC everytime you click on the page.

平均分： -
回复Mary Evans

Re: How to add an image slider to Clean theme using CSS3

James Cracknell -

If anyone wanted to pay for one - this is also available as PHP code.  I use it in Joomla.

J.

平均分： -
回复Mary Evans

Re: How to add an image slider to Clean theme using CSS3

James Cracknell -

If anyone wanted to pay for one - this is also available as PHP code.  I use it in Joomla.

J.

平均分： -