My Carousel images are disappearing on Joomla. I'm trying to have an automatic banner for a webpage using the below code from W3 Schools, I have entered the code into a custom module in Joomla. I have also tried using it with Notepad++ and opening it in a browser and it works completely fine. However, on the Joomla page the images become white and do not display. I am able to switch between them an the CSS for the slider and arrows seems to work. Please find my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
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}
}
</style>
</head>
<body>
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg"
style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg"
style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img
src="https://www.w3schools.com/howto/img_mountains_wide.jpg"
style="width:100%">
<div class="text">Caption Three</div>
</div>
</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, 6000); // Change image every 6 seconds
}
</script>
</body>
</html>
If you are using Custom HTML Module - it disables all of your scripts
I advice you to use something else for using JS in module - for example - Flexi Custom Code
The code you have shown is for an entire html document, you can't simply dump that whole into another entire html document. Joomla is a CMS, you shouldn't just drop html into it. To add an image carousel it would be better to create your own module to do that.
Related
I am trying to implement a image slider in angular from scratch, and trying to replicate a w3school based image slider.
Below I have tried to implement in angular, Can anyone guide me how to implement using angular?
Here you can find stackblitz link
component.html
<div class="slideshow-container" #myDiv>
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://img.adaptivereso.com/https://stellarmls-propertyresi.s3.us-west-002.backblazeb2.com/314a10f7-07d4-4d9e-b8ea-be44be55ab35.jpeg/?rwidth=300&rheight=200&type=jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" >
<div class="numbertext">2 / 3</div>
<img src="https://img.adaptivereso.com/https://stellarmls-propertyresi.s3.us-west-002.backblazeb2.com/cd7c5e85-d528-4d10-a635-ace77aaef77d.jpeg/?rwidth=300&rheight=200&type=jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://img.adaptivereso.com/https://stellarmls-propertyresi.s3.us-west-002.backblazeb2.com/314a10f7-07d4-4d9e-b8ea-be44be55ab35.jpeg/?rwidth=300&rheight=200&type=jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" (click)="plusSlides(-1)">❮</a>
<a class="next" (click)="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" (click)="currentSlide(1)"></span>
<span class="dot" (click)="currentSlide(2)"></span>
<span class="dot" (click)="currentSlide(3)"></span>
</div>
component.ts
import { Component, OnInit, ViewChild, ElementRef, ViewChildren, QueryList } from '#angular/core';
#Component({
selector: 'app-custom-gallery',
templateUrl: './custom-gallery.component.html',
styleUrls: ['./custom-gallery.component.css']
})
export class CustomGalleryComponent implements OnInit {
slideIndex:number = 1;
constructor (public elementRef: ElementRef) { }
ngOnInit(): void {
this.showSlides(this.slideIndex);
}
plusSlides(n) {
this.showSlides(this.slideIndex += n);
}
currentSlide(n) {
console.log(n)
this.showSlides(this.slideIndex = n);
}
showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {this.slideIndex = 1}
if (n < 1) {this.slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
console.log(typeof slides[i]);
// slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// slides[this.slideIndex-1].style.display = "block";
dots[this.slideIndex-1].className += " active";
}
}
component.css
* {box-sizing: border-box}
body {font-family: Verdana, 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}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Here is an approach you could use:
Create an ImageSlider component, which takes a list of images as in an input, and keeps track of the current slide
export class ImageSliderComponent {
#Input() images: string[];
slideIndex: number = 0;
changeSlide(n: number) {
this.slideIndex += n;
}
}
In the template, display only the active slide (refer to the img src binding):
<div class="slideshow-container" #myDiv>
<div class="mySlides fade">
<div class="numbertext">{{ slideIndex + 1}} / {{ images.length }}</div>
<img
[src]="images[slideIndex]"
style="width:100%"
/>
<div class="text">Caption Text</div>
</div>
<a class="prev" (click)="changeSlide(-1)">❮</a>
<a class="next" (click)="changeSlide(1)">❯</a>
</div>
Use your component like:
<app-image-slider [images]="[
'http://images.com/image1.jpg',
'http://images.com/image1.jpg',
'http://images.com/image3.jpg']"></app-image-slider>
Stackblitz: https://stackblitz.com/edit/angular-ivy-x9nk16?file=src%2Fapp%2Fimage-slider.component.ts
Note:
avoid use of ElementRef, getElementsByClassName, etc in Angular applications, this is usually an indication you are not using Angular conventions.
I'm creating a simple html page with some text and css, on the top I have a few imagens with slideshow and on the body I put a big text, but I'm learning html and css.
The Question:
I used padding for the text but when is mobile the padding is not good for reading, if someone can help me just take a look at the codes, I used w3schools as a reference to create the page:
<!DOCTYPE html>
<html>
<head>
<style>
div .padding {
padding: 90px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
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}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://cdn.dooca.store/568/files/2img.jpg?v=1617815220" style="width:100%">
<div class="text">Óleos Ozonizados</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://cdn.dooca.store/568/files/1img.jpg?v=1617815212" style="width:100%">
<div class="text">Óleo de Girassol</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://cdn.dooca.store/568/files/3img.jpg?v=1617818739" style="width:100%">
<div class="text">Óleo de Oliva</div>
</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>
<div class="padding">
<p><strong>O que são os óleos ozonizados?</strong></p>
<p style="text-align: justify;">Os óleos ozonizados são produzidos basicamente a partir de 2 ingredientes, o óleo vegetal e o gás ozônio. A incorporação da molécula de ozônio ao óleo vegetal resulta de uma reação química, onde o ozônio reage com as ligações duplas de carbono presente nas cadeias lipídicas. Essa reação produz uma série de novas moléculas como ozonídeos e peróxidos que são responsáveis pela ação antimicrobiana e bioestimuladora dos óleos ozonizados. </p> </div>
</body>
</html>
Just edit this:
div .padding {
padding: 90px;
}
to
.padding {
padding: 90px;
}
You should also only use one <style> tag.
Also would like to advice to check out Media Queries where you can control the styling base on Responsive:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I'm struggling with debugging this slideshow. I have understood everything except this part:
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';
This is the last part of the javascript code. Please, can anyone explain this to me line by line. I have tried to use the debugger and I didn't understand how does it work.
Here is the whole code:
HTML:
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img1.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="img2.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="img3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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>
CSS:
* { box-sizing:border-box }
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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: 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}
}
JavaScript:
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';
}
By the way, I have found this on w3schools.com I'm struggling with the last part as I said I don't know:
Why they replace "active" with ""?
Why they used this += sign what does it do in this case?
please try to make it simple as simple as possible and thaaaaank youuuuu in advance :)
The first for loop hides all of the slides, by setting the CSS display property to "none". The second 'for' loop makes the "current" slide button look inactive.
The second to last line of code makes the previous slide (slides[slideIndex-1]) visible. The last line makes the button for the previous slide look active.
I am creating slideshow code by mixing two codes of w3school example, all other things like next button are working fine. Only previous button (for loading previous image) is not working. I am debugging the JavaScript but not able to find or rectify the bug.
SlideShow ScreenShot
/slideshow.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="slideshow_style.css">
</head>
<body>
<!-- Slideshow container -->
<div class="slideshow-container" onmouseover="stop_timeout()" onmouseout="start_timeout()">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="img_nature_wide.jpg" style="width:100%">
<div class="text">Caption Four</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(0)"></span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script src="slideshow_script.js"></script>
</body>
</html>
/slideshow_script.js
var slideIndex = 0;
showSlides(slideIndex);
function plusSlides(n) {
clearTimeout(myTime);
if(n===1){showSlides(slideIndex += (n-1));}
if(n===-1){showSlides(slideIndex += n);}
clearTimeout(myTime);
}
function currentSlide(n) {
clearTimeout(myTime);
showSlides(slideIndex = n);
}
function showSlides(num) {
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}
if (num > slides.length) {slideIndex = 0}
if (num < 1) {slideIndex = slides.length - 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";
myTime = setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function start_timeout() {
myTime = setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function stop_timeout() {
clearTimeout(myTime);
}
/slideshow_style.css
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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: 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: 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}
}
I know this is stupid question, but i am stuck. Please help me out, how can i make this code working. Please point out the bug. Thanks in advance.
Try replacing the line
if(n===-1){showSlides(slideIndex += n);}
with
if(n===-1){showSlides(slideIndex += (n-1));}
Also, just before the two lines
if (num > slides.length) {slideIndex = 0}
if (num < 1) {slideIndex = slides.length - 1}
add the following line:
if (slideIndex < 1) {slideIndex = slides.length; }
Also delete or comment out the two lines beginning if (num ...).
To be honest, there are aspects of your code that are confusing and are not helping you. It seems to me as if you haven't fully understood the code you have written and have just put things in because they seem to make it work.
Once you've got your code working, there's plenty of scope for writing it better. Take a look at https://codereview.stackexchange.com/.
how can i remove my slideshow width? and how can i add more number of picture in my slideshow
i want to increase my slideshow width, and increase number of picture of myslideshow, slideshow is writtern in java, css and html.
my pics size is 1200x300.
i tried to add width in css but width increased just right side, my pic does not fit in center please help me experts.
Help Help Help
Help Help Help
Help Help Help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
}
/* 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;
}
.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
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</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>
</body>
</html>
Simply remove the margin in the body and add the min-width: 100%; to the .slideshow-container.
For adding more slide just duplicate this code.
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="my-image.jpg"> <!-- remove the width property from all image tag. -->
<div class="text"></div>
</div>
There is no magical width property that will set the image width to 100% you need to set the width of the container of the image and the image will expand accordingly.
Also, increase the number of <span class="dot"></span> element as you increase the slides. Because it depends on the number of slides else it will stop the js code and throw an error.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box
}
body {
font-family: Verdana, sans-serif;
margin: 0px;
}
.widget {
margin: 0px;
}
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
min-width: 100%;
position: relative;
margin: auto;
}
/* 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;
}
.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
}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/food-q-c-1200-300-3.jpg" style="width: 100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="http://lorempixel.com/output/animals-q-c-1200-300-5.jpg" style="width: 100%">
<div class="text"></div>
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<!-- Increase the dots as you increase the slides -->
</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>
Is this what you want?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
/* 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;
}
.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}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://4.bp.blogspot.com/-LMLb-SRggk8/WdfQDgzmHYI/AAAAAAAAByc/UWQgh2DqSdAY5esr3-i5qmRYDFVuTh7zACLcBGAs/s1600/Flag%2B1200x300.jpg" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://3.bp.blogspot.com/-lbgXjiKwfss/WdfQufxdrsI/AAAAAAAAByk/A8oJ9b3nMugIs6LIgjv04qCHAfrO-NXrACLcBGAs/s1600/Animation%2BLight%2BHouse.gif" style="width:100%">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext"></div>
<img src="https://1.bp.blogspot.com/-6RWJYpjHqFE/WdfQ8S9RWrI/AAAAAAAAByo/OflSPE6aAKQpvWjfNUS3-lrddygVFaL6QCLcBGAs/s1600/outer%2Bspace%2Bnight%2Bstars.jpg" style="width:100%">
<div class="text"></div>
</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>
</body>
</html>