T2.6.- Carrusels

Tema 2.6.- Carrusels

Carrusel Fix

Carrusel Fix amb Mini-imatges

Carrusel Fix amb Títols

Carrusel Automàtic

Carrusel amb Imatges automàtiques top, bottom, left i right

Carrusel amb Imatges automàtiques que s'esvaeixen

Carrusel Fix

Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:

Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Clica damunt de la imatge per veure un exemple

Carrusel Fix amb Mini-imatges

Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:

Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:

<div class="text">Caption Text</div>

</div>

<div class="text">Caption Two</div>

</div>

<div class="text">Caption Three</div>

</div>

<br>

</div>

let slideIndex = 0;

showSlides();

function showSlides() {

let i;

let slides = document.getElementsByClassName("mySlides");

let 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>

Al final de l'arxiu estils.css copieu les següents instruccions:

* {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 {

animation-name: fade;

animation-duration: 1.5s;

}

@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}

}

Clica damunt de la imatge per veure un exemple

Carrusel Fix amb Títols

Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:

Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:

pingu1

</div>

pingu2

</div>

pingu3

</div>

pingu4

</div>

pingu5

</div>

</div>

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

showDivs(slideIndex += n);

}

function showDivs(n) {

var i;

var x = document.getElementsByClassName("mySlides");

if (n > x.length) {slideIndex = 1}

if (n < 1) {slideIndex = x.length}

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

x[slideIndex-1].style.display = "block";

}

</script>

Al final de l'arxiu estils.css copieu les següents instruccions:

.mySlides {display:none;}

Clica damunt de la imatge per veure un exemple

Carrusel Automàtic

Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:

Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:

<div class="text">Caption Text</div>

</div>

<div class="text">Caption Two</div>

</div>

<div class="text">Caption Three</div>

</div>

<br>

</div>

let slideIndex = 0;

showSlides();

function showSlides() {

let i;

let slides = document.getElementsByClassName("mySlides");

let 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>

Al final de l'arxiu estils.css copieu les següents instruccions:

* {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 {

animation-name: fade;

animation-duration: 1.5s;

}

@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}

}

Clica damunt de la imatge per veure un exemple

Carrusel amb Imatges automàtiques top, bottom, left i right

Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:

Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:

</div>

var myIndex = 0;

carousel();

function carousel() {

var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 2500);

}

</script>

Al final de l'arxiu estils.css copieu les següents instruccions:

.mySlides {display:none;}

Clica damunt de la imatge per veure un exemple

Carrusel amb Imatges automàtiques que s'esvaeixen

Exemple de Carrusel amb Imatges automàtiques que s'esvaeixen

Dins del <head> </head> de la pàgina index.html copieu les següents instruccions:

Dins de la CAIXA de la pàgina index.html copieu les següents instruccions:

</div>

var myIndex = 0;

carousel();

function carousel() {

var i;

var x = document.getElementsByClassName("mySlides");

for (i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

myIndex++;

if (myIndex > x.length) {myIndex = 1}

x[myIndex-1].style.display = "block";

setTimeout(carousel, 9000);

}

</script>

Clica damunt de la imatge per veure un exemple