Amazing Blogger JQuery Featured Slideshow Slides Images And Videos

Featured Sliders also known as Slideshows, Image Sliders, Featured Posts Sliders and Carousels are very popular among bloggers.They can be used to link to featured content in your blog or just as an image carousel for your pictures.I have not really covered sliders or slideshows too much on Spice Up Your Blog.The main reason is there are so many tutorials already available for Blogger sliders, i did share 5 of my favorite Blogger Featured Sliders from other blogs not too long ago.But over the coming weeks i have lined up some very unique Slideshow options including the one in this post that not only can slide through images but also accepts html as slides !

The main advantage of this is you can actually have YouTube videos (Or Any Videos) as part of the slideshow.That’s not a thumbnail or image linking to the video it’s the actual video that can be played within the slideshow, How cool is that.

The slider is called the ‘Anything Slider’ and was created by Chris Coyier of Css Tricks, Check them out.There are tons more features but first Lets look at the live demo, you will notice every second slide i have set to be a video.

As you will have seen the slideshow has some cool extra features on the face such as it is both auto scroll and manual scroll, numbered tabs to jump to each slide are below, a start stop option is also available, the slide will also stop when your cursor hovers over a slide.

$(&#39;#slider2&#39;).anythingSlider({width : 600, // if resizeContent is false, this is the default width if panel size is not definedheight : 350, // if resizeContent is false, this is the default height if panel size is not definedresizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewportautoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or notnavigationFormatter : formatText // Format navigation labels with text})

We have now added the Css, jQuery and javascript to make the Featured Slider work next we need to add the actual content.

Adding The Slider And Content

You will want to add the slider below your header across your blog.This position is known as ‘crosscol’ or Cross Column.

Some templates may not have that section available, if your blog doesn’t you can see how to make it available here – Full Width Cross Column Gadget.

We all have it now so you can click ‘Add A Gadget’ and choose ‘Html/Javascript’.

Adding slides could not be easier, in your html/javascript gadget you add an opening tag which is <ul id=”slider1″> at the top and a closing tag </ul> at the bottom and the images or videos go in the middle wrapped in list tags :