Background Sliders

[05beckga]

Hi I’m currently using vegas backgrounds and its works fine however I want to place content over my pictures. Every background picture that appears on the slider will have different content. Does anyone know if I can do that with vegas background or a know any links or plugins that allow me to do this.

[m3g4p0p]

Internally vegas uses divs as slides and sets their CSS background property to the src as specified in the options. This means that theoretically you could “inject” content into the slides like

$('#my-slider .vegas-slide-inner').eq(0).html('<p>Some content</p>');
$('#my-slider .vegas-slide-inner').eq(1).html('<p>Some other content</p>');

// etc.

However, for some reason vegas seems to keep removing those slides from the DOM and then re-appends them when it’s their turn again – thus any additional content will be lost. As a workaround, you could use the vegaswalk callback to check which slide is currently active, and insert content accordingly using a switch statement, like

// Helper function to get the jQuery reference of the slide with
// a given background-image
function getCurrentSlide(container, src) {
  
  return $('.vegas-slide-inner', container).filter(function() {
    return $(this).css('background-image').indexOf(src) > -1;
  });
}

$('#my-slider').on('vegaswalk', function(event, index, settings) {
  
  // Insert content based on the current image src
  switch (settings.src) {

    case '/img/slide1.jpg':
      getCurrentSlide(this, settings.src).html('<div>Some content</div>');
      break;

    case '/img/slide2.jpg':
      getCurrentSlide(this, settings.src).html('<div>Some other content</div>');
      break;

    // etc.
  }
});

The above helper function is necessary because vegas doesn’t provide a reference to the active slide directly, and the index parameter doesn’t help either because of that constant DOM manipulation. So maybe you’re better off using a slider which supports content by default as this workaround is not particularly efficient…

[05beckga]

Thanks alot for you reply and information.