Category - Projects

jQuery Custom Slider

So right off the bat in the planning stages of redesigning the site, the first thing I knew I wanted to do was write my own slider. Personally, I love the vertical text look, but finding a slider that already had that available and free, turned out to be pretty tough. With all the work I did on the jQuery stuff for CST Industries channel partners and sales maps, I felt pretty comfortable diving at this one.

My recent exploration into the world of SEO has taught me that search engines don't run javascript. So I knew I needed to build the "slider" with some great basic html. Give it a good basic look and feel for when javascript wasn't enabled. It didn't have to be super pretty, just available for a search engine to crawl, and if someone wasn't using javascript, they would still be able to view it.

After that it was a matter of using jQuery to add the effects I needed. I accomplished mostly by adding some classes with jQuery that did a lot of the css effects. This made sure the page wouldn't start out with those css settings and throw everything off if javascript wasn't running to finish it all out.

This ended up being a great thing as the CSS transform effect I used works really well with the latest browsers, but to use the IE filtering for older versions of IE threw everything else off. So in the end I tossed in a modernizer and put an additional if statement in the jQuery function so that not only did you see the page a certain way when javascript wasn't enabled, but you also got the same view if you were on a much older version of IE. This affects IE7 and IE8.

Here is a peek at some of that jQuery -

    function StartSlider()
        //if transform is not supported, we don't turn on the slider.
        if (!$('html').hasClass('no-csstransforms')) {

            var left = -184;
            var FullWidth = 914;
            var SliderHeight = 400;
            var nbrOfSlides = $('.ninja-slider article').size();
            var slide = FullWidth - nbrOfSlides * 34
            //set some css that we need - setting this with javascript so it doesn't affect
            //how the page appears if someone has javascript disabled
            $('.ninja-slider').css({ 'height': SliderHeight + 'px', 'overflow': 'hidden' });
            $('.ninja-slider div.details').css({ 'position': 'absolute', 'top': '0', 'height': SliderHeight + 'px', 'z-index': '0' });
            $('.ninja-slider h2').addClass('tab');

You must be logged in to comment.