Solved

HTML Image slider

Posted on 2013-11-08
8
495 Views
Last Modified: 2013-11-13
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
0
Comment
Question by:wilkesit
  • 4
  • 3
8 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39633142
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
 

Author Comment

by:wilkesit
ID: 39633345
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39633595
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 58

Expert Comment

by:Gary
ID: 39633605
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
 

Author Closing Comment

by:wilkesit
ID: 39634571
Super job - just what I was looking for!

Many thanks.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39634720
You're welcome, glad to help.
0
 

Author Comment

by:wilkesit
ID: 39644357
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
 

Author Comment

by:wilkesit
ID: 39644584
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question