HTML Image slider

Hi

I'm looking for a slider that will slide header images across the front page of a web site.

I can't find any that will allow the image to appear full width no matter what screen resolution.

I have attached a grab of the home page 'preview' so you can see what I mean.

Don't want any buttons or preview thumbs etc - just so it can slide 3 or 4 images across in the position where you can see on the pic...

Slider required for this
wilkesitAsked:
Who is Participating?
 
Tom BeckConnect With a Mentor Commented:
For something so simple you would be better off just using some jquery to change the images.

Here's a self contained example that fades in a different image from a set of three, every 5 seconds.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

var index = 0;

function layerScroll() {
	// set index number
	if (index == $('.ls-layer').length - 1) {
		index = 0;
	} else {
		index ++;
	}
	var current = index;
	// fade in next slide
	$('.ls-layer').eq(index).fadeIn(2000, function(){
	});
	if (current == 0) {
		current = $('.ls-layer').length;
	}
	// fade out current slide
	$('.ls-layer').eq(current - 1).fadeOut(2000);
	
}

$(document).ready(function(){
	
	   var layerSpeed = 5000; //set duration for each slide here
		
	   // timer for large image fader
	   var layerTimer = setInterval(function() { layerScroll(); }, layerSpeed);
		
		
});
</script>
<style>
#main {
	width: 100%;  
	margin: 0 auto;
	position: relative;
	height: 100%;     
	overflow: hidden;  
}
/* ==========================================================================
   Large Image Fader
   ========================================================================== */

.ls-layer {
	position: absolute;
	display: none;
	background-position: top left;
	background-repeat: no-repeat;
	overflow: hidden;
	float: left; 
	width: 100%;
}
</style>
</head>

<body>
<div id="main">
<!-- LayerSlider wrapper -->
				<div id="layerslider" style="width: 100%; height: 700px; margin: 0 auto; padding: 0 ">
					
					<!-- Slide 1 -->
					<img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/kerala-scenery/kerala-nature-beautiful-scenery.jpg" alt="" />
                    <!-- Slide 2 -->
					<img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/natural-scenery/natural-scenery-photos.jpg" alt="" />
                    <!-- Slide 3 -->
					<img class="ls-layer"src="https://d22d7v2y1t140g.cloudfront.net/m_1394387_lgdLaipbl8nw.jpg" alt="" />
                    
                </div><!-- /LayerSlider wrapper -->
</div>
</body>
</html>

Open in new window

On images that are allowed to stretch to 100% width of the browser you need to decide how you will handle the height. You can either allow the height to grow in proportion to the width or have a fixed height and allow the images to be distorted when stretched out widthwise.
0
 
Tom BeckCommented:
Maybe you need to be more specific. Entering "full width slider" in a Google search reveals this as the first link:

http://dimsemenov.com/plugins/royal-slider/full-width/

You must have looked at that one.

What is it about that choice that does not work for you?
0
 
wilkesitAuthor Commented:
Hi there - thanks for the response

I was looking for a free version - not that $12 is a lot, but I have found in the past that they are inherently difficult to install and are massively over-featured.

As I said, I don't want buttons, thumbnails etc etc, just a simple script that will display an image the width of the wrapper and scroll to the next one every 2 or three seconds ?

Thanks
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
GaryCommented:
Are you using jQuery?  This will make it a lot easier to get a choice of sliders like
http://xdesigns.net/2013/02/full-screen-slider/
or for a very simple one
https://github.com/JoeBonham/jQuery-Full-Width-Image-Slider
0
 
wilkesitAuthor Commented:
Super job - just what I was looking for!

Many thanks.
0
 
Tom BeckCommented:
You're welcome, glad to help.
0
 
wilkesitAuthor Commented:
Hi tommyBoy

It is perfect but I need it to fade a table data background image - so the target for the 'scroller' is..

<td height="406" valign="top" background="images/slider1.jpg">

It needs the background to cycle slider1, slider2, slider3.jpg etc - I don't mind setting this manually...

Shall I ask another question so you get the points? I wanted to alert you as your solution was so perfect and I didn't want to go back to square one.

Thanks in advance

Matt
0
 
wilkesitAuthor Commented:
Hi again tommyBoy

Here is the link to the new question if you have a moment to help?

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28292913.html

Thanks

Matt
0
All Courses

From novice to tech pro — start learning today.