Slideshow using background images with navigation and captions


Tags: javascript,jquery,html,css

Problem :

I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.

Here is my current code: http://jsfiddle.net/1zdyh3wo/

HTML

<div class="content bg-slider">
<div class="wrapper">
    <h1 class="sectionTitle">Image title 1</h1>
    <div class="separator white"></div>
    <h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>

    <div class="nav-wrapper">
        <div class="nav-arrows prev"></div>
        <div class="nav-dots">
            <div class="current"></div>
            <div class=""></div>
            <div class=""></div>
        </div>
        <div class="nav-arrows next"></div>
    </div>
</div>

CSS:

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* -- COMMON -- */

body {
    font: 400 14px 'Montserrat', Helvetica, sans-serif;

    letter-spacing: 2px;
    text-transform: uppercase;

    color: white;
}

.separator {
    width: 24px;
    height: 4px;
}
.separator.white {
    background-color: white;
}
.separator.black {
    background-color: black;
}

/* -- MENU -- */



/* -- CANVAS -- */

.content {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 100%;
}

.wrapper {
    position: absolute;
    right: 0;
    bottom: 100px;
    left: 0;

    width: 33.333333333%;
    margin: 0 auto;
}

.sectionTitle {
    font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
    line-height: 24px;

    margin-bottom: 24px;

    letter-spacing: 4px;
}
.sectionDescription {
    font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;

    margin-top: 24px;
}

/* -- SLIDER -- */

.bg-slider {
    background: url(../img/slides/image1.jpg) no-repeat center center fixed;
    background-color: red; /* demo purpose only */
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

/* -- SLIDER - NAVEGATION -- */

.nav-wrapper {
    display: inline-block;

    min-width: 250px;
    margin-top: 24px;

    padding: 4px;
}

/* -- SLIDER - NAVEGATION ARROWS -- */

.nav-arrows {
    float: left;

    width: 20px;
    height: 20px;

    cursor: pointer;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);

    border: 4px solid white;
}

.nav-arrows.prev {
    border-top: none;
    border-right: none;
}

.nav-arrows.next {
    border-bottom: none;
    border-left: none;
}

/* -- SLIDER - NAVEGATION DOTS -- */

.nav-dots {
    margin: 0px 8px;

    float: left;
}

.nav-dots div{
    float: left;

    width: 12px;
    height: 12px;
    margin: 4px 18px;

    cursor: pointer;

    border-radius: 50%;
    background: rgba(255,255,255,.5);
}

.nav-dots .current:after {
    float: left;

    width: 12px;
    height: 12px;

    content: '';

    border-radius: 50%;
    background: white;
}

Here a visual aid, how I would like the result to be:

Desktop version:

Desktop version

Mobile version:

Mobile version



Solution :

To keep things really simple:

  • Make a "wrapper" div for the entire slider
  • Make an individual "wrapper" div for each individual slide
  • Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
  • Make a function that will do all the transitions

Here's an example HTML structure, based on yours

<div id="slider">
  <div class="content bg-slider active">
    <div class="wrapper">
      <h1 class="sectionTitle">Image title 1</h1>
      <div class="separator white"></div>
      <h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
    </div>
  </div>
  <div class="content bg-slider">
    <div class="wrapper">
      <h1 class="sectionTitle">Image title 2</h1>
      <div class="separator white"></div>
      <h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
    </div>
  </div>
  <div class="content bg-slider">
    <div class="wrapper">
      <h1 class="sectionTitle">Image title 3</h1>
      <div class="separator white"></div>
      <h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
    </div>
  </div>
</div>

Here's the functional JavaScript, with comments.

$(document).ready(function(){
  // Hide all slides, re-show first:
  $(".bg-slider").hide()
  $(".bg-slider:first-child").show();

  // Prev button click
  $(".nav-arrows.prev").click(function(){
    slidePrev();
  })

  // Next button click
  $(".nav-arrows.next").click(function(){
    slideNext();
  })

  // "Dots" click
  $(".nav-dots div").click(function(){
    slideTo($(this).index());
  })
});

// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
  if ($("#slider .active").index() == 0) {
    slideTo($("#slider .bg-slider").length - 1);
  }
  else {
    slideTo($("#slider .active").index() - 1);
  }
}

// "Next" function must conclude if we are at the LAST slide
function slideNext() {
  if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
     slideTo(0);
  }
  else {
    slideTo($("#slider .active").index() + 1);
  }
}

// Slide To will be called for every slide change.  This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
  $("#slider .active").fadeOut().removeClass("active");
  $("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
  $(".nav-dots .current").removeClass("current");
  $(".nav-dots div").eq(slide).addClass("current");
}

Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/


    CSS Howto..

    How to get dimensions for a background image when background-size is set to contain?

    IE8 only shows css content after event fired

    Fonts wont change and id height wont show

    How to use CssStyleCollection for a UserControl?

    How do I place the text on the image in the header?

    How to get my “Register Now!” Link's to line up at the bottom using CSS

    css - why my text box is not showing up?

    How to remove css : hover using jquery?

    How can I position this drupal block?

    How to change css using jquery in a php loop

    How To Select Two classes with CSS?

    How can I get my input text to move to the left up against the preceding label?

    How to make an inline element appear on new line, or block element not occupy the whole line?

    How to change the width of a CSS flex-box column?

    Remove oval border-radius when 2 digit numbers show up

    How to get rid of white space between css horizontal list items? [duplicate]

    How to auto position sidenav in twitter bootstrap while sliding

    How to fill parent element background color with CSS?

    How to check the visibility property with javascript

    How to draw a circle sector in CSS?

    css rules multi class, how to match two out of many

    Bootstrap: How to get part of my banner image to hide under my sidebar?

    How to make css counter works with css selector?

    How to avoid blank lines at the top of new column (CSS columns)?

    How to implement Star Rating in Intel XDK by App Framework 3.0

    Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”?

    How to dynamically create CSS class in IE8

    How do I make a DIV tag stretch to the size of it's children?

    how to order CSS elements?

    How do I provide navigation options on the sides of a centered logo?