I'm trying to make a slider for my website, but the slider I created is not rendering.
I attempted to write only the slider's markup, which worked, however, it is not working on my webpage.
Here is the code:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("custom-slider");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
.custom-slider {
display: none;
}
.slide-container {
max-width: 800px;
position: relative;
margin: 50px auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
font-size: 30px;
background-color: rgba(0,0,0,0);
transition: background-color 0.6s ease;
}
.prev{
left: 15px;
}
.next {
right: 15px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.5);
}
.slide-text {
position: absolute;
color: #ffffff;
font-size: 15px;
padding: 15px;
bottom: 15px;
width: 100%;
text-align: center;
}
.slide-img{
width: 100%;
height: 500px;
object-fit: cover;
object-position: center;
}
<div class="section3">
<h1 class="titre" id="realisations">REALISATIONS</h1>
<div class="slide-container">
<div class="custom-slider fade">
<img class="slide-img" src="imgr/Batiment.jpg">
<div class="slide-text">text1</div>
</div>
<div class="custom-slider fade">
<img class="slide-img" src="imgr/emmanchement2.jpg">
<div class="slide-text">text2</div>
</div>
<div class="custom-slider fade">
<img class="slide-img" src="imgr/Emmanchement_goupilles.jpg">
<div class="slide-text">text3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
If I change the display on the custom-slider, the slider appears, but with an image above, and an image below. When I click the button for swap pic, the display works as expected.
Here are some notes that may help:
CSS can be added to the <head> section by wrapping the css in <style> tags
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load
In your case... Your Javascript file needs to get some informations from your html document. Like this : var slides = document.getElementsByClassName("custom-slider"); so your html should be ready before your js codes. When you include your js in <head> , your html document wont load compeletly . So your js file have nothing to get the information that it needs.
You can also read this :
script doesnt load when on head
Related
i gave each div containing a slide of my slider a property position of value absolute and it hides elements following it.
basically i created a main tag with a section tag for the slider and another for the features section now because i gave position: absolute to the div with class slide the features section is invisible as it is hidden behind the slider section.
how can i fix this so that i can add other sections to my page and they appear properly following each other and not stacked or hiding behind each other like this.
please let me know if i don't get the real reason why this problem happened.
var slides = document.querySelectorAll('.sliderContainer .slide'),
slideCount = slides.length,
currentSlide = 1;
var paginationElement = document.createElement('ul');
paginationElement.setAttribute('id', 'paginationUl');
for (var i = 0; i < slideCount; i++) {
paginationItem = document.createElement('li');
paginationItem.setAttribute('data-index', i);
paginationElement.appendChild(paginationItem);
// paginationItem.appendChild(document.createTextNode(i));
}
var indicators = document.getElementById('indicators');
indicators.appendChild(paginationElement);
var paginationUL = document.getElementById('paginationUl'),
paginationBullets = Array.from(document.querySelectorAll('#paginationUl li'));
for (var i = 0; i < paginationBullets.length; i++) {
paginationBullets[i].onclick = function() {
currentSlide = parseInt(this.getAttribute('data-index'));
console.log(currentSlide);
checker();
}
}
checker();
function checker() {
removeActive();
slides[currentSlide].classList.add('active');
paginationBullets[currentSlide].classList.add('active');
}
function removeActive() {
slides.forEach(function(slide) {
slide.classList.remove('active');
});
paginationBullets.forEach(function(bullet) {
bullet.classList.remove('active');
});
}
var slideIndex = 0;
// showSlides();
function showSlides() {
removeActive();
slideIndex++;
if (slideIndex > slideCount) {
slideIndex = 1
}
slides[slideIndex - 1].classList.add('active');
paginationBullets[slideIndex - 1].classList.add('active');
setTimeout(showSlides, 2000);
}
.myMain {
display: flex;
flex-direction: column;
}
/* slider */
.slide {
position: absolute;
opacity: 0;
transition: opacity 1s;
z-index: var(--z-normal);
width: 100%;
text-align: center;
height: 40rem;
color: #fff;
}
.sliderContainer .active {
opacity: 1;
}
.sliderControls .indicators ul {
position: absolute;
z-index: 2;
text-align: center;
top: 35rem;
left: 13rem;
display: flex;
}
.sliderControls .indicators ul li {
margin-right: var(--mg-3);
background-color: var(--light-color);
/* color: var(--light-color); */
width: 1rem;
height: 1rem;
border-radius: 50%;
cursor: pointer;
}
<main class="myMain">
<!-- slider -->
<section class="sliderSection">
<div class="sliderContainer">
<div class="slide slide1">
<div class="slidecontent">
<h1>START YOUR STARTUP WITH THIS TEMPLATE</h1>
<button type="button" name="button" class="blueButton">Get Started</button>
</div>
</div>
<div class="slide slide2">
<div class="slidecontent">
<h1>START YOUR STARTUP WITH THIS TEMPLATE</h1>
<button type="button" name="button" class="blueButton">Get Started</button>
</div>
</div>
<div class="slide slide3">
<div class="slidecontent">
<h1>START YOUR STARTUP WITH THIS TEMPLATE</h1>
<button type="button" name="button" class="blueButton">Get Started</button>
</div>
</div>
</div>
<div class="sliderControls">
<span id="indicators" class="indicators">
</span>
</div>
</section>
<!-- features -->
<section class="featuresSection">
<div class="featuresHeader">
<h1>Our Awesome Features</h1>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
<div class="">
</div>
</section>
</main>
add this
.sliderContainer {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.slide {
flex-shrink: 0;
}
/* slider */
.sliderContainer {
position: relative;
overflow: hidden;
height: 40rem;
width: 100%;
}
.sliderContainer .slide {
position: absolute;
opacity: 0;
transition: opacity 1s;
z-index: var(--z-normal);
text-align: center;
color: #fff;
height: 100%;
width: 100%;
}
This question already has answers here:
Making a slideshow with arrays Javascript
(3 answers)
Closed 3 years ago.
I'm trying to finish my first website, I have short deadline, I know html css and a bit of JQuery, but right JS is still difficult for me
I would like to have a slideshow in my website, that's why I went to the w3school and tried to replicate the example in my visual studio code.
$(document).ready(() => {
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
});
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="./IMAGENS/CASA A (1).jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/CASA B (3).jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/MUDA_L11_02_FINAL.jpg" width="100%">
</div>
<div class="myslides fade">
<img src="./IMAGENS/MUDA_L11_05_FINAL.jpg" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
When I try to refresh the page everything looks fine but when I click in the button to change slides nothing happens. What you think should I do?
I tried to make a slideshow with arrays and it didn´t work. So I think it´s a problem with my VSCODE not assuming these two elements.
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
In my program when I do onclick="plusSlides(-1)" the first quote appears in yellow but the second one in white it seems that onclick is not asssigned
Just as #edinhajdarevic said, using an array is a better approach due to many advantages, some of those are the following:
Rendering your slides in the DOM using an array makes your structure dynamic. Dynamic means, everytime you want to add a new slide, you could append a new slide object to your array of slides, instead of writting an HTML and a JavaScript every slide by hand.
Once you have all of your slide code defined, you will be able to mantain your code with ease, instead of reading multiple lines, you just have to care about your JavaScript code.
Less error prone, every time you copy/paste HTML or JavaScript to build another slide, you will have to change values based on the new slide, sometimes this turns into a messy work causing bugs in a future.
A nice tutorial can be found in the following W3Schools link:
Slideshow Tutorial
Your functions are declared on scope of $(document).ready's callback, so onclick cannot reach them.
Solution 1: Move your declarations outside $(document).ready's callback.
var slideIndex = 1;
$(document).ready(() => {
showSlides(slideIndex);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
Solution 2: Remove onclick attributes and add click listeners in $(document).ready's callback
$(document).ready(() => {
var slideIndex = 1;
showSlides(slideIndex);
$(".prev").click(function() {
plusSlides(-1);
});
$(".next").click(function() {
plusSlides(1);
});
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("myslides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
});
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
.myslides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.fade {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+1" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+2" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+3" width="100%">
</div>
<div class="myslides fade">
<img src="https://via.placeholder.com/400x200&text=image+4" width="100%">
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
I would like to know how to make this slider to automatic slideshow.
This slider contains clickable bullets at the bottom and pre/next buttons on the slides but doesn't animate itself.
Would anyone please let me know how to make it automatic slideshow?
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
Thank you in advance.
Use setInterval() function to make the slideshow automatically for the certain time interval.
Add the setInterval() function in your example reference link after the below line:
var slideIndex = 1;
showSlides(slideIndex);
setInterval(function(){ showSlides(++slideIndex); }, 1000);
The slide will be changed every 1000 milli seconds. If you need you can adjust the time as per your need.
You could do what the click on the next button does: call plusSlider with a parameter 1.
To do that every 2000ms your can use setInterval. On that w3schools tryit page put following code before the closing </script> then run it:
setInterval(plusSlides,2000,1);
What I would recommend is making use of a setInterval() function such as the following:
setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 3000);
The above function increases the current index, then triggers the showSlides() function, passing the index as a parameter. The 3000 denotes the speed at which the automation should occur, with the time specified in millseconds. Note that setInterval() should be used rather than setTimeout(), because setInteravl() fires more than once.
This gives the following result:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
setInterval(function() {
slideIndex++;
showSlides(slideIndex);
}, 3000);
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</body>
</html>
Hope this helps! :)
As you might see I have fixed a kind of text box that will pop up when someone is hovering over that image, but honestly I want a slide-up effect that gone up slowly. Must be completely in pure JavaScript (no jQuery please!). Anyone knows how I can do that.
function show(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "visible";
}
}
function hide(myText) {
var elements = document.getElementsByClassName(myText)
for(var i = 0; i < elements.length; i++){
elements[i].style.visibility = "hidden";
}
}
.text1 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
.text2 {
position: relative;
bottom: 28px;
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
visibility: hidden;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image" onmouseover="show('text1')" onmouseout="hide('text1')">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text1">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image" onmouseover="show('text2')" onmouseout="hide('text2')">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text2">BBB</div>
</a>
</div>
</div>
</div>
Here is a version of it that's totally javascript free, just using CSS. I'm going to edit this soon with a slight javascript addition (this current version requires you to have a fixed size).
.caption {
height: 250px;
width: 355px;
overflow: hidden;
}
.caption-image {
height: 100%;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
Version with JS sizing:
Basically the same idea, but when the page is loading it sets certain styles so the images can be what ever size you like.
var captionSel = document.querySelectorAll('.caption');
for (let i = 0; i < captionSel.length; i++) {
let image = captionSel[i].querySelector(":scope > .caption-image");
let text = captionSel[i].querySelector(":scope > .caption-text");
text.style.width = image.clientWidth - 20 + "px";
captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
overflow: hidden;
}
.caption-text {
color: white;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
transform: translateY(-100%);
}
<div class="caption">
<img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
<div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>
<div class="caption">
<img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
<div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>
I'll give it to you even better: No javascript at all!
This is possible with pure CSS:
.tumb-wrapper {
position: relative;
overflow: hidden;
}
.text {
text-align: center;
background-color: grey;
width: 100%;
height: 10%;
font-size: 20px;
color: white;
opacity: 0.7;
display: block;
position: absolute;
bottom: -30px;
transition: 300ms;
left: 0;
}
.tumb-wrapper:hover .text {
bottom: 28px;
}
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.bbc.com" target="_blank" class="image">
<img src="https://i.vimeocdn.com/portrait/8070603_300x300" class="project" alt="print-screen"/>
<div class="text">AAA</div>
</a>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="tumb-wrapper">
<a href="http://www.cnn.com" target="_blank" class="image">
<img src="https://lh6.ggpht.com/mSKQgjFfPzrjqrG_d33TQZsDecOoVRF-jPKaMDoGIpMLLT1Q09ABicrXdQH6AZpLERY=w300" class="project" alt="print-screen"/>
<div class="text">BBB</div>
</a>
</div>
</div>
</div>
The transition css property animates whatever change you make. This way, when you hover over the .tumb-wrapper div, the .text div will slide up.
You should note however, that ancient IE versions won't be able to use this
I usually do this with only CSS.
Just save the first and second image right next to each other on one file... then you use css to change the position of the background image. To make things nicer i add a css-animation to the movement of the background image.
Example of my code:
<div id="thumb_Wrapper">
<div class="_Thumb">
<img src="images/Thumb.jpg" class="Animate_left">
</div>
</div>
The CSS
#_Container{position:absolute; bottom -60px; right:2px; width:626px; height:100px;}
._Thumb{position:relative; margin-right:4px; width:100px; height:80px; display:block; float:left; background:#EFEFEF; overflow:hidden;}
._Thumb > img{position:absolute; left:0; height:100%; background-size:cover; background-position:center;}
._Thumb > img:hover{left:-18px; cursor:pointer;}
CSS Animation
.Animate_left{transition:left .3s;}
Now all you have to do is swap out the image.
onHover - the image in the thumbnail will smoothly slide to the left; revealing the rest of the image/ showing the other image.
You can set how far to the left(or right) you want the thumb-image to first appear by adjusting the value of 'left' in the ._Thumb class.
You can set how far the image slides on hover by adjusting the img:hover{left:-18px} to what ever you like; instead of 18px.
I'm trying to create a slideshow with Javascript using this HTML. Thanks
<body>
<button id="next"> <img src ="buttons/next.png"/> </button>
<button id="back"> <img src = "buttons/back.png"/> </button>
<div class="container">
<div style="display: inline-block;">
<img src="agctype.jpg"/></div>
<div>
<img src="America.jpg"/></div>
<div>
<img src= "sbjlogo2.jpg"/></div>
</div>
Checkout codepen.io , I did a search for simple slide show. This one looks good for beginners http://codepen.io/jonny_roller/pen/MaNGwV
HTML
A Simple Slideshow
<div class="slideshow" onmouseover="showControls(this)" onmouseout="hideControls(this)">
<div class="controls hidden">
<a id="previous" href="" onclick="return slideshowPrevious()">‹</a>
<a id="play" class="hidden" href="" onclick="return slideshowPlay()">⊲</a>
<a id="pause" href="" onclick="return slideshowPause()">||</a>
<a id="next" href="" onclick="return slideshowNext()">›</a>
</div>
<div id="slide1" class="slide display" style="background-image: url(http://lorempixel.com/400/200/sports/1/)">
<span>Cricket: Some text goes here</span>
</div>
<div id="slide2" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/2/)">
<span>Surfing: Some more text appears here</span>
</div>
<div id="slide3" class="slide" style="background-image: url(http://lorempixel.com/400/200/sports/3/)">
<span>Cycling: This is the text for the final slide... it's a bit longer</span>
</div>
</div>
Some text at the bottom
CSS
body {
font-family: Verdana;
}
.slideshow {
position: relative;
width: 400px;
height: 200px;
}
.controls a {
z-index: 10;
color: #fff;
position: absolute;
font-size: 30px;
text-decoration: none;
width: 40px;
height: 40px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 20px;
}
#previous {
top: 80px;
left: 5px;
}
#next {
top: 80px;
right: 5px;
}
#play, #pause {
top: 80px;
left: 180px;
text-align: center;
display: block;
}
#pause {
font-size: 20px;
line-height: 34px;
}
#play {
line-height: 34px;
}
.slide {
width: 100%;
padding-bottom: 50%; /* 200/400 */
position: absolute;
top: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
transition: opacity 0.5s ease;
opacity: 0;
}
.slide span {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
}
.display {
opacity: 1;
}
.hidden {
display: none !important;
}
JS
var delay=3;
var slides=document.getElementsByClassName('slide').length;
var current=1;
var timer = setTimeout(nextSlide, delay*1000);
function nextSlide() {
var next = (current == slides ? 1 : current + 1);
$('slide' + current).classList.remove('display');
$('slide' + next).classList.add('display');
current = next;
timer = setTimeout(nextSlide, delay*1000);
}
function slideshowNext() {
slideshowPause();
var next = (current == slides ? 1 : current + 1);
$('slide' + current).classList.remove('display');
$('slide' + next).classList.add('display');
current = next;
return(false);
}
function slideshowPrevious() {
slideshowPause();
var prev = (current == 1 ? slides : current - 1);
$('slide' + current).classList.remove('display');
$('slide' + prev).classList.add('display');
current = prev;
return(false);
}
function slideshowPause() {
clearTimeout(timer);
timer = false;
$('pause').classList.add('hidden');
$('play').classList.remove('hidden');
return(false);
}
function slideshowPlay() {
$('pause').classList.remove('hidden');
$('play').classList.add('hidden');
nextSlide();
return(false);
}
function showControls(slideshow) {
slideshow.children[0].classList.remove('hidden');
}
function hideControls(slideshow) {
if (timer) {
slideshow.children[0].classList.add('hidden');
}
}
function $(id) {
return(document.getElementById(id));
}