So I have a simple carousel that was working perfectly until I decided to add bootstrap. After I added the bootstrap stylesheet (not the script file) the content for my carousel now appears for a second then disappears??
I can click on the controls and the content appears again but then disappears again. I thought the bootstrap stylesheet was overriding my "prev" and "next" classes for the controls so I just renamed them but still nothing. I don't want to change my carousel script either since it was working just fine before but will if needed. Any help in figuring out what's causing it? There's another script for the second carousel but it's pretty much identical to that one. I don't know if my css will help but I posted it anyways. Please help:(
My HTML:
<!--project section headings-->
<div class="projects">
<a>
<div class="box projects-others" style="color: #ffdb4d;">
<h1 style="color: #ffdb4d;">Projects :<br> Others</h1>
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="project-text">
<h2>ProjectD</h2>
</div>
</div>
<div class="mySlides fade">
<div class="project-text">
<h2>ProjectE</h2>
</div>
</div>
<div class="mySlides fade">
<div class="project-text">
<h2>ProjectF</h2>
</div>
</div>
<a class="previous p-others" onclick="plusSlides(-1)">❮</a>
<a class="nexxt n-others" onclick="plusSlides(1)">❯</a>
</div>
</div>
</a>
<a>
<div class="box projects-coding" style="color:#00004d;">
<h1 style="color:#00004d;">Projects :<br> Coding</h1>
<!--second slider starts-->
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectA</a></h2>
</div>
</div>
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectB</a></h2>
</div>
</div>
<div class="mySlides2 fade">
<div class="project-text">
<h2><a>ProjectC</a></h2>
</div>
</div>
<a class="previous p-coding" onclick="plusSlides2(-1)">❮</a>
<a class="nexxt n-coding" onclick="plusSlides2(1)">❯</a>
</div>
</div>
</a>
</div>
CSS:
/*project section starts*/
.projects {
overflow: hidden;
height: 27em;
margin-top: 50px;
border: ;
}
.projects a {
cursor: default;
}
.box {
box-sizing: border-box;
box-shadow: 1.1px 1.2px #595959;
}
.projects h1 {
font-size: 4.40em;
text-align: center;
text-shadow: 0 3px 3px rgba(0,0,0,0.9);
font-family: 'Dancing Script', cursive;
line-height: 80px;
padding-top: 55px;
}
.projects-others, .projects-coding {
width: 50%;
-moz-transition: width .3s;
-webkit-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
height: 27em;
padding: 1em;
box-sizing: border-box;
}
.projects-others {
float: right;
background: #00004d;
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.projects-coding {
background: white;
border-right:;
}
.projects:hover .projects-others {
width: 40%;
}
.projects-coding:hover {
width: 60% ;
}
.projects-others:hover {
width: 60% !important;
}
.projects-others:hover ~ .projects-coding {
width: 40%;
}
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: auto;
}
.mySlides, .mySlides2 {
display:none;
}
.project-text {
color:;
display: flex;
font-size: 20px;
padding:12px;
position: absolute;
bottom: 1px;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.fade {
-moz-animation-name:fade;
-webkit-animation-name: fade;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.project-text a, a:visited, {
}
.previous, .nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top:;
font-weight: bold;
font-size: 28px;
transition:0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right:0;
border-radius: 3px 0 0 3px;
}
.previous:hover, .nexxt:hover {
cursor: pointer;
}
.p-others:hover, .n-others:hover {
background-color: white;
color: #00004d;
}
.p-coding:hover, .n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
#-webkit-keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
#media only screen and (max-width: 300px) {
.previous, .nexxt,.text {font-size: 11px}
}
Script:
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";
}
The fade class is likely colliding with bootstrap. You can reduce the chance of collision by either giving your class names a unique prefix like .carousel-fade or by scoping your css like this:
.slideshow-container .fade {
-moz-animation-name:fade;
-webkit-animation-name: fade;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
This will make yours apply only for fade class used within a slideshow-container.
Related
I have a failure message in my console. It says:
script.js:151 Uncaught TypeError: Cannot read property 'className' of undefined
at showSlides (script.js:151)
at script.js:126
Its about a Slider I got from W3 School (Link)
I changed a bit the Code from W3 and it shows me that Message in the Console. Also if i click on one arrow in the slider this will show in the Console:
Uncaught TypeError: dots[(slideIndex - 1)] is undefined
showSlides http://127.0.0.1:57616/js/script.js:151
<anonymous> http://127.0.0.1:57616/js/script.js:126
script.js:151:5
I feel like I'm missing something or forgot about something to change in the JavaScript. Unfortunately I'm not that good in coding in JS.. So I hope somebody could help me with the problem! Thanks a lot!
HTML
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="/img/szene2-werkzeuge.png" style="width:100%">
<p class="caption-text">Werkzeuge</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-feuer.png" style="width:100%">
<p class="caption-text">Feuer</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-ziege.png" style="width:100%">
<p class="caption-text">Nutztiere</p>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
CSS
.slideshow-container {
z-index: 20;
max-width: 400px;
position: absolute;
margin: auto;
top: 45%;
left: 45%;
background-image: url(/img/szene2-slider-BG.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center;
background-size: 100%; }
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.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: 50%;
user-select: none;
background-color: #c7113c;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 50%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: #333333;
}
.caption-text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: -10px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
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}
}
and JS:
// SLIDER
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
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";
}
There are no element found with var dots = document.getElementsByClassName("dot");
when try dots[slideIndex-1].className += " active";
it gives error Cannot read property 'className' of undefined
may be you messing some element of dot class in html
I added some div of dot class in html now it working fine
// SLIDER
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
//console.log(slides);
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";
}
// console.log(slides);
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
//console.log(slides);
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
.slideshow-container {
z-index: 20;
max-width: 400px;
position: absolute;
margin: auto;
top: 45%;
left: 45%;
background-image: url(/img/szene2-slider-BG.png);
background-repeat: no-repeat;
background-origin: padding-box;
background-position: center;
background-size: 100%; }
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.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: 50%;
user-select: none;
background-color: #c7113c;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 50%;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: #333333;
}
.caption-text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: -10px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 150px;
width: 150px;
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}
}
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<img src="/img/szene2-werkzeuge.png" style="width:100%">
<p class="caption-text">Werkzeuge</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-feuer.png" style="width:100%">
<p class="caption-text">Feuer</p>
</div>
<div class="mySlides fade">
<img src="/img/szene2-ziege.png" style="width:100%">
<p class="caption-text">Nutztiere</p>
</div>
<div class="dot"> </div>
<div class="dot"> </div>
<div class="dot"> </div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
The code runs quite well, the only issue i'm experiencing is that it doesn't start until its initiated with the control button. I need it to start sliding as soon as the page is loaded, I think it has to do with the display but i'm not quite sure. Kindly go through my code below and correct as appropriate i'll go to the stars and back to make sacrifices for the pandemic to be over if I get a solution
var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
showSlides();
function showSlides() {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
function currentSlide(no) {
var i;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex = no;
slides[no-1].style.display = "block";
}
function plusSlides(n) {
var newslideIndex = slideIndex + n;
if(newslideIndex < 4 && newslideIndex > 0){
currentSlide(newslideIndex);
}
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.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;
}
/* 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 {display: block;}
to {margin: 0;}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<div style="width:100%;background-color: yellow;height:50px;"> </div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div style="width:100%;background-color: black;height: 50px; "> </div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div style="width:100%;background-color: blue;height: 50px;"> </div>
<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>
I am working on an image carousel for a fictional company about airplanes. I will do much more styling later, so please excuse the extreme blandness of the code. I have a few stock images I pulled from the internet. It is really confusing me as I don't know what I did wrong. Thank you for taking the time to read my post, it really means a lot. Why won't the images pop up? Here is my code:
Html:
<div class="bulkOfPage">
<!-- Image Carousel Goes Here -->
<!-- Work More on This -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img/airplanes-work-1.jpg" style="width:100%">
<div class="text">Our fleet is the most updated in the business, with our planes being decked out in the latest equipment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img/landing1015-airplane.jpg" style="width:100%">
<div class="text">We have the most trained pilots in the industry, and this gives the smoothest landings you will find.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img/download.jpeg" style="width:100%">
<div class="text">We have landing rights at almost all of the major airports around the world.</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>
And my CSS:
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.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;
}
/* 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}
}
And finally, the JavaScript:
$(document).ready(function(){
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
});
Thank you so much for reading my post, it really means a lot to me. Thanks! Have a fantastic day!
This should work. I added functionality for your next/prev buttons, and the dot buttons.
Notice, what happens inside document.ready cannot be accessed with triggers like div onclick="plusSlides(1)", because of scope. So either you define functions outside of document.ready, or instead of onclick="" you use the jQuery way, like: $('.dot').click
Personally, I don't like that you use 1-based index. I think it adds to the confusion; it adds -1, +1 ,... I would suggest you use 0 based index in the future. Don't try for the first element to have 1 as index.
<body>
<div class="bulkOfPage">
<!-- Image Carousel Goes Here -->
<!-- Work More on This -->
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/css/img_fjords.jpg" style="width:100%">
<div class="text">Our fleet is the most updated in the business, with our planes being decked out in the latest equipment</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/css/img_forest.jpg" style="width:100%">
<div class="text">We have the most trained pilots in the industry, and this gives the smoothest landings you will find.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://www.w3schools.com/css/img_lights.jpg" style="width:100%">
<div class="text">We have landing rights at almost all of the major airports around the world.</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" data-index="1"></span>
<span class="dot" data-index="2"></span>
<span class="dot" data-index="3"></span>
</div>
<style>
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.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;
}
/* 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
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var timer;
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
timer = setTimeout(showSlides, 4000); // Change image every 4 seconds
}
// click on dot. Takes you straight to that picture
$('.dot').click(function() {
slideIndex = $(this).data('index') -1; // this reads the value of <... data-index="..." >
clearTimeout(timer);
showSlides();
})
// next / prev buttons
function next() {
clearTimeout(timer);
var slides = document.getElementsByClassName("mySlides");
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
showSlides();
}
$('.next').click(function() {
next();
})
function prev() {
clearTimeout(timer);
var slides = document.getElementsByClassName("mySlides");
slideIndex -=2;
if (slideIndex < 0) {
slideIndex = slides.length -1;
}
showSlides();
}
$('.prev').click(function() {
prev();
})
});
</script>
</body>
I am trying to create an overlay over an image such that the overlay should fade-in over 0.25sec when that image is in view, then fade-out after 3 seconds. On a hover event, the overlay should fade-in again, then fade-out when the cursor is no longer hovering. How do I achieve the aforementioned? I have the following:
.img-container {
position: relative;
}
.img-container img {
display: block;
width: 100%;
}
.overlay {
position: absolute;
top: 50;
left: 0;
right: 0;
bottom: 0;
width: 30%;
text-align: center;
opacity: 0;
transition: opacity 0.25s; /* fade-in over s time */
/* background: black; */
/* color: white; */
/*display: flex;
align-items: center;
justify-content: center;*/
font-size: 1em;
background-color: rgba(0,0,0,0); /* Black background with opacity */
}
.img-container:hover .overlay {
opacity: 1;
}
.image {
display: block;
width: 100%;
height: auto;
}
I would also want to achieve the same thing for a slideshow:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {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}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="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="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="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>
<script>
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";
}
</script>
</body>
</html>
You can play with transition:
.container {
width: 200px;
height: 200px;
border: 1px solid red;
transition: background-color 3s;
background-color: green;
}
.container:hover {
background-color: yellow;
transition: background-color 0.25s;
}
<div class="container"></div>
This is the html code
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style2.css">
<script src="learn1.js"</script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="learnimg/1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="learnimg/2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="learnimg/3.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>`
This is the css code
* {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0}
/* Slideshow container */ .slideshow-container { max-width: 1000px;
position: relative; margin: auto; }
/* Next & previous buttons */ .prev, .next { cursor: pointer;
position: absolute; top: 0; 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) { .slprev, .slnext,.text {font-size: 11px} }
This is the javascript 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("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"; }
All these 3 codes are in different files. This is basically for the creation of a simple slideshow of three images. But when I execute this(all in different files) there is nothing to display(white screen in the browser). But when executed in a single html file(all contents in a single file) there is a perfect slideshow.
I cannot figure out this problem. Please help me out with this.
This doesn't seem right :
<script src="learn1.js"</script>
You forgot to close the opening tag, as such :
<script src="learn1.js"></script>
Plus, it's always a good habit to specify your resource type :
<script type="text/javascript" src="learn1.js"></script>
The code you posted seems to work just fine.
Maybe the image files isn't where you say they are?
Try opening the console and look for errors.
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";
}
{
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 0;
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) {
.slprev,
.slnext,
.text {
font-size: 11px
}
}
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=2&w=100&h=100" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://placeholdit.imgix.net/~text?txtsize=60&txt=3&w=100&h=100" 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>