Call me!
cell: 612-730-9540

My Favorite Paintings by Pablo Picasso (Spanish, 1881–1973)

  • Pablo Picasso
  • Demoiselles D'Avignon, 1907
  • Three Musicians, 1921
  • Girl Before A Mirror, 1932

jQuery Fade/Swing Slider

Project Winter 2014:

Build a jQuery Slider banner without using a jQuery plugin

Originally I started this as a part of my "Code 'n Tell" project on Codeacademy.com.

The slideshow banner is placed above the main content on this page and below the header. I accomplished this slideshow by using jQuery's main library but didn't use a plugin like Wootheme's Flexslider plugin or Malsup's jQuery Cycle plugin.

The Code Reveal:

First: The HTML


<div class="slideshow">
    <div class="slider">
        <div class="slideline">
            <p>My Favorite Paintings by Pablo Picasso (Spanish, 1881–1973)</p>
        </div>
        <ul class="slideList">
            <li class="slide one"><span><strong>Pablo Picasso</strong></span></li>
            <li class="slide two"><span><strong>Demoiselles D'Avignon, 1907</strong></span></li>
            <li class="slide three"><span><strong>Three Musicians, 1921</strong></span></li>
            <li class="slide four"><span><strong>Girl Before A Mirror, 1932</strong></span></li>
        </ul>
    </div>
</div>

Right-click the images as they come up in my slider to download them to whatever folder you want them on you desktop.

Next: The Script


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    
    loopSlide();
    
    function loopSlide() {
    $(".one").delay(0).fadeIn(1000, "swing").delay(5000).fadeOut(1000, "swing", function() {
        $(".two").delay(0).fadeIn(1000, "swing").delay(5000).fadeOut(1000, "swing", function() {
            $(".three").delay(0).fadeIn(1000, "swing").delay(5000).fadeOut(1000, "swing", function() {
                $(".four").delay(0).fadeIn(1000, "swing").delay(5000).fadeOut(1000, "swing", function() {
                        loopSlide();
                    });
                });
            });
        });
    }
});
</script>

Place the script inbetween the <head> </head> tags.

I used jQuery's .fade() and .fadeOut() effects. I set:

  1. "0" .delay() for .fadeIn() to trigger but,
  2. made the .fadeIn() take 1 second.
  3. A second .delay() is set to 5 seconds, before,
  4. the final .fadeOut(), which takes 1 second.

At the end of the final fadeOut() is a function() which loads up the second, third and fourth slides - using the same process. Then, at the very end of the nest of code, the function that started all this is called - which creates a loop that can continue indefinately.

Lastly: The CSS


/* start jquery-fade-swing-slider css */
.jquery-slider .slideshow { padding: 5px 0; background: #3a4e66; }
    .jquery-slider .slider { position: relative; width: 100%; height: 300px; overflow: hidden; }
        .jquery-slider .slideline { position: absolute; top: 10px; right: 0; width: 65.95744680851064%; }
            .jquery-slider .slider p { padding: 0 15px; font: bold 2.18em/1.18em verdana, arial, sans-serif; color: #fff; text-align: right; }
        .jquery-slider .slider ul { margin: 0; padding: 0; height: 100%; list-style: none; }
            .jquery-slider .slider ul li { width: 100%; height: 100%; }
                .jquery-slider .one { background: url(Picasso-PabloPicasso.jpg) no-repeat; }
                .jquery-slider .two { background: url(Picasso-DemoisellesDAvignon.jpg) no-repeat; }
                .jquery-slider .three { background: url(Picasso-ThreeMusicians.jpg) no-repeat; }
                .jquery-slider .four { background: url(Picasso-GirlBeforeAMirror.jpg) no-repeat; }
                    .jquery-slider .slide span { display: block; float: right; width: 65.95744680851064%; margin: 150px 0 0 0; font: 1.54em/1.18em verdana, arial, sans-serif; color: #fff; overflow: hidden; }
                    .jquery-slider .slide span strong { padding: 0 15px; font-weight: normal; }
/* end jquery-fade-swing-slider css */

(I need to add navigation to allow uses to click back / forward through the slider.)

(yeah, I know, not terribly exciting or inspiring, but then again, I'm a Developer, not an escalator... er... designer. Some Star Trek humor for you.)

Contact me

If you would like to speak with me more about my qualifications, experiences and what I can do for you please feel free to contact me.