Build a Slideshow with jQuery

Below is the code to build a slideshow using HTML, CSS, and JavaScript/jQuery. Please contact me at maria@mclinteractive.com if you have any questions or would like me to create a slideshow for you.

Demo

Fine Arts

Fine Art for Auction Online | Auction King

Fine Art Festival | Amdur Productions

Leeds College of Art

Resources

Dependency. The jQuery Library can be included at the bottom of the html document just above the </body>.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Description

We used a stack of images, one on top of each other with captions. When we click the thumbnails, their respective image displays on the panel. Please note the transition between the images is very smooth.

jQuery

Place the JavaScript below under the JQuery library.

<script>
(function($, window, document, undefined) {

  var showMoreJQObj = $('.show-more'),
    showMorePanel = showMoreJQObj.find('.show-more-panel'),
    showMoreBtn = showMoreJQObj.find('.show-more-btn'),
    width = (window.innerWidth > 0) ? window.innerWidth : screen.width,
    windowWidth = (width < 760) ? 85 : 170;

  var ShowMoreLikeThis = function() {

    $(showMoreBtn).each(function(index) {
      $(this).on('click', function() {

        if ($('.clicked').length <= 0) {
          $(this).parent().find('.show-more-panel')
            .css({
              'display': 'block',
              'height': '0px',
              'margin-top': '30px',
              'opacity': 1
            })
            .stop(true, true).animate({
              'height': windowWidth,
              'opacity': 1
            }, {
              'duration': 500,
              step: function(now, fx) {
                if (now == 1) {
                  $(this).find('.show-more-box').css({
                    'display': 'inline-block'
                  });
                }

              }
            }, 'linear');

          //replace button text on show/hide
          $(this).find('.show-more-text').animate({
            'opacity': 0,
          }, 500, 'linear', function() {
            $(this).css({
              'z-index': 100,
              'display': 'none'
            });
          });

          $(this).find('.hide-more-text')
            .css({
              'display': 'block',
              'z-index': 200
            })
            .animate({
              'opacity': 1,
            }, 500, 'linear');

          $(this).addClass('clicked');

        } else {

          $(this).parent().find('.show-more-panel')
            .stop(true, true).animate({
              'height': 0,
              'margin-top': '-30px',
              'opacity': 0
            }, 500, 'linear', function() {
              $(this).find('.show-more-box').css({
                'display': 'none'
              });
            });

          //replace button text on show/hide
          $(this).find('.hide-more-text').animate({
            'opacity': 0,
          }, 500, 'linear', function() {
            $(this).css({
              'z-index': 100,
              'display': 'none'
            });
          });

          $(this).find('.show-more-text')
            .css({
              'display': 'block',
              'z-index': 200
            })
            .animate({
              'opacity': 1,
            }, 500, 'linear');

          $(this).removeClass('clicked');
        }



      });

    });

    $(showMorePanel).each(function(index) {

      var showMoreClass = $(this).parent();

      $(this).on('mouseover', '.show-more-thumb', function() {

        var showMoreClass = $(this).parent().parent().parent();

        //remove border and box shadow
        $(showMoreClass).find('.show-more-border').removeClass('show-more-border');
        $(showMoreClass).find('.show-more-trans').removeClass('show-more-trans');

        //add border and box shadow
        $(this).parent().addClass('show-more-border');
        $(this).find('img').addClass('show-more-trans');

      });

      $(showMoreClass).on('mouseleave', function() {

        var showMoreClass = $(this),
          smActive = $(showMoreClass).prevAll('.showMoreLikeThis:first').find('.mainAdWrap.sm-active');
        var activeImgIndex = $(smActive).attr('class').match(/\bsm-ad(\d+)\b/)[1];
        var activateThumb = $(this).parent().find('.show-more-thumb.smthumb' + activeImgIndex).parent();

        //remove border and box shadow
        $(showMoreClass).find('.show-more-border').removeClass('show-more-border');
        $(showMoreClass).find('.show-more-trans').removeClass('show-more-trans');

        activateThumb.addClass('show-more-border')
          .find('img').addClass('show-more-trans');
      });

      $(this).on('click', '.show-more-thumb', function() {

        var showMoreClass = $(this).parent().parent().parent(),
          smActive = $(showMoreClass).prevAll('.showMoreLikeThis:first').find('.mainAdWrap.sm-active'),
          sm2ndClass = $(this).attr('class').split(' ')[1],
          index = (sm2ndClass).match(/smthumb(\d+)/)[1];

        $(smActive)
          .css({
            'z-index': 100
          })
          .animate({
            'opacity': 0
          }, 1000, 'linear')
          .removeClass('sm-active');
        //show new image
        $(showMoreClass).prevAll('.showMoreLikeThis:first').find('.mainAdWrap.sm-ad' + index + ':first')
          .css({
            'display': 'block',
            'opacity': 0,
            'z-index': 300
          }).stop(true, true).animate({
            'opacity': 1
          }, 1000, 'linear', function() {}).addClass('sm-active');
      });
    });

  };

  $(function() { // ON DOM READY
    ShowMoreLikeThis();
  });

})(jQuery, window, document);
</script>

HTML

Place the HTML somewhere in your page between <body> and <\body>.

