Al fin luego de tanto batallar pudimos encontrar el arreglo de esta contrariedad que ciertos usuarios de nuestro sitio tienen. Si deseas compartir alguna información no dejes de aportar tu información.
Ejemplo: como agregar carrusel en javascript
<!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:0.mySlidesdisplay: 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:03px 3px 0;
user-select: none;/* Position the "next button" to the right */.next
right:0;
border-radius:3px 003px;/* 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:02px;
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 fromopacity:.4
to opacity:1
@keyframes fade fromopacity:.4
to opacity:1/* On smaller screens, decrease text size */
@media only screen and(max-width:300px).prev,.next,.textfont-size:11px</style></head><body><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1/3</div><img src="img_nature_wide.jpg" style="width:100%"><div class="text">CaptionText</div></div><div class="mySlides fade"><div class="numbertext">2/3</div><img src="img_snow_wide.jpg" style="width:100%"><div class="text">CaptionTwo</div></div><div class="mySlides fade"><div class="numbertext">3/3</div><img src="img_mountains_wide.jpg" style="width:100%"><div class="text">CaptionThree</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><span class="dot" onclick="currentSlide(3)"></span></div><script>var slideIndex =1;showSlides(slideIndex);functionplusSlides(n)showSlides(slideIndex += n);functioncurrentSlide(n)showSlides(slideIndex = n);functionshowSlides(n)var i;var slides =document.getElementsByClassName("mySlides");var dots =document.getElementsByClassName("dot");if(n > slides.length)slideIndex =1if(n <1)slideIndex = slides.lengthfor(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></body></html>¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)