Slider de texto o de imágenes

Hoy vamos a mostraros como podemos poner un Slider en nuestras paginas, tanto de texto como de imágenes.

Para ello nos vamos a nuestro post y en la edición HTML pegamos primero este código

Codigos

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

/* Slideshow container */

.slideshow-container {

  position: relative;

  background: #f1f1f1f1;

}

/* Slides */

.mySlides {

  display: none;

  padding: 80px;

  text-align: center;

}

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  margin-top: -30px;

  padding: 16px;

  color: #888;

  font-weight: bold;

  font-size: 20px;

  border-radius: 0 3px 3px 0;

  user-select: none;

}

/* Position the "next button" to the right */

.next {

  position: absolute;

  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);

  color: white;

}

/* The dot/bullet/indicator container */

.dot-container {

    text-align: center;

    padding: 20px;

    background: #ddd;

}

/* 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;

}

/* Add a background color to the active dot/circle */

.active, .dot:hover {

  background-color: #717171;

}

/* Add an italic font style to all quotes */

q {font-style: italic;}

/* Add a blue color to the author */

.author {color: cornflowerblue;}

</style>

<div class="slideshow-container">

<div class="mySlides">

  <q>I love you the more in that I believe you had liked me for my owgggggggggggggggn sake and for nothing else</q>

  <p class="author">- John Keats</p>

</div>

<div class="mySlides">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pybVQiXZhlcVckQHHydl0cgOB9cbJ8KbhNgyPpx6mGAvJPse_GAKTBiftMYjXZJQL2Qt0G1Med23YvA6pBcp_O7oAkfUsqBhipvYu1YMS26P8PiUM-1Jlcy9LBVWtAauoE8WudzeY65Lb6VtPMTy8P6_gOQ_u0Uno27hd_DZskQf6ltXim92Dwrujg/s1082/dise%C3%B1o%20blog.JPG" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Mali;"><img border="0" data-original-height="522" data-original-width="1082" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pybVQiXZhlcVckQHHydl0cgOB9cbJ8KbhNgyPpx6mGAvJPse_GAKTBiftMYjXZJQL2Qt0G1Med23YvA6pBcp_O7oAkfUsqBhipvYu1YMS26P8PiUM-1Jlcy9LBVWtAauoE8WudzeY65Lb6VtPMTy8P6_gOQ_u0Uno27hd_DZskQf6ltXim92Dwrujg/w400-h193/dise%C3%B1o%20blog.JPG" width="400" /></span></a>

</div>

<div class="mySlides">

  <q>I have not failed. I've just found 10,000 ways that won't work.</q>

  <p class="author">- Thomas A. Edison</p>

</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<div class="dot-container">

  <span class="dot" onclick="currentSlide(1)"></span> 

  <span class="dot" onclick="currentSlide(2)"></span> 

  <span class="dot" onclick="currentSlide(3)"></span> 

</div>

<script>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

  showSlides(slideIndex += n);

}

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

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

  var dots = document.getElementsByClassName("dot");

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

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

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

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

  }

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

      dots[i].className = dots[i].className.replace(" active", "");

  }

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

  dots[slideIndex-1].className += " active";

}

</script>

Como veréis podemos cambiar tanto el texto como las imágenes nada más cambiando este texto

<div class="mySlides">

  <q>I love you the more in that I believe you had liked me for my owgggggggggggggggn sake and for nothing else</q>

  <p class="author">- John Keats</p>

</div>

Por este otro

<div class="mySlides">

<a href="url de tu imagen" width="400" /></span></a>

</div>

Como veis hemos sustituido   <q> por <a href=

También podemos poner el tamaño de la imagen con width="400"

I love you the more in that I believe you had liked me for my owgggggggggggggggn sake and for nothing else

- John Keats

I have not failed. I've just found 10,000 ways that won't work.

- Thomas A. Edison

❮ ❯

No olvides nunca:

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso

También podemos optar si lo vamos a usar bastantes veces la opción de poner en nuestra plantilla la edición CSS

Nos vamos a Tema > HTML 

Busca la etiqueta  ]]></b:skin> y añade este bloque encima:

Codigos

<style>

* {box-sizing: border-box}

body {font-family: Verdana, sans-serif; margin:0}

/* Slideshow container */

.slideshow-container {

  position: relative;

  background: #f1f1f1f1;

}

/* Slides */

.mySlides {

  display: none;

  padding: 80px;

  text-align: center;

}

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  margin-top: -30px;

  padding: 16px;

  color: #888;

  font-weight: bold;

  font-size: 20px;

  border-radius: 0 3px 3px 0;

  user-select: none;

}

/* Position the "next button" to the right */

.next {

  position: absolute;

  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);

  color: white;

}

/* The dot/bullet/indicator container */

.dot-container {

    text-align: center;

    padding: 20px;

    background: #ddd;

}

/* 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;

}

/* Add a background color to the active dot/circle */

.active, .dot:hover {

  background-color: #717171;

}

/* Add an italic font style to all quotes */

q {font-style: italic;}

/* Add a blue color to the author */

.author {color: cornflowerblue;}

</style>

Dentro de nuestra entrada en la edicion HTML ponemos

Codigos

<div class="slideshow-container">

<div class="mySlides">

  <q>I love you the more in that I believe you had liked me for my owgggggggggggggggn sake and for nothing else</q>

  <p class="author">- John Keats</p>

</div>

<div class="mySlides">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pybVQiXZhlcVckQHHydl0cgOB9cbJ8KbhNgyPpx6mGAvJPse_GAKTBiftMYjXZJQL2Qt0G1Med23YvA6pBcp_O7oAkfUsqBhipvYu1YMS26P8PiUM-1Jlcy9LBVWtAauoE8WudzeY65Lb6VtPMTy8P6_gOQ_u0Uno27hd_DZskQf6ltXim92Dwrujg/s1082/dise%C3%B1o%20blog.JPG" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Mali;"><img border="0" data-original-height="522" data-original-width="1082" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pybVQiXZhlcVckQHHydl0cgOB9cbJ8KbhNgyPpx6mGAvJPse_GAKTBiftMYjXZJQL2Qt0G1Med23YvA6pBcp_O7oAkfUsqBhipvYu1YMS26P8PiUM-1Jlcy9LBVWtAauoE8WudzeY65Lb6VtPMTy8P6_gOQ_u0Uno27hd_DZskQf6ltXim92Dwrujg/w400-h193/dise%C3%B1o%20blog.JPG" width="400" /></span></a>

</div>

<div class="mySlides">

  <q>I have not failed. I've just found 10,000 ways that won't work.</q>

  <p class="author">- Thomas A. Edison</p>

</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>

</div>

<div class="dot-container">

  <span class="dot" onclick="currentSlide(1)"></span> 

  <span class="dot" onclick="currentSlide(2)"></span> 

  <span class="dot" onclick="currentSlide(3)"></span> 

</div>

<script>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

  showSlides(slideIndex += n);

}

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

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

  var dots = document.getElementsByClassName("dot");

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

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

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

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

  }

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

      dots[i].className = dots[i].className.replace(" active", "");

  }

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

  dots[slideIndex-1].className += " active";

}

</script>