Jump to content

How to add a slider in header background


Billiemore
 Share

Recommended Posts

please check this site;

http://hotel.egobekeecancerfoundation.org

i want to change the background header image into a slider (i mean sliding images  instead of the present picture).

thank you @ Ambasador


please check this site;

http://hotel.egobekeecancerfoundation.org

i want to change the background header image into a slider (i mean sliding images  instead of the present picture).

thank you @ Ambasador

Share this post


Link to post
Share on other sites

so you want to create something that will slide images in background?

if so plugin named backstretch can be a solution :)
 

  1. download free html box module
  2. install it in your shop
  3. on module configuration page select "header" section
  4. to the edior paste code:
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <script>$(document).ready(function(){
    $("#header").backstretch([
     "http://dl.dropbox.com/u/515046/www/outside.jpg"
     , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
     , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
     ], {duration: 3000, fade: 750});
    });</script>
    
    
  5. after save you will have a slider in background with images defined in backstretch([arary])

Share this post


Link to post
Share on other sites

  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More