I am unable to make a slideshow appear by default on my website.
This is what I'm trying to get : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow (but with 2 photos instead of 3)
However, this is what I am getting: image
The photos only appear when i click the left or right arrows
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";
}
html{
font-family: Arial, Helvetica, sans-serif;
}
h1{
text-align: center;
}
.topnav a {
display: inline-block;
color: black;
background-color: rgb(233, 233, 233);
text-align: center;
padding: 5px;
text-decoration: none;
font-size: 17px;
flex: 1;
border: 3px solid black;
}
ul{
display: flex;
justify-content: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 5px solid black;
border-bottom: 5px solid black;
padding: 0;
background-color: black;
}
body{
height: 100vh;
background-image: linear-gradient( rgb(35, 166, 252), white);
}
* {box-sizing: border-box}
body {font-family: Arial, Helvetica, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* 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;
user-select: none;
}
/* 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: 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}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="mypast.css" rel="stylesheet">
<script src="mypast.js"></script>
<h1>MY PAST</h1>
<div class="topnav">
<nav>
<ul>
About Me
My Past
My Present
My Future
Feedback
</ul>
</nav>
</div>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 2</div>
<img src="friends.jpg" style="width:100%">
<div class="text">Caption one</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 2</div>
<img src="badmintonteam.jpg" style="width:100%">
<div class="text">Caption two</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>
</div>
</body>
</html>
setInterval(function(){
document.getElementById('yourNextSliderbuttonID').click();
},1000); // the button will be clicked every 1000milisec/1 secenter code here
Related
I have written some code that I want to apply to the site logo.
Please see below the full code script that includes html CSS and JavaScript. If you go to this page you can see that code in action on the second rotating logo: https://lutodigital.com/test2/
Please could you help me with what I'd need to do to apply this code to the site logo? Essentially turning the logo into a dropbutton with extras and adding the rotation to it so the site logo behaves in the same way that the below set of code does.
Thank you very much!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:hover {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.accordion:focus {
background-color: #00000000;
color: black;
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
max-width: 180px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
text-decoration: none;
display: block;
padding: 10px 0px 0px 5px;
margin: 0px 0px 0px 15px;
}
.panel {
color: black;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #00000000;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 12px!important;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 0px 0px 0px 10px;
margin: 0px 0px 0px 11px;
}
.link {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
.link:hover {
background-color: #00000000;
color: black;
max-width: 200px;
z-index: 1;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
margin: -4px;
text-decoration: none;
display: block;
padding: 6px 0px 6px 5px;
}
hr.solid {
border-left: none;
border-right: none;
border-top: 1px solid #000000;
border-bottom: none;
max-width: 200px;
margin-left: 15px;
padding-top: 5px;
margin-top: 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
.dropbtn:hover {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
.dropbtn:focus {
color: #00000000;
padding: 40px 12px 50px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://lutodigital.com/wp-content/uploads/2021/08/Circles-logo-png.png);
background-repeat: no-repeat;
background-size: 125px 125px;
outline: none;
animation-name: logo;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform: rotate(360deg);
transform-origin: middle;
}
#keyframes logo {
from {width: 125px; height: 125px; transform: rotate(0deg)}
to {width: 125px; height: 125px; transform: rotate(360deg);}
}
#myDropdown > div {
display: none
}
#myDropdown.show > div {
display: block
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Luto Digital:</button>
<div id="myDropdown">
<div>
<hr class="solid">
<div class="accordion-div">
<button class="accordion"><span class="faq__question-heading">About</span></button>
<div class="panel">
<p style="padding:18px 0;">We are the decisive factor behind your digital growth & success.<br><br>In a world of change overwhelmed with opinion, we can't be everything to everyone, but we can be everything to someone. We don't compromise on what really matters.<br><br>We deliver value through collaboration.</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Services</span></button>
<div class="panel">
<p style="padding:18px 0;">Digital Marketing . Strategic Thinking & Digital Consultancy . Website Design & Development . Omnichannel Execution . Video Content Creation & Editing . Behind The Scenes Video Editing . Destination Video Editing . SEO Services . Email Marketing . Social Content Strategy . Social Media Management . Content Marketing . Market Research . User Behaviour & Competitor Analysis . PPC Advert Management . Digital Audits . Data, Insights & Analytics</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Clients</span></button>
<div class="panel">
<p style="padding:18px 0;">WPJ Heating . Dove Men+Care . Collaborative Creations . Off The Wall Prints . Unilever . CompareCaribbean.com . Vision Salons . Boof Tennis . TRESemmé . Clipfix . Fit Within . Knorr . 31 Salon . Cindarella . Magnum . Wowo Campsite . Eastside Primetimers . AMP Agency . Boys Cry</p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading">Reviews</span></button>
<div class="panel">
<p style="padding:18px 0;"></p>
</div>
<hr class="solid">
<button class="accordion"><span class="faq__question-heading"><a class="link" href="mailto:hello#lutodigital.com">Talk to Us</a></span></button>
<div class="panel"></div>
</div>
<hr class="solid">
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
let active = document.querySelectorAll(".accordion-div .accordion.active");
for(let j = 0; j < active.length; j++){
active[j].classList.remove("active");
active[j].nextElementSibling.style.maxHeight = null;
}
this.classList.toggle("active");
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
im having trouble with css styling. I expect to have the button and the text number as this image expect(button is inside image and text is on top left), but my css show differentreal. The area than contains the button is outside image, and I dont know how to set it inside image. The button is set to either left:0 and right: 0 to float to the edge of the image, but it did not display as expected. Bellow is html and css snippet
body {
margin: 0;
font-family: 'Courier New', Courier, monospace;
background-color: #eee;
}
* {
box-sizing: border-box;
}
.card {
display: none;
}
.card-container {
margin: 50 auto auto auto;
max-width: 1000px;
position: relative;
}
.numbertext {
color: black;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img,iframe {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.text {
text-align: center;
}
blockquote {
display: block;
padding: 0;
text-align: center;
margin-top: -10px;
}
img, iframe {
/*filter: grayscale(100%);
-webkit-filter: grayscale(100%);*/
}
/* Slideshow container */
/* Next & previous buttons */
.prev,.next{
cursor: pointer;
position: absolute;
/*why it float*/
top: 50%;
width: auto;
padding: 10px;
margin-top: -22px;
color: red;
font-weight: bold;
font-size: 12px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.prev{
margin-left: 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);
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: -10px 2px 2px 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 {
animation-name: fade;
animation-duration: 1.5s;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card-container">
<div class="card">
<div class="numbertext">1 / 7</div>
<a href="https://youtu.be/gDmubAFyA2k"
target="_blank"><img src="p6.jpg"
style="width: 50%" title="click here to view song">
</a>
<div class="text">
<!--speak up cannot embed video-->
<h2>Speak up</h2>
<blockquote>
This song is played in one of the last scene when Edward saw Alice's vision and he saw Renesmee and Jacob together,
it feels relieving.
</blockquote>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
</div>
<script src="test.js"></script>
</body>
</html>
I'm making a slideshow as explained in the W3School example below:
https://www.w3schools.com/howto/howto_js_slideshow.asp
I have the following issue: the active class is not shown when refreshing the page.
Here is the link to the problem.
https://github.com/FrancoisXavierPelletier/Intermarium24.com/issues/1
Best regards.
I have tried to modify the first margins and width to match the needs, but the second and third images do not show this margin.
Expected change: The code should add an active class to be displayed and show it by default. This can be done in Javascript.
Result: When refreshing the page, instead of having the slideshow not visible, the first slide should be active.
Here is the code in Javascript I use:
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";
}
*{
margin: 0;
padding; 0;
background: darkslategrey;
}
body{
font-family: arial, sans-serif;
}
h1{
font-family: 'Crete Round', serif;
font-size: 45px;
color: whitesmoke;
}
.wrapper{
width: 940px;
margin: 0 auto;
padding: 0 0;
}
.orange{
color: orange;
}
header ul{
list-style: none;
}
header a{
text-decoration: none;
color: whitesmoke;
font-weight: bold;
margin-right: 20px;
}
header{
height:100px;
}
header h1{
float: left;
margin-top: 25px;
}
header nav{
float: right;
margin-top: 50px;
}
header nav li
{
display: inline-block;
}
header nav li a {
text-transform: uppercase;
}
.clear{
clear: both;
}
/* Slideshow */
.slideshow-container {
max-width: 940px;
position: relative;
margin: auto;
background: red;
}
.mySlides {
display: none;
height: 300px;
width: 97.5%;
border: 1px solid white;
border-radius: 10px;
}
#slide1{
background: url('images/img1.jpg') center;
}
#slide2{
background: url('images/img1.jpg') center;
}
#slide3{
background: url('images/img1.jpg') center;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 40%;
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;
}
.prev {
left: 150px;
border-radius: 3px 0 0 3px;
}
.next {
right: 150px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
border-radius: 3px 0 0 3px;
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
margin-top: 237px;
position: relative;
width: 97.4%;
text-align: justify;
background: black;
opacity: 0.8;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: relative;
top: 0;
background: transparent;
}
.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}
}
/* Category */
.category{
height: 200px;
width: 172px;
background: red;
float: left;
margin: 20px 5px;
border: 1px solid white;
border-radius: 5px;
}
#military{
background: url('images/military.jpg') center;
}
#economy{
background: url('images/economy.jpg') center;
}
#society{
background: url('images/social.jpg') center;
}
#culture{
background: url('images/culture.jpg') center;
}
#tech{
background: url('images/tech.jpg') center;
}
h2{
color: white;
font-size: 20px;
text-align: center;
margin-top: 150px;
padding: 5px;
text-transform: uppercase;
font-family: 'Crete Round', serif;
background: black;
opacity: 0.8;
}
/* footer */
footer{
height: 250px;
background-color: white;
}
.footer-div{
background: white;
margin: 20px;
float: left;
width: 20%;
height: 200px;
}
h3{
background: transparent;
color: black;
text-transform: uppercase;
font-weight: bold;
padding: 10px;
margin-top: 10px;
}
footer ul{
list-style: none;
background: white;
}
footer li{
padding: 5px;
background: white;
}
footer a{
background: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Intermarium24.pl </title>
<link href="http://fonts.googleapis.com/css?family=Crete+Round" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="myscript.js"></script>
</head>
<header>
<div class="wrapper">
<h1>Intermarium<span class="orange">24</span>.com</h1>
<nav>
<ul>
<li>Home </li>
<li>Discover </li>
<li>Register </li>
<li>Login </li>
<li>Contact </li>
</ul>
</nav>
</div>
</header>
<section id="slideshow">
<div class="wrapper">
<div id="slideshow-container">
<div class="mySlides fade" id="slide1">
<div class="numbertext">1 / 3</div>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" id="slide2">
<div class="numbertext">2 / 3</div>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" id="slide3">
<div class="numbertext">3 / 3</div>
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
</section>
<div class="clear"></div>
<section id="Main-articles">
<div class="wrapper">
<div class="category" id="military">
<h2>Military</h2>
</div>
<div class="category" id="economy">
<h2>Economy</h2>
</div>
<div class="category" id="society">
<h2>Society</h2>
</div>
<div class="category" id="culture">
<h2>Culture</h2>
</div>
<div class="category" id="tech">
<h2>Tech</h2>
</div>
</div>
<div class="clear"></div>
</section>
<footer>
<div class="wrapper">
<div class="footer-div">
<h3> Main menu</h3>
<ul>
<li><a>Home </a></li>
<li><a>Discover </a></li>
<li><a>Register </a></li>
<li><a>Login </a></li>
<li><a>Contact</a></li>
</ul>
</div>
<div class="footer-div" id="footer-category">
<h3> Categories</h3>
<ul>
<li><a>Military </a></li>
<li><a>Economy </a></li>
<li><a>Social </a></li>
<li><a>Cultural </a></li>
<li><a>Tech</a></li>
</ul>
</div>
<div class="footer-div" id="footer-legal">
<h3> Categories</h3>
<ul>
<li><a>Terms of Sales </a></li>
<li><a>Terms of Use </a></li>
<li><a>Privacy Policy </a></li>
<li><a>Legal Contact </a></li>
</ul>
</div>
<div class="footer-div" id="footer-socmed">
<h3> Social medias</h3>
<ul>
<li><a>Facebook </a></li>
<li><a>Twitter </a></li>
<li><a>Contact </a></li>
</ul>
</div>
</div>
</footer>
</html>
I recently implemented an automatic slider code for my slider in my website, however, it's not working for some reason. The code for the slider animation in the CSS style sheet is near the bottom. I was wondering if anybody could help me in solving the problem with my code.
Here is a picture of my slider, just want the images of the bikes to move automatically.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
Croydon Cycles
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Location</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slider">
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Kona Lanai 27.5" 2018 Mountain bike</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-2.jpg"></div>
<div class="caption">Decathlon B'twin Rockrider 520S Full Suspension Mountain Bike</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-3.jpg"></div>
<div class="caption">Ribble Aero 883 Carbon Road Bike - Matte Black</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div class="slider-pic"><img class="Fit" src="images/slider-4.jpg"></div>
<div class="caption">Lapierre Overvolt AM700i</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
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>
<div class="content">
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 60px;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 100%;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: black;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: black;
font-size: 15px;
padding: 8px 22px;
left:-2%;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-pic {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}
#keyframes slider{
0%{
left: 0;
}
20%{
left: 0;
}
25%{
left: -100%;
}
45%{
left: -100%;
}
50%{
left: -200%;
}
70%{
left: -200%;
}
75%{
left: -300%;
}
95%{
left: -300%;
}
100%{
left: -400%;
}
}
#slider {
overflow: hidden;
}
#slider figure img {
width:20%;
float: left;
}
#slider figure {
position: relative;
width: 500%;
margin:0;
left:0;
animation: 20s slider infinite
}
Add this instruction in your JS code:
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
// add this instruction !
setTimeout(function() {plusSlides(1) }, 1000)
})
Herem the method slidePlus is called every 1000ms
So I'm having a bit of an issue with my image gallery. I want my images to fade to the next or previous image when I press the prev/next buttons. But I also have a toggle feature that when you click on the image, it changes to a different one.
The toggle works for the first two images, but I lost the fade in transition. What can I do so I can have both the toggle and the fade in?
If I change the javascript code from
slides[i].style.display = "none"; slides[slideIndex-1].style.display = "block"
to
slides[i].style.opacity = "0"; slides[slideIndex-1].style.opacity = "1";
the fade in transition works, but I lose the toggle effect.
Here's the codepen: https://codepen.io/GabriellaFarfan/pen/VBYQGy.
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(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";
}
function toggleImage(id) {
var image = document.getElementById(id);
image.style.display = image.style.display == "none" ? "block" : "none";
}
function toggleBoth() {
toggleImage('image1')
toggleImage('image2')
toggleImage('image3')
toggleImage('image4')
}
$(document).ready(function(){
$(".next").click(function(){
$("")
});
});
* {
margin: 0;
padding: 0;
list-style-type:none;
}
body{
margin: 0;
font-size: 100%;
background-color: #232324;
height: 100vh;
}
.header {
overflow: auto;
background-color: #ECAAAC;
}
.logo {
float: left;
padding-top: 1em;
width: 20%;
text-align: center;
font-family: 'Allerta', sans-serif;
text-transform: uppercase;
font-weight: 700;
}
.logo a {
text-decoration: none;
font-size: 1em;
color: black;
}
.nav {
background-color: #232324;
padding-top: 1em;
padding-bottom: 1em;
width: 80%;
float: right;
}
li {
display: inline-block !important;
border-right: 1px solid #656568;
padding-right: 1.5em;
padding-left: 1.5em;
}
li:last-child{
border-right: none;
}
li a {
text-decoration: none;
text-align: center;
color: white;
font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
li a:hover {
color: #ECAAAC;
}
.text {
background-color: black;
padding: .75em 0 .75em 0;
}
p {
color: #656568;
text-align: center;
font-size: 1em;
font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}
#slideshow-container{
position: relative;
margin: auto;
background-color: black;
overflow: hidden;
padding-bottom: 2.5em;
height: 1000px !important;
}
#slideshow-container img{
display: block;
margin: 0 auto;
max-width: 100%;
position: relative;
height: 960px;
}
.myslides {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
opacity: 1;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 30px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
color: #fff;
cursor: pointer;
z-index: 1;
}
.next{
right: 0;
}
.prev:hover,.next:hover{
/* color: #b0d5d0 ; */
/* background-color: rgba(0,0,0,0.8); */
}
.caption{
text-align: center;
position: absolute;
width: 100%;
color: #f2f2f2;
text-shadow: 2px 2px 4px black;
font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
padding-top: 1.25em;
}
#media(max-width: 798px) {
#slideshow-container {
height: 640px !important;
}
#slideshow-container img {
max-height: 600px !important;
display: block;
margin: 0 auto;
max-width: 100%;
}
.nav {
width: 75%;
}
.logo {
width: 25%;
text-align: center;
}
.logo a {
font-size: .75em;
}
li {
padding-right: .75em !important;
padding-left: .75em !important;
}
}
#media(max-width: 468px) {
#slideshow-container {
height: 440px !important;
}
#slideshow-container img{
max-height: 400px !important;
display: block;
margin: 0 auto;
max-width: 100%;
}
.nav {
width: 65%;
}
.logo {
width: 35%;
text-align: center;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
<div class="header">
<div class="logo">
Gabriella Farfan
</div>
<div class="nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="slideshow-container">
<div class="text">
<p>Click on the image to see the before and after</p>
</div>
<div class="myslides fade">
<div>
<img id="image1" onclick="toggleBoth()" src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg">
<img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg">
</div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div>
<img id="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
<img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
</div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div>
<img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050">
</div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div>
<img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg">
</div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
Apart from making display none and display block try using visibility visible and hidden with transition:0.5s and opacity 0 / 1