Ninja Slider / Posts /

Make the slider a fixed background element so page content just scrolls on top of it

My Ninja Slider is 100% of the browser window by removing the max-width from the CSS. Is it possible to make the slider a fixed background/element so my content just scrolls on top of it? 
Kevin  5 years ago   viewed: 35805    

9 Answers


Why dont you use z-index, position fixed and absolute?

jedaiCoder   3 years ago

can we use position set to absolute and fixed simultaneously?

kd5   2 years ago

Is there anyway to have the sliders height fixed ie. fullscreen with nothing below? Like this:

Tim Green
  5 years ago

I think you need the following CSS settings in addition to John's post:

html, body { height: 100%; }

Natalia   5 years ago

fuck off its not working

jhone   one year ago

 I like the helpful information you provide in your web post . This actually answered my problem, thanks!  Play this love balls games in valentines with your love ones and show who is the best in these puzzle game.

  one month ago

Yes, it is possible.

Do you want to sharpen your skills in problem-solving, deduction, and observation? Then this fantastic game is for you. Discover cool challenges that will have you thinking. Get your head into these puzzles. Enjoy the Happy Glass free game.

Besides problem-solving, deduction, and observation here are the other cool features of the Happy Glass game. They may look easy to solve, but they can get more challenging as the game goes on. And it becomes more interesting too. Check out these other features of the Happy Glass free game.

  one month ago

This is how I make the responsive slider a background element as you required.

In the demo1.html, I include an inline style for the DIV wrapper of #ninja-slider:
You can add the style to the #ninja-slider element either if you don't have the slider's outer wrapper(usually we don't need the outer wrapper at all, so the inline style can be added to ninja-slider.css. Yes, that's better!).

In the ninja-slider.css, I removed the max-width:960, the ul padding, and set navigation pagination and prev/next buttons display:none. After setting the slider z-index:-1, the nav controls are no longer accessible, so you have to make them invisible.

The details and source code:

  1. Download the package from Menucool.
  2. Change demo1.html to:
    <!DOCTYPE html> <html> <head> <title></title> <link href="ninja-slider.css" rel="stylesheet" type="text/css" /> <script src="ninja-slider.js" type="text/javascript"></script> <style> body {font: normal 0.9em Arial;margin:0;background-color:#333;} a {color:white;} ul li {padding: 10px 0;} </style> </head> <body> <div style="position:fixed;width:100%;height:100%;z-index:-1;top:0;left:0;"> <div id='ninja-slider'> <ul> <li><div data-image="img/md/1.jpg"></div></li> <li><div data-image="img/md/2.jpg"></div></li> <li><div data-image="img/md/3.jpg"></div></li> <li><div data-image="img/md/4.jpg"></div></li> <li><a data-image="img/md/5.jpg" href=""></a></li> </ul> </div> </div> <div style="width:700px;margin:30px auto;color:#CCC;"> <p>demo 1 <a href="demo2.html">demo 2</a></p><br /><br /> <p>Ninja Slider is a touch-enabled image and content slideshow plugin. It is the most truly responsive slider in that:</p> <ul> <li>The slider will adapt to the size of its container</li> <li>If set, it will choose the pixels from multiple versions of image that the user's device can actually use for faster page loading.</li> <li>If max-width is set via CSS, the slider or its image will not exceed the max-width.</li> <li>Image scaling: fully configurable</li> </ul> </div> </body> </html>
  3. Change its ninja-slider.css to:
    #ninja-slider { width:100%; margin:0 auto; /*center aligned*/ background:#222; } #ninja-slider > ul { padding:0 0; } /* slide */ #ninja-slider li > div, #ninja-slider li > a { margin:0 auto; /* center each slide */ border-radius:6px; /*background:#999;*/ position: relative; display:block; box-shadow: 0 1px 5px rgba(0,0,0,.8),inset 0 0 1px rgba(255,255,255,.4); } /* loading image indicator */ #ninja-slider div.preload { background: black url(img/loading.gif) no-repeat center center; } /*----- video -----*/ #ninja-slider { position:absolute; border:0;top:0;left:0; width:100%;height:100%; background:transparent url(img/video.png) no-repeat 50% 50%; } /*------ pager ------*/ /* The pager id should be: slider id + "-pager" */ #ninja-slider-pager { display:none; } /* --------- navigation controls ------- */ /* The nav id should be: slider id + ("-prev", "-next", and "-pause-play") */ #ninja-slider-prev, #ninja-slider-next { display:none;} /*------- Settings that usually don't need to change ------- */ #ninja-slider > ul { -webkit-backface-visibility: hidden; -webkit-perspective: 1000px; backface-visibility: hidden; perspective: 1000px; -webkit-tap-highlight-color: transparent; } #ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next, #ninja-slider-pause-play { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #ninja-slider { position: relative; overflow: hidden; /*visibility: hidden;*/ padding:0; } #ninja-slider > ul { overflow: hidden; position: relative; list-style:none; margin:0; } #ninja-slider > ul > li { float: left; width: 100%; position: relative; list-style:none; padding:0;margin:0; }

John   5 years ago

where is js file for image slider

rachna   5 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: