Solved

HTML Image slider

Posted on 2013-11-08
8
504 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Use "if not" in a condition 2 19
Getting selected value using Jquery 3 22
Put POST values into cookies. 14 34
Prevent certain words from being typed in a form 6 31
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 …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 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