My HTML page is blinking with a scroller. when <p> tag is not there, it is not occurring. How to stop and how to add move content?
<!DOCTYPE html>
<html>
<title>testing</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js.css">
<style>
* {box-sizing: border-box;}
.mySlides {display: none;}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 20px;
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 {
height:auto;
width: auto;
/*margin: 0 2px;*/
background-color: #FF0000;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
position: absolute;
}
.active {
background-color: #FF0000;
}
/* 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) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="header">
<div class="hinner">
<img src="Logo.png" alt="alternatetext" width="136px" height="84px">
<table class="hinnertext">
<tr>
<td style=" font-size: 14px; color:#139ea0; border-right-style: solid; border-width: 0.1em; padding: 0px 30px 0px 30px;"><span style="color:#139ea0; line-height: 20px;">Mon - Fri 8.30 AM - 5.00 PM </span><br><span style="color:#fff; inline-height:20px; ">Weekend Closed</span></td>
<td style="width:350px; color:#139ea0; border-right-style: solid; border-width: 0.1em; padding: 0px 30px 0px 30px;">
<div style="float:left;"> <img src="outline_local_phone_white_24dp.png"> </div>
<div><span style="font-size: 14px; line-height: 20px;">call us: </span> <br>
<span style="font-size: 18px; inline-height:20px; "> <a style="color:#D4D4D4;" href="tel:+94 11 2676858">+94 11 2676858</a> <a style="color:#D4D4D4;" href="tel:+94 113642727">+94 113642727</a></span> </div>
</td>
</tr>
</table>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="FEL-slideshow1.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="FEL-slideshow2.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="FEL-slideshow3.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="FEL-slideshow4.jpg" style="width:100%">
<span class="dot"></span>
<div class="text">Caption Three</div>
</div>
</div>
<div>
<!-- this is the problem area -->
<p>
hi
</p>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
#font-face {
font-family: 'Open Sans',sans-serif;
src: url(/font/OpenSans/OpenSans-Regular.ttf);
}
body {
margin: 0 !important;
font-size: 14px;
display: block;
}
div{
overflow:hidden;
}
.header{
/* display: block; */
background: #0a1940;
/*height: 150px;
width: 100%;*/
/* overflow: hidden; */
}
/*Styleing for inside of header - where company logo is*/
.hinner{
max-width: 1140px;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
padding: 35px 0;
}
.hinnertext{
padding: 4px 0;
float: right!important;
}
.hinnerdivider{
padding-right: 20px;
vertical-align: middle;
color: #fff;
}
Can anyone help ? This happens when the paragraph tag is included. When it is not there, webpage is not blinking and the scroller is not showing up. I have marked it with comment, where I have added the <p> tag.
Related
I'm trying to make an image to open on another location on the page while its been hovered.
I looked online but didn't find a way to do that functionallty usuing only html and css.
Anyone know how to achive that?
Not hovered:
Hovered:
I tried to make another copy of the image transpert on defined area on a grid but it can't sit on top of the text.
html code:
<section id="fav-place" class="place-sec">
<article class="place-art">
<div class="place-desc">
<h1>A place I Enjoyed visiting</h1>
<h2 class="sec-h2">Cape Greco, Cyprus</h2>
<p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
</p>
<p>
In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving.
Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
These caves, along with Smugglers caves, are accessible only by the sea.
</p>
</div>
<div class="why-i-like-place">
<h2>Why I like this place</h2>
<p>Because of the clear water, the cliffs around and the beautiful sights</p>
</div>
</article>
<aside class="place-aside">
<img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
<img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/tree.jpg" alt="tree-img">
</aside>
</section>
css code:
.place-art {
grid-column: 1/2;
display: grid;
grid-template-rows: 3fr 1fr;
}
.place-desc-sec{
grid-row: 1/-2;
}
.place-aside {
border: solid 0.5vh;
border-color: rgba(185, 218, 100, 0.862);
border-radius: 1vh;
margin-top: 6vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.place-sec {
display: grid;
grid-template-columns: 2fr 1fr;
}
.first-last-img {
margin: 0;
}
.p-sm-img {
margin: 0.2vh 0;
width: 23.5vw;
}
.p-sm-img:hover {
}
.p-lrg-img {
visibility: hidden;
opacity: 0.2;
grid-row: 1/-2;
grid-column: 1/2;
}
.why-i-like-place {
grid-row: 2/3;
grid-column: 1/2
}
Heres the code!
<!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">
<link rel="stylesheet" href="main.css">
<title>website</title>
</head>
<body>
<section id="fav-place" class="place-sec">
<article class="place-art">
<div class="place-desc">
<h1>A place I Enjoyed visiting</h1>
<h2 class="sec-h2">Cape Greco, Cyprus</h2>
<p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
</p>
<p>
In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving.
Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
These caves, along with Smugglers caves, are accessible only by the sea.
</p>
</div>
<div class="why-i-like-place">
<h2>Why I like this place</h2>
<p>Because of the clear water, the cliffs around and the beautiful sights</p>
</div>
</article>
<img id="bigImg">
<aside class="place-aside">
<img onmouseover="" class="p-sm-img first-last-img" src="/images/5f80f09d-6657-41af-a56c-bb2970718dfb.jpg" alt="boat-img">
<img class="p-sm-img" src="/images/adobestock_162537886.jpeg" alt="bridge-img">
<img class="p-sm-img" src="/images/bg6.jpg" alt="cave-img">
<img class="p-sm-img" src="/images/city-buildings-sunset-clouds-wallpaper-preview.jpg" alt="hole-img">
<img class="p-sm-img" src="/images/helianthus-yellow-flower-pixabay_11863.jpg cliff.jpg" alt="sm-cliff-img">
<img class="p-sm-img" src="/images/image_large.jpg" alt="sunrise-img">
<img class="p-sm-img first-last-img" src="/images/photo-1448375240586-882707db888b.jpg" alt="tree-img">
</aside>
</section>
<script src="app.js"></script>
</body>
</html>
.place-art {
grid-column: 1/2;
display: grid;
grid-template-rows: 3fr 1fr;
}
.place-desc-sec{
grid-row: 1/-2;
}
.place-aside {
border: solid 0.5vh;
border-color: rgba(185, 218, 100, 0.862);
border-radius: 1vh;
margin-top: 6vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.place-sec {
display: grid;
grid-template-columns: 2fr 1fr;
}
.first-last-img {
margin: 0;
}
.p-sm-img {
margin: 0.2vh 0;
width: 23.5vw;
}
#bigImg {
max-width: 500px;
position: fixed;
right: 0;
top: 0;
}
.p-lrg-img {
visibility: hidden;
opacity: 0.2;
grid-row: 1/-2;
grid-column: 1/2;
}
.why-i-like-place {
grid-row: 2/3;
grid-column: 1/2
}
a = document.querySelectorAll(".p-sm-img");
for (i in a) {
a[i].onmouseover = function (e) {
document.querySelector("#bigImg").src = this.src;
};
}
I hope open in a lightbox view help you in this case
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="row">
<div class="column">
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="row">
<div class="column">
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</div>
So I have made a simple HTML and CSS website with the background image currently set as the ocean picture.
Here is the code for this website
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li>Cooking</li>
<li>Writing</li>
<li>Creative</li>
<li>Photography</li>
</ul>
</div>
<div class="title">
<h1>Nila Palmo Ram</h1>
</div>
<div class="button">
ARTICLES
ARTWORK
</div>
</header>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: Century Gothic; }
header{
background-image: url(../2.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
ul li.active a{
background-color: #fff;
color: rgb(115, 196, 233);
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 10%;
left: 20%;
transform: translate(-50%,-50%);
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%,-50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: rgb(115, 196, 233);
}
For this website I want the background image to be a slider showing three images. I have built the slider separately. Here is the code for the slider:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website2</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<script>
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
}
</script>
</body>
</html>
CSS:
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-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
}
}
Could someone please tell me how I can make the slider of pictures the background of my website?
Thank you!
Make use of position:absolute and set the container height and width to 100%. (I used vh & vw to take the device/view height and width).
I hope you can take it forward. Cheers!!!
// no change here
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
}
* {
box-sizing: content-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0
}
.mySlides {
display: none;
/* added */
position: absolute;
left: 0;
top: 0;
height: 100vh;
width: 100vw;
}
/* added */
.mySlides img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slideshow-container {
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
box-sizing: border-box;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 10s;
animation-name: fade;
animation-duration: 10s;
}
#-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
}
}
<!-- image urls changed -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1422246654994-34520d5a0340?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Rustic wall decor out of reclaimed wood</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1523706120980-3f90ca135ad6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" style="width:100%">
<div class="text">Make memorising easier with spaced repetition</div>
</div>
<div class="mySlides fade">
<img src="https://images.unsplash.com/photo-1578301978018-3005759f48f7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1928&q=80" style="width:100%">
<div class="text">Stunning wall art using washi tape</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
(I created a post that was taken down because I don't think I gave enough info or something? I added more here, including the html code that I put together. Please let me know if this is not acceptable.)
I am trying to create a horizontal carousel where you can click the images that are linked to other pages. I have tried multiple types of carousels through HTML that I found on w3schools.com and other websites, but none of them were exactly what I was looking for. Here is what I was able to put together but it just isn't what I'm looking for. It doesn't scroll through the images like a carousel. I would also like to make the images links. Any suggestions?
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-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);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
</style>
<body>
<div class="container">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="image1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Lagoon">
</div>
<div class="column">
<img class="demo cursor" src="image2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Airport">
</div>
<div class="column">
<img class="demo cursor" src="image3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Plants">
</div>
<div class="column">
<img class="demo cursor" src="image4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Jeep">
</div>
<div class="column">
<img class="demo cursor" src="image5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Lagoon Again">
</div>
<div class="column">
<img class="demo cursor" src="image6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Airport Again">
</div>
</div>
</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("demo");
var captionText = document.getElementById("caption");
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
Here is a second one that I tried but it's just not right:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<div class="pagination">
«
<img src="https://example.com/image1.jpg" alt="Throw" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image2.jpg" alt="room" style="float: left; width: 22%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image3.jpg" alt=" sectional" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image4.jpg" alt="1970" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://example.com/image5.jpg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
<img src="https://exmple.com/image6.jpeg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;">
»
</div>
</body>
</html>
Here are two examples of what I would want it to look like:
The arrows are centered horizontally and vertically, but i want them centered horizontally with 100px of distance between prev and next arrows.
So they won't be sticked to the edge of the window.
I have tried to add the arrows on a div and then center them horizontally and vertically but can't make it work.
(function() {
init(); //on page load - show first slide, hidethe rest
function init() {
parents = document.getElementsByClassName('slideshow-container');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
dots = document.getElementsByClassName('dot'); //dots functionality
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
})();
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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: 20px;
width: 100%;
text-align: center;
}
.mySlides {
display: none;
}
.active-slide {
display: block;
}
/* 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
}
}
<!DOCTYPE html>
<html>
<head>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="http://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 / 4</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="http://placehold.it/1000x350" style="width:100%">
<div class="text">Caption Four</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<br>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="http://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="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev">❮</a>
<a class="next">❯</a>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<br>
</body>
</html>
One solution for this might be to place your arrows within a flexbox. With flexbox you can center the flex items (the arrows), and then set a margin on one of your arrows to separate these by the desired width - in this example, 100px:
If you require different spacing on different carousels, you can target the individual carousel arrows and add classes to these to get them to behave differently. The first example uses the class of center that has the flex attributes to center the arrows, and the second example has the class of between that has the flex attribute for space-between to push the arrows to the edge of the box.
index = 0;
parents = document.getElementsByClassName('slideshow-container');
(function() {
init(); //on page load - show first slide, hidethe rest
function init() {
// parents = document.getElementsByClassName('slideshow-container');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("mySlides");
var dots = parents[j].getElementsByClassName("dot");
slides[0].classList.add('active-slide');
slides[0].classList.remove('fade');
dots[0].classList.add('active');
}
}
dots = document.getElementsByClassName('dot'); //dots functionality
for (i = 0; i < dots.length; i++) {
dots[i].onclick = function() {
slides = this.parentNode.parentNode.getElementsByClassName("mySlides");
for (j = 0; j < this.parentNode.children.length; j++) {
this.parentNode.children[j].classList.remove('active');
slides[j].classList.remove('active-slide');
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.classList.add('active');
slides[index].classList.add('active-slide');
}
}
//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');
for (i = 0; i < links.length; i++) {
links[i].onclick = function() {
current = this.parentNode.parentNode.parentNode;
var slides = current.getElementsByClassName("mySlides");
var dots = current.getElementsByClassName("dot");
var curr_slide = current.getElementsByClassName('active-slide')[0];
curr_dot = current.getElementsByClassName('active')[0];
curr_slide.classList.remove('active-slide');
curr_dot.classList.remove('active');
if (this.className == 'next') {
if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
curr_slide.nextElementSibling.classList.add('active-slide');
curr_dot.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active-slide');
dots[0].classList.add('active');
}
}
if (this.className == 'prev') {
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-slide');
curr_dot.previousElementSibling.classList.add('active');
} else {
slides[slides.length - 1].classList.add('active-slide');
dots[slides.length - 1].classList.add('active');
}
}
}
}
})();
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
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;
}
.center>.next {
margin-left: 100px;
}
/* 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);
color: white;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
}
.mySlides {
display: none;
}
.active-slide {
display: block;
}
/* 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
}
}
.arrowWrap {
position: absolute;
top: calc(50% - 42px);
width: 100%;
}
.arrowFlex {
display: flex;
}
.center {
justify-content: center;
align-items: center;
}
.between {
justify-content: space-between;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://picsum.photos/id/1015/1000/350" style="width:100%">
<div class="text">Caption Four</div>
</div>
<div class="arrowWrap">
<div class="arrowFlex center">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://picsum.photos/id/1015/1000/350" style="width:100%">
<div class="text">Caption Four</div>
</div>
<div class="arrowWrap">
<div class="arrowFlex between">
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
This is my main code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*SLIDESHOW*/
body {
background-color: #150a35;
}
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 100%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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) {
.text {font-size: 11px}
}
/* SLIDESHOW */
/* Navigation list */
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7c4dff;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #4CAF50;}
ul.topnav li.right {float: right;}
#media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#hyperkeys">Hyper-Keys</a></li>
<li>Home</li>
<li>Games</li>
<li class="right">Terms of Service</li>
<li class="right">Contact</li>
<li class="right">FAQ</li>
</ul>
<br>
<br>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="1.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="2.png" style="width:100%">
</div>
<div class="mySlides fade">
<img src="3.png" style="width:100%">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<br>
</body>
</html>
And this is what it looks like:
But when I add this to the <head>:
div {
padding: 15px 30px;
background: #7c4dff;
width: 430px;
border-radius: 8px;
}
This happens to the site:
All the things just overlap, and you can't understand anything. What am I doing wrong?
Using
div {
padding: 15px 30px;
background: #7c4dff;
width: 430px;
border-radius: 8px;
}
Changes each and every div on the page to match those properties. All 5 of them, regardless of any class.
You need to be more specific with your CSS selector.
div.thisdiv {
padding: 15px 30px;
background: #7c4dff;
width: 430px;
border-radius: 8px;
}
<div class="thisdiv" style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>