guys. Trying to create my own gallery slider. But I have no idea how I can prevent the scrollbars. I know I have overflow: visible on both the wrapper and the images, but if I make it hiddenthen I won't see the images and they will get cropped off. What would be the best option here? Thanks.
<div id="wrapper" class="slider">
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-apple-elephant"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-animal-protect"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
<img src="http://netdna.webdesignerdepot.com/uploads/2008/12/stock-microstock.jpg" class="slide" width="30%" alt="logo-work-example-barcelona"></img>
</div>
#wrapper {
text-align: left;
display: inline-block;
/*background-color: */;
white-space: nowrap;
position: relative;
left: -1150px;
overflow: visible;
}
#wrapper img {
margin-left: 20px;
white-space: nowrap;
overflow: visible;
}
var currentSlide = 2;
var slider = $(".slide");
setInterval(function() {
$(".slider").animate({position: "relative", left: "+=400px"}, 2000, function () {
currentSlide++;
/*$("#wrapper").css("overflow", "hidden");*/
if (currentSlide === (slider.length - 1)) {
currentSlide = 1;
$(".slider").css("left", "-1150px");
}
});
}, 5000);
My codepen: http://codepen.io/Limpuls/pen/pRbZKe
Simplest solution (and actually often (always?) used when you have this type of slider) is to add one more div as container, set 100% (desired) width, and add overflow hidden to it:
#container {
width:100%; //if 100%, you can even remove this line, 100% is default width
overflow:hidden;
}
Demo: http://codepen.io/anon/pen/YNWjOM
Your wrapper is pushed left too far, and can be even more, depending on number of images, and you have to hide overflow somehow.
Related
I created my own version of a CSS grid because some browsers don't support that so I created a solution that works on all the browsers that I want it to work on to explain more what I mean I basically wanted to create a way for images to not
leave unnecessary space when you shrink it's parent container in other words the space in the parent and around the images is calculated to readjust every time when you resize the window so it acts like if it's using CSS grid or a flex structure like this
So I realize I wanted to focus having this work with a parent div with a scrollbar but this time the parent container will have a set height so after a while of adding more code to make this possible I thought I did it successfully
then I press the restore button
unaware of the unknown results of returning to a previous window size that have the parent container with a scrollbar calculated perfectly with my grid simulation. I start to notice that my grid simulation method stop working every time I use the restore button to resize to a previous window size
so as soon as I resize the window by dragging with the mouse my script starts working again. This is what i'm noticing by dragging to resize the window. It generates a certain width size in the DOM. Look where it says id='photo-gallery'
the restore button changes it's width
In my experience the
window.addEventListener('resize',function name);
works with the restore button and by resizing the window by dragging how can I solve this guys? I basically want the restore situation to work the same as by resizing the window by dragging.
Please no suggestions on using other CSS methods. Like I said I chosen this method because this works in certain browsers that have no support for the CSS grid method and the CSS flex method.
Here is my code
document.addEventListener('DOMContentLoaded',function(){
/*<Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/
/*
Note: CSS grid or flex don't work right or don't work at all
for the DOM in some browsers e.g certain versions of IE
and other browsers etc... so this is a fix to have a simulated grid
like structure in JS. To have it work on browsers
that don't work right or that don't
work at all with CSS grid or the
flex structure.
*/
//<Get the browser scrollbar width measurement>
//Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measurement";
document.body.appendChild(scrollDiv);
//
//Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
//
//Delete the DIV
document.body.removeChild(scrollDiv);
//
/*Reference this global variable as a numeric data type
so it can be use in that condition below that calculates
the browser scrollbar width combine with the
simulated grid*/
var scrollbarWidthResult= Number(scrollbarWidth);
/**/
//</Get the browser scrollbar width measurement>
//<check for a vertical scrollbar presence inside the photo gallery container>
window.addEventListener('resize',checkIfAVerticalScrollbarIsPresence);
function checkIfAVerticalScrollbarIsPresence() {
var photoGallery = document.querySelector('#photo-gallery');
if (photoGallery.scrollHeight > photoGallery.clientHeight) {
var scrollbarWidthResult= Number(scrollbarWidth);
/*The scrollbar is detected in the photo gallery container. Generate a JS simulation
of a grid and calculate with the width size of the scrollbar*/
var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
var times = Math.round(w / 150);
var iw = w / times;
Array.prototype.forEach.call(
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
photo_engine.style.width = iw + 'px';
document.querySelector('#photo-gallery').style.width = (iw * times + 1 + scrollbarWidthResult) + 'px';
}
);
/**/
}
else {
/*No vertical scrollbar is detected in the photo gallery container. Generate a
grid like simulation without a scrollbar calculation*/
var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
var times = Math.round(w / 150);
var iw = w / times;
Array.prototype.forEach.call(
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
photo_engine.style.width = iw + 'px';
document.querySelector('#photo-gallery').style.width = (iw * times + 1) + 'px';
}
);
//
}
}
checkIfAVerticalScrollbarIsPresence();
//</check for a vertical scrollbar presence inside the photo gallery container>
/*</Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/
});
.scrollbar-measurement {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px; /*<-- way the hell off screen */
}
#photo-gallery {
width: 60%;
height: 205px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow-y: auto;
overflow-x: hidden;
}
img {
background-color: pink;
height: 150px;
width: 150px;
float: left;
}
<div id='photo-gallery'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
</div><!--</photo-gallery>-->
This is a nice post. I agree CSS is the solution for things like this but in certain situations where the targeted browser don't have support for certain CSS methods then I can see how JavaScript will be helpful to use to simulate unsupported CSS methods.
I solved that restore button problem now. It should now work.
I also notice there was another problem with this script I discovered it unintentionally. I notice on page load when you have the window in a certain window size it prevents that grid script from executing so I also provided a solution to that by having that grid script run again by a timeout.
document.addEventListener('DOMContentLoaded',function(){
/*<Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/
/*
Note: CSS grid or flex don't work right or don't work at all
for the DOM in some browsers e.g certain versions of IE
and other browsers etc... so this is a fix to have a simulated grid
like structure in JS. To have it work on browsers
that don't work right or that don't
work at all with CSS grid or the
flex structure.
*/
//<Get the browser scrollbar width measurement>
//Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measurement";
document.body.appendChild(scrollDiv);
//
//Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
//
//Delete the DIV
document.body.removeChild(scrollDiv);
//
/*Reference this global variable as a numeric data type
so it can be use in that condition below that calculates
the browser scrollbar width combine with the
simulated grid*/
var scrollbarWidthResult= Number(scrollbarWidth);
/**/
//</Get the browser scrollbar width measurement>
//<check for a vertical scrollbar presence inside the photo gallery container>
window.addEventListener('resize',checkIfAVerticalScrollbarIsPresence);
function checkIfAVerticalScrollbarIsPresence() {
var photoGallery = document.querySelector('#photo-gallery');
if (photoGallery.scrollHeight > photoGallery.clientHeight) {
var scrollbarWidthResult= Number(scrollbarWidth);
/*The scrollbar is detected in the photo gallery container. Generate a JS simulation
of a grid and calculate with the width size of the scrollbar*/
var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
var times = Math.round(w / 150);
var iw = w / times;
Array.prototype.forEach.call(
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
photo_engine.style.width = iw + 'px';
document.querySelector('#photo-gallery').style.width = (iw * times + 1 + scrollbarWidthResult) + 'px';
}
);
/**/
}
else {
/*No vertical scrollbar is detected in the photo gallery container. Generate a
grid like simulation without a scrollbar calculation*/
var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
var times = Math.round(w / 150);
var iw = w / times;
Array.prototype.forEach.call(
document.querySelectorAll('#photo-gallery img'),
function(photo_engine){
photo_engine.style.width = iw + 'px';
document.querySelector('#photo-gallery').style.width = (iw * times + 1) + 'px';
}
);
//
}
}
checkIfAVerticalScrollbarIsPresence();
//</check for a vertical scrollbar presence inside the photo gallery container>
//<Fix for grid simulation does not execute by the window restore button>
window.addEventListener('resize',executeTheGridStructureByTheWindowRestoreButton(function(e){
checkIfAVerticalScrollbarIsPresence();
}));
function executeTheGridStructureByTheWindowRestoreButton(execute){
var timer;
return function(event){
if(timer) clearTimeout(timer);
timer = setTimeout(execute,100,event);
};
}
//</Fix for grid simulation does not execute by the window restore button>
//<Fix for grid simulation does not execute on page load in certain window sizes>
setTimeout(function(){checkIfAVerticalScrollbarIsPresence();},1);
//</Fix for grid simulation does not execute on page load in certain window sizes>
/*</Simulate a grid like structure similar to CSS grid in JS for the photo gallery>*/
});
.scrollbar-measurement {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px; /*<-- way the hell off screen */
}
#photo-gallery {
width: 60%;
height: 205px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow-y: auto;
overflow-x: hidden;
}
img {
background-color: pink;
height: 150px;
width: 150px;
float: left;
}
<div id='photo-gallery'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg'>
</div><!--</photo-gallery>-->
This is a pure css example hope it will help you:
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 100%;
}
.container .responsive {
margin: 6px 0;
padding: 0 6px;
float: left;
width: 16.66666%;
}
.container .gallery {
border: 1px solid #ccc;
}
.container .gallery img {
width: 100%;
height: auto;
}
#media (max-width: 1200px) {
.container .responsive {
width: 16.66666% !important;
}
}
#media (max-width: 992px) {
.container .responsive {
width: 24.99999% !important;
}
}
#media (max-width: 768px) {
.container .responsive {
width: 49.99999% !important;
}
}
#media (max-width: 576px) {
.container .responsive {
width: 100% !important;
}
}
<div class="container">
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Metolius_River_near_Wizard_Falls.jpg/1200px-Metolius_River_near_Wizard_Falls.jpg" alt="Cinque Terre" width="600" height="400">
</div>
</div>
</div>
I'm trying to create a series of sliding divs triggered on press of a button. The idea is that each div will have a thumbnail and some text tied to it. Upon clicking left/right button, the divs will move their position accordingly.
My code can be seen in the jsfiddle below. I'm encountering 3 problems:
1) The "transition: left 2s" rule isn't applying on the first transition effect, it does on the subsequent ones.
2) I'd like the repeat pressing of the corresponding buttons to apply the left property value again so that I can slide the divs repeatedly.
3) Instead of the "right" button re-positioning the "left" property back to 0, I'd like to shift it back in the opposite direction with the previous left property value.
Essentially I'm trying to recreate the slider found on this side.
http://www.euphoriumbakery.com/
Any help or input will be greatly appreciated.
Thank you very much for your help.
https://jsfiddle.net/kshatriiya/g709swLg/1/
window.onload = function() {
$("#left").on("click", function() {
$("#view").css("left", "-262px");
});
$("#right").on("click", function() {
$("#view").css("left", "0px");
});
}
#galwrapper {
width: 650px;
height: 400px;
display: block;
overflow: hidden;
}
#view {
position: relative;
width: 1423px;
transition: left 2s;
}
.col-md {
display: inline-block;
margin-top: 100px;
width: 18%;
}
.thumb img {
opacity: 0.9;
height: auto;
width: auto;
max-height: 150px;
max-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galwrapper">
<div id="view">
<div class="col-md">
<div class="thumb">
<img class="img-rounded" src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads/2010/09/retrocake1.jpg">
<div class="caption">
<h4>Retro Cake</h4>
</div>
</div>
</div>
<div class="col-md">
<a href="#" class="thumb active">
<img class="img-rounded" src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
<div class="caption">
<h4>Strawberry Cake</h4>
</div>
</a>
</div>
<div class="col-md" id="mid">
<a href="#" class="thumb">
<img src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
<div class="caption">
<h4>Retro Cake</h4>
</div>
</a>
</div>
#view {
position: relative;
width: 1423px;
left:0;
transition: left 2s;
}
Initially make left:0; for the div with id view https://jsfiddle.net/81tqeof4/6/
and for sliding effect get the current left position and update the position.check fiddle for an example
$("#left").on("click", function(){
var leftPosition = parseInt($("#view").position().left) - 256;
$("#view").css("left", -Math.abs(leftPosition));
});
transition works only on an existing property
So initially(in your CSS) you do not have a left property available in your #view. It is only later on a click that your JavaScript adds the left and your transition starts working.
So basically you need to set the left property to a value in your CSS, before your JavaScript takes effect and adds the left
#view {
position: relative;
width: 1423px;
left: 0; //initiate
transition: left 2s;
}
I would like to develop a scrolling function (on images) like on this site bethellery.com. At the moment, my code is kind of working, but I have a major problem: the size of the scrolling bar is nearly as big as my div size, so I can't scroll that much.
Here is the html:
<div id="container">
<div class="img-inner" id="img-1" style="display: block" >
<img class="img" src="src-1" alt="alt-1" />
</div>
<div class="img-inner" id="img-2" style="display: none" >
<img class="img" src="src-2" alt="alt-2" />
</div>
<div class="img-inner" id="img-3" style="display: none" >
<img class="img" src="src-3" alt="alt-3" />
</div>
<div class="img-inner" id="img-4" style="display: none" >
<img class="img" src="src-4" alt="alt-4" />
</div>
</div>
Here is the css:
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}
#container {
height: 100%;
width: 50%;
overflow-y: auto;
}
.img-inner{
height: 100%;
width: 100%;
}
.img {
height: 100%;
width: 100%;
}
Here is the js:
var lastScrollTop = 0;
var x = 1;
$('#container').scroll(function(event){
var st = $(this).scrollTop();
if(st > lastScrollTop){
//downscroll code
document.getElementById('img-'+x).style.display = "none";
//if next image isn't the last image
if((x+1) !== 4){
x=x+1;
}
document.getElementById('img-'+x).style.display = "block";
}
else{
document.getElementById('img-'+x).style.display = "none";
if((x-1) !== 0){
x=x-1;
}
document.getElementById('img-'+x).style.display = "block";
}
lastScrollTop = st;
});
I don't really know what is happening but I think due to the fact the display styles of the div are none, the scroll doesn't detect the flow under the first image.
On the site above, scroll bar size is clearly adapting itself to the numbers of images the div contains.
Thank you very much and have a great day.
The problem here is that display: none; turns off the display of an element, so it has no effect on layout (MDN's words), meaning any calculations that involve it simply won't.
This is demonstrated by the following JSFiddle (your code) - now two images are set to display: block; and the scroll bar shows this.
Try using visibility: hidden; instead, as demonstrated here. Visibility leaves an elements space occupied while not showing it. It's effect is like opacity.
I am looking to take a set of screenshots and make them into a walk through tutorial.
The end product I am aiming for is a slide show where on each screen shot the image makes it clear where on the screen shot to advance to the next shot. When the user clicks that area the show will advance.
I found this jsfiddle from another post on slide shows:
http://jsfiddle.net/rCd26/2/
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
.slideshow {
position: relative;
/* necessary to absolutely position the images inside */
width: 500px;
/* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block;
/* overrides the previous style */
}
<div class="slideshow">
<img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
<img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
<img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
<img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
I think there are 3 things I need to do to make it work for me:
Be able to position the next button within the image.
Be able to change the size of the next button (creating different size hotspots).
Be able to change the location of the hotspot by image.
Thanks for your input!
You have a .slideview element which is relatively positioned in the document, so images can be absolutely positioned inside of it. We'll be using the same technique for positioning your buttons. Let's create a new "global" container:
<div class="global_container">
<div class="slideshow">
<img src="http://placehold.it/500x100/0000CD&text=1" width="500" height="100" alt="first image">
<img src="http://placehold.it/500x100/008000&text=2" width="500" height="100" alt="second image">
<img src="http://placehold.it/500x100/B22222&text=3" width="500" height="100" alt="third image">
<img src="http://placehold.it/500x100/F4A460&text=4" width="500" height="100" alt="fourth image">
</div>
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
Now in your CSS add this class:
.global_container { /* selector for a class called global_container */
position: relative;
width: 500px; /* same width as your slider, probably use a couple pixels more */
height: 100px; /* whatever height you want, usually more than your slider height or equal */
}
Now, as your global container has position: relative;, you can position elements inside (adding a position: absolute; to their CSSes). So add to your CSS:
#prev { /* selector for the element with id="prev" */
position: absolute;
top: 45px; /* button will be positioned 45px from the top of the global container */
left: 10px; /* and 10px from the left of the global container */
}
#next {
position: absolute;
top: 45px; /* same as before */
right: 10px; /* same as before, but from the right of the global container */
/* you could even set the size of the buttons */
width: 40px;
height: 10px;
}
Hope this helps.
I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:
HTML:
<div id="slideshow">
<div>
<img src="slide_1.png">
</div>
<div>
<img src="slide_2.png">
</div>
<div>
<img src="slide_3.png">
</div>
</div>
CSS:
#slideshow {
position: relative;
width: 900px;
height: 450px;
}
#slideshow > div {
position: absolute;
}
If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!
Try this simple javascript code to make image slider.
(function() {
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function() {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
})();
.container {
position: relative;
width: 100%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
$("#slideshow > div:gt(0)").hide();
setInterval(function() { $('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow'); }, 3000);