<main id="showMoreLikeThis">
    <section class="showMoreLikeThis">
      <div class="mainAdWrap sm-active sm-ad0">
              <h1>Fine Arts</h1>
          <div class="adWrap">
              <img src="images/img0.png" alt="" />
          </div>
      </div>
     <div class="mainAdWrap sm-ad1">
              <h1>Fine Art for Auction Online | Auction King</h1>
          <div class="adWrap">
              <img src="images/img1.png" alt="" />
          </div>
      </div>
      <div class="mainAdWrap sm-ad2">
              <h1>Fine Art Festival | Amdur Productions</h1>
          <div class="adWrap">
              <img src="images/img2.png" alt="" />
          </div>
      </div>
     
     <div class="mainAdWrap sm-ad3">
              <h1>Leeds College of Art</h1>
          <div class="adWrap">
              <img src="images/img3.png" alt="" />
          </div>
      </div>
    </section>
    <aside class="show-more">
      <div class="show-more-panel">
        <div class="show-more-box show-more-border">
          <div class="show-more-thumb smthumb0">
            <img src="images/thumb0.png" class="show-more-trans" alt="" />
          </div>
        </div>
        <div class="show-more-box">
          <div class="show-more-thumb smthumb1">
            <img src="images/thumb1.png" alt="" />
          </div>
        </div>
        <div class="show-more-box">
          <div class="show-more-thumb smthumb2">
            <img src="images/thumb2.png" alt="" />
          </div>
        </div>
        <div class="show-more-box">
          <div class="show-more-thumb smthumb3">
            <img src="images/thumb3.png" alt="" />
          </div>
        </div>
      </div>
      <div class="show-more-btn">
        <span class="show-more-text">Show More</span>
        <span class="hide-more-text">Hide</span>
      </div>
    </aside>
    </main>

CSS

Place the CSS somewhere between <head> and <\head>.

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');

#showMoreLikeThis {
	font-family: 'Roboto', sans-serif;
}
#showMoreLikeThis .showMoreLikeThis {
	position:relative;
	width:320px;
	height:150px;
	margin:0 auto;
}
#showMoreLikeThis h1 { 
	position:absolute;
	top:0;
	left:0;
	font-size:14px;
	z-index:300;
}
#showMoreLikeThis .mainAdWrap {
	position:absolute;
	bottom:0;
	left:0;
	z-index:100;
}
#showMoreLikeThis .adWrap img {
	width:320px;
	height:150px;
}
#showMoreLikeThis .sm-ad0 { z-index:200;}
#showMoreLikeThis .sm-ad1, #showMoreLikeThis .sm-ad2, #showMoreLikeThis .sm-ad3 { display: none; }
#showMoreLikeThis .show-more {
	background-color:#ffefa3;
    width: 100%;
	position: relative;
	color:#333;
    text-align:center;
    border-left:1px solid #ffd507;
	border-right:1px solid ffd507;
	border-bottom:1px solid #ffd507;
    margin: -13px auto 0;
    padding-top:1px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    z-index:500;
}
#showMoreLikeThis .show-more-panel {
	background-color:#ffea84;
	margin:5px;
	padding:15px;
	border:1px solid rgba(255,255,255,0.2);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:none;
}
#showMoreLikeThis .show-more-box {
	display:inline-block;
	margin:10px;
	border:1px solid transparent;
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
	border-radius:5px;
}
#showMoreLikeThis .show-more-border {
	border:1px solid #ffd507;
}
#showMoreLikeThis .show-more-trans {
	opacity:0.55;
	box-shadow: 1px 1px 2px #000;
}
#showMoreLikeThis .show-more-thumb {
	border:1px solid rgba(255,255,255,0.5);
	-moz-border-radius:5px;
    -webkit-border-radius:5px;
	border-radius:5px;
	padding:3px;
	cursor:pointer;
}
#showMoreLikeThis .show-more-thumb img {
	width:35px;
	height:35px;
	cursor:pointer;
}
#showMoreLikeThis .show-more-btn {
	width:250px;
	height:25px;
	font-size:21px;
	font-weight:500;
	border:1px solid #ffd507;
	-moz-border-radius:20px;
    -webkit-border-radius:20px;
	border-radius:20px;
	margin:10px auto 5px;
	padding:5px 10px;
	cursor:pointer;
	position:relative;
	z-index:600;
}
#showMoreLikeThis .show-more-text {
	width:250px;	
	position:absolute;
	top:5px;
	left:10px;
	text-align:center;
	z-index:200;
	display:inline-block;
}
#showMoreLikeThis .hide-more-text {
	width:250px;
	position:absolute;
	top:5px;
	left:10px;
	text-align:center;
	z-index:100;
	display:none;
}
#showMoreLikeThis .show-more-plus {
	font-size:21px;
	vertical-align: baseline;
    position: relative;
    top: 0.05em;
}


@media screen and (min-width: 47.5em ) {

	#showMoreLikeThis h1 { 
		font-size:24px;
	}
	#showMoreLikeThis .showMoreLikeThis, #showMoreLikeThis .adWrap img {
		width:1186px;
		height:277px;
	}
	#showMoreLikeThis .show-more-thumb img {
		width:133px;
		height:133px;
	}
}
</style>

About the Author

Maria C. Lima

Maria C. Lima has spent the past 10 years studying web development and becoming a sought-after independent web designer & developer in New York City. She now runs MCL Interactive, her own NYC design and technology firm, where she prides herself in providing creative web solutions for savvy entrepreneurs. She helps bring their vision to life in a beautiful and functional web presence. Her goal is to take care of all the techy stuff so that they can do what they love and work on growing their businesses. You can find her on Twitter (@mclinteractive) or on Facebook (Facebook.com/mclinteractive). Read more

Related posts

You might be interested in the following posts: