Search code examples
javascriptjquerytransitionslideshowfade

jQuery slideshow with url's in variable fade between images

I have created a jQuery based slideshow that lives within a DIV on my webpage. The only problem is the images have no transition effect between each other, just one to the next without the first one slowly fading out and the next fading on.

I would like to crossfade these images. What am I missing in my JS?

var urls = ['https://example.com/front.png',
 'https://example.com/interior-scaled.jpeg'];

  var count = 1;
  $('.hero').css('background-image', 'url("' + urls[0] + '")');
  setInterval(function() {
    $('.hero').css('background-image', 'url("' + urls[count] + '")');
    count == urls.length-1 ? count = 0 : count++;
  }, 6000);

});

LINK TO FIDDLE

Solution

  • If you are not opposed to using a jQuery slideshow library then may I suggest using Ken Wheelers Slick carousel jQuery lib.

    In your first comment you mentioned...

    even if images slide like a carousel would be sufficient.

    Well Slick makes easy work of both, plus loads of other cool options, event callbacks and responsive breakpoint settings. It might speed up creating sliding/fading carousels for your project utilising jQuery which you are already using.

    I've include 2 hero slideshows in example below, both in fade: false mode.

    • #Hero_1 slideshow runs before images may have or have not loaded.
    • #Hero_2 uses $(window).on('load') to make sure your images have loaded before slideshow runs

    // our hero examples as constant variables
const hero_1 = $('#hero_1');
const hero_2 = $('#hero_2');

// our slide image urls in constant variable array 
const slides = [
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-patient-exam-room.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-interior-scaled.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-front.png'
];

// for each of the slide images as key > url
$.each(slides, function(key, url) {

  // append slide to hero carousel div
  $('.carousel', '.hero').append('<div class="slide" style="background-image:url(\'' + url + '\');"></div>');

});

// the below slick js should not run until the above each function has finished appending images in slides array

// slick hero carousel on init
$('.carousel', hero_1).on('init', function(slick) {

  // add show class to hero div to animate height when slick init
  $(hero_1).addClass('show');

// slick carousel options
}).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  fade: true,
  adaptiveHeight: false,
  autoplay: true,
  infinite: true,
  pauseOnFocus: false,
  pauseOnHover: false,
  autoplaySpeed: 4000,
  speed: 1000,
  draggable: false
});

// use this if you want all background images to load first
// tho may be slow to run depending on how many images and the image size you are loading

$(window).on('load', function() {

  // slick on init
  $('.carousel', hero_2).on('init', function(slick) {

    // add show class to hero div to expand height
    $(hero_2).addClass('show');

  // slick options
  }).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    fade: true,
    adaptiveHeight: false,
    autoplay: true,
    infinite: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    autoplaySpeed: 4000,
    speed: 1000,
    draggable: false
  });

});
    .hero {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, .75);
  min-height: 0;
  height: 0;
  transition: all 0.5s ease;
  margin: 0 0 .5rem 0;
}

.hero.show {
  min-height: 150px;
  height: 150px;
  /* 
  height:45%;
  height:45vh;
  min-height:400px;
  */
}

.hero .carousel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero .carousel.slick-initialized {
  opacity: 1;
}

.hero .carousel .slick-list,
.hero .carousel .slick-track {
  height: 100% !important;
}

.hero .carousel .slide {
  background-color: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
}

.hero .overlay {
  color: #fff;
  position: relative;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
}


/* for demo styling purposes */

BODY {
  font-family: helvetica;
}

H1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
}

P {
  margin: 0 0 .5rem 0;
}

.lead {
  font-size: 1.4rem;
  margin: 0 0 .5rem 0;
}

.row {
  margin: 0 -4px 0 -4px;
}

.col {
  float: left;
  width: calc(50% - 8px);
  padding: 0 4px 0 4px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />

<div class="row">
  <div class="col">

    <p>
      <code><strong>#hero_1</strong><br/></code>
      <code><small>Slick inits after each function is complete.</small></code>
    </p>

    <div id="hero_1" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 1</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
  <div class="col">

    <p>
      <code><strong>#hero_2</strong></code><br/>
      <code><small>Waits for all imgs to load before init slick.</small></code>
    </p>

    <div id="hero_2" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 2</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>


    Here is the same code above but in fade: false mode...

    • #Hero_1 slideshow runs before images may have or have not loaded.
    • #Hero_2 uses $(window).on('load') to make sure your images have loaded before slideshow runs

    // our hero examples as constant variables
const hero_1 = $('#hero_1');
const hero_2 = $('#hero_2');

// our slide image urls in constant variable array 
const slides = [
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-patient-exam-room.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-interior-scaled.jpeg',
  'https://concorddentalde.com/wp-content/uploads/2020/10/concord-dental-front.png'
];

// for each of the slide images as key > url
$.each(slides, function(key, url) {

  // append slide to hero carousel div
  $('.carousel', '.hero').append('<div class="slide" style="background-image:url(\'' + url + '\');"></div>');

});

// the below slick js should not run until the above each function has finished appending images in slides array

// slick hero carousel on init
$('.carousel', hero_1).on('init', function(slick) {

  // add show class to hero div to animate height when slick init
  $(hero_1).addClass('show');

// slick carousel options
}).slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  fade: false,
  adaptiveHeight: false,
  autoplay: true,
  infinite: true,
  pauseOnFocus: false,
  pauseOnHover: false,
  autoplaySpeed: 4000,
  speed: 1000,
  draggable: false
});

// use this if you want all background images to load first
// tho may be slow to run depending on how many images and the image size you are loading

$(window).on('load', function() {

  // slick on init
  $('.carousel', hero_2).on('init', function(slick) {

    // add show class to hero div to expand height
    $(hero_2).addClass('show');

  // slick options
  }).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    fade: false,
    adaptiveHeight: false,
    autoplay: true,
    infinite: true,
    pauseOnFocus: false,
    pauseOnHover: false,
    autoplaySpeed: 4000,
    speed: 1000,
    draggable: false
  });

});
    .hero {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, .75);
  min-height: 0;
  height: 0;
  transition: all 0.5s ease;
  margin: 0 0 .5rem 0;
}

.hero.show {
  min-height: 150px;
  height: 150px;
  /* 
  height:45%;
  height:45vh;
  min-height:400px;
  */
}

.hero .carousel {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero .carousel.slick-initialized {
  opacity: 1;
}

.hero .carousel .slick-list,
.hero .carousel .slick-track {
  height: 100% !important;
}

.hero .carousel .slide {
  background-color: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
}

.hero .overlay {
  color: #fff;
  position: relative;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
}


/* for demo styling purposes */

BODY {
  font-family: helvetica;
}

H1 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;
}

P {
  margin: 0 0 .5rem 0;
}

.lead {
  font-size: 1.4rem;
  margin: 0 0 .5rem 0;
}

.row {
  margin: 0 -4px 0 -4px;
}

.col {
  float: left;
  width: calc(50% - 8px);
  padding: 0 4px 0 4px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />

<div class="row">
  <div class="col">

    <p>
      <code><strong>#hero_1</strong><br/></code>
      <code><small>Slick inits after each function is complete.</small></code>
    </p>

    <div id="hero_1" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 1</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
  <div class="col">

    <p>
      <code><strong>#hero_2</strong></code><br/>
      <code><small>Waits for all imgs to load before init slick.</small></code>
    </p>

    <div id="hero_2" class="hero">
      <div class="carousel"></div>
      <div class="overlay">
        <h1>Hero 2</h1>
        <p class="lead">
          Tooth Hurty
        </p>
      </div>
    </div>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>