Solved

HTML Image slider

Posted on 2013-11-08
8
483 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
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.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now