Mixing
Slider does not load properly
0
When you reach the last slide, and turn back to the first slide, there appears a small line on the left side. The image does not fill the entire slide. I think it could be a bug in the JavaScript code, what do you think?
You have a better view of the issue when you have a full screen view, and when you try to resize the screen trying to emulate responsive design.
You can see the following screenshots:
image 1
image 2
var slideIndex,slides,dots,captionText;
function initGallery(){
// 1 para ocultar y mostrar imageHolder con opasity 0
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder"); // slides=4
slides[slideIndex].style.opacity=1;
// 2 para mostrar las letras
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;
// 3 disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
// 4 add dots
dots=;
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
captionText.style.display="block";
}
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},6000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}.galleryContainer{
top: 0px;
position: relative;
width: 100%;
height: 580px;
max-width: 2000px;
margin: auto;
box-sizing: border-box;
background-color: red;
}
.galleryContainer .slideShowContainer{
width: 100%;
max-width: 1600px;
align-content: center;
height: 100%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url(/img/playPause.png);
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
min-width: 1600px;
height: 100%;
background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
position: absolute;
display: block;
width: 220px;
height: 40px;
font-size: 20px;
text-decoration: none;
left: 50%;
top: 350px;
padding-top: 4px;
text-align: center;
border: 2px solid #fff;
border-radius: 15px;
transition: all 0.5s;
color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 3;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
position: absolute;
bottom: 30%;
z-index: 1;
color: white;
font-family: "Nunito";
font-size: 40px;
text-align: left;
width: 400px;
height: 200px;
line-height: 35px;
overflow: hidden;
margin-left: 50%;
margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
position: absolute;
width: 10%;
height: 3%;
text-align: center;
padding-top: 0px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
from {padding-bottom: 90%;}
to {padding-bottom: 0;}
} <div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
<a href="#">Mas informacion</a>
</div></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-02</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-03</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-04</p>
</div>
</div>
<div id="dotsContainer"></div>
</div>javascript css html5
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
add a comment |
0
When you reach the last slide, and turn back to the first slide, there appears a small line on the left side. The image does not fill the entire slide. I think it could be a bug in the JavaScript code, what do you think?
You have a better view of the issue when you have a full screen view, and when you try to resize the screen trying to emulate responsive design.
You can see the following screenshots:
image 1
image 2
var slideIndex,slides,dots,captionText;
function initGallery(){
// 1 para ocultar y mostrar imageHolder con opasity 0
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder"); // slides=4
slides[slideIndex].style.opacity=1;
// 2 para mostrar las letras
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;
// 3 disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
// 4 add dots
dots=;
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
captionText.style.display="block";
}
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},6000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}.galleryContainer{
top: 0px;
position: relative;
width: 100%;
height: 580px;
max-width: 2000px;
margin: auto;
box-sizing: border-box;
background-color: red;
}
.galleryContainer .slideShowContainer{
width: 100%;
max-width: 1600px;
align-content: center;
height: 100%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url(/img/playPause.png);
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
min-width: 1600px;
height: 100%;
background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
position: absolute;
display: block;
width: 220px;
height: 40px;
font-size: 20px;
text-decoration: none;
left: 50%;
top: 350px;
padding-top: 4px;
text-align: center;
border: 2px solid #fff;
border-radius: 15px;
transition: all 0.5s;
color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 3;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
position: absolute;
bottom: 30%;
z-index: 1;
color: white;
font-family: "Nunito";
font-size: 40px;
text-align: left;
width: 400px;
height: 200px;
line-height: 35px;
overflow: hidden;
margin-left: 50%;
margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
position: absolute;
width: 10%;
height: 3%;
text-align: center;
padding-top: 0px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
from {padding-bottom: 90%;}
to {padding-bottom: 0;}
} <div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
<a href="#">Mas informacion</a>
</div></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-02</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-03</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-04</p>
</div>
</div>
<div id="dotsContainer"></div>
</div>javascript css html5
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
I followed your instructions and do not see the small line you are referring to. What browser are you using? Chrome here. Maybe share a screenshot that shows what you mean.
– ram1
Jan 1 at 8:32
Thank you for your answer. Actually it presents the same problem in every browser (Chrome, Firefox, Opera, Brave). Maybe the problem is because I am using Windows 8?... anyways I added a few screenshots.
– Carlos Ojeda
Jan 1 at 22:12
add a comment |
0
0
0
When you reach the last slide, and turn back to the first slide, there appears a small line on the left side. The image does not fill the entire slide. I think it could be a bug in the JavaScript code, what do you think?
You have a better view of the issue when you have a full screen view, and when you try to resize the screen trying to emulate responsive design.
You can see the following screenshots:
image 1
image 2
var slideIndex,slides,dots,captionText;
function initGallery(){
// 1 para ocultar y mostrar imageHolder con opasity 0
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder"); // slides=4
slides[slideIndex].style.opacity=1;
// 2 para mostrar las letras
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;
// 3 disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
// 4 add dots
dots=;
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
captionText.style.display="block";
}
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},6000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}.galleryContainer{
top: 0px;
position: relative;
width: 100%;
height: 580px;
max-width: 2000px;
margin: auto;
box-sizing: border-box;
background-color: red;
}
.galleryContainer .slideShowContainer{
width: 100%;
max-width: 1600px;
align-content: center;
height: 100%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url(/img/playPause.png);
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
min-width: 1600px;
height: 100%;
background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
position: absolute;
display: block;
width: 220px;
height: 40px;
font-size: 20px;
text-decoration: none;
left: 50%;
top: 350px;
padding-top: 4px;
text-align: center;
border: 2px solid #fff;
border-radius: 15px;
transition: all 0.5s;
color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 3;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
position: absolute;
bottom: 30%;
z-index: 1;
color: white;
font-family: "Nunito";
font-size: 40px;
text-align: left;
width: 400px;
height: 200px;
line-height: 35px;
overflow: hidden;
margin-left: 50%;
margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
position: absolute;
width: 10%;
height: 3%;
text-align: center;
padding-top: 0px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
from {padding-bottom: 90%;}
to {padding-bottom: 0;}
} <div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
<a href="#">Mas informacion</a>
</div></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-02</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-03</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-04</p>
</div>
</div>
<div id="dotsContainer"></div>
</div>javascript css html5
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
When you reach the last slide, and turn back to the first slide, there appears a small line on the left side. The image does not fill the entire slide. I think it could be a bug in the JavaScript code, what do you think?
You have a better view of the issue when you have a full screen view, and when you try to resize the screen trying to emulate responsive design.
You can see the following screenshots:
image 1
image 2
var slideIndex,slides,dots,captionText;
function initGallery(){
// 1 para ocultar y mostrar imageHolder con opasity 0
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder"); // slides=4
slides[slideIndex].style.opacity=1;
// 2 para mostrar las letras
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;
// 3 disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
// 4 add dots
dots=;
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
captionText.style.display="block";
}
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},6000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}.galleryContainer{
top: 0px;
position: relative;
width: 100%;
height: 580px;
max-width: 2000px;
margin: auto;
box-sizing: border-box;
background-color: red;
}
.galleryContainer .slideShowContainer{
width: 100%;
max-width: 1600px;
align-content: center;
height: 100%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url(/img/playPause.png);
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
min-width: 1600px;
height: 100%;
background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
position: absolute;
display: block;
width: 220px;
height: 40px;
font-size: 20px;
text-decoration: none;
left: 50%;
top: 350px;
padding-top: 4px;
text-align: center;
border: 2px solid #fff;
border-radius: 15px;
transition: all 0.5s;
color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 3;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
position: absolute;
bottom: 30%;
z-index: 1;
color: white;
font-family: "Nunito";
font-size: 40px;
text-align: left;
width: 400px;
height: 200px;
line-height: 35px;
overflow: hidden;
margin-left: 50%;
margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
position: absolute;
width: 10%;
height: 3%;
text-align: center;
padding-top: 0px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
from {padding-bottom: 90%;}
to {padding-bottom: 0;}
} <div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
<a href="#">Mas informacion</a>
</div></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-02</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-03</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-04</p>
</div>
</div>
<div id="dotsContainer"></div>
</div>var slideIndex,slides,dots,captionText;
function initGallery(){
// 1 para ocultar y mostrar imageHolder con opasity 0
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder"); // slides=4
slides[slideIndex].style.opacity=1;
// 2 para mostrar las letras
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;
// 3 disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
// 4 add dots
dots=;
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
captionText.style.display="block";
}
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},6000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}.galleryContainer{
top: 0px;
position: relative;
width: 100%;
height: 580px;
max-width: 2000px;
margin: auto;
box-sizing: border-box;
background-color: red;
}
.galleryContainer .slideShowContainer{
width: 100%;
max-width: 1600px;
align-content: center;
height: 100%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url(/img/playPause.png);
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
min-width: 1600px;
height: 100%;
background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
position: absolute;
display: block;
width: 220px;
height: 40px;
font-size: 20px;
text-decoration: none;
left: 50%;
top: 350px;
padding-top: 4px;
text-align: center;
border: 2px solid #fff;
border-radius: 15px;
transition: all 0.5s;
color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 3;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
position: absolute;
bottom: 30%;
z-index: 1;
color: white;
font-family: "Nunito";
font-size: 40px;
text-align: left;
width: 400px;
height: 200px;
line-height: 35px;
overflow: hidden;
margin-left: 50%;
margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
position: absolute;
width: 10%;
height: 3%;
text-align: center;
padding-top: 0px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
from {padding-bottom: 90%;}
to {padding-bottom: 0;}
} <div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
<a href="#">Mas informacion</a>
</div></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-02</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-03</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-04</p>
</div>
</div>
<div id="dotsContainer"></div>
</div>var slideIndex,slides,dots,captionText;
function initGallery(){
// 1 para ocultar y mostrar imageHolder con opasity 0
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder"); // slides=4
slides[slideIndex].style.opacity=1;
// 2 para mostrar las letras
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerHTML=slides[slideIndex].querySelector(".captionText").innerHTML;
// 3 disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
// 4 add dots
dots=;
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
// botones de izquierda y derecha
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerHTML=slides[n].querySelector(".captionText").innerHTML;
captionText.style.display="block";
}
document.getElementsByClassName("captionTextHolder")[0].style.animation = "slideTextFromTop 1s";
setTimeout(function () { document.getElementsByClassName("captionTextHolder")[0].style.animation = "";} ,1000);
setTimeout(function() {document.getElementsByClassName('moveLeftCurrentSlide')[0].style.zIndex = 0;}, 500);
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},6000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if(timer==null){
setTimer();
playPauseBtn.style.backgroundPositionY="0px"
}else{
clearInterval(timer);
timer=null;
playPauseBtn.style.backgroundPositionY="-33px"
}
}.galleryContainer{
top: 0px;
position: relative;
width: 100%;
height: 580px;
max-width: 2000px;
margin: auto;
box-sizing: border-box;
background-color: red;
}
.galleryContainer .slideShowContainer{
width: 100%;
max-width: 1600px;
align-content: center;
height: 100%;
overflow: hidden;
background-color: gainsboro;
position: relative;
}
.galleryContainer .slideShowContainer #playPause{
width: 32px;
height: 32px;
position: absolute;
background-image: url(/img/playPause.png);
background-repeat: no-repeat;
z-index: 5;
background-size: cover;
margin: 5px;
cursor: pointer;
top: 90%;
}
.galleryContainer .slideShowContainer #playPause:hover{
opacity: .7;
}
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img{
width: 100%;
min-width: 1600px;
height: 100%;
background-size: cover;
}
.galleryContainer .slideShowContainer .imageHolder .captionText{
display: none;
}
.galleryContainer .slideShowContainer .imageHolder .btnSlider{
position: absolute;
display: block;
width: 220px;
height: 40px;
font-size: 20px;
text-decoration: none;
left: 50%;
top: 350px;
padding-top: 4px;
text-align: center;
border: 2px solid #fff;
border-radius: 15px;
transition: all 0.5s;
color: white;
}
.galleryContainer .slideShowContainer .leftArrow,.galleryContainer .slideShowContainer .rightArrow{
width: 50px;
background: #00000036;
position: absolute;
left: 0;
z-index: 3;
transition: background 0.5s;
height: 72px;
top: 50%;
transform: translateY(-50%);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow{
left: auto;
right: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,.galleryContainer .slideShowContainer .rightArrow:hover{
background: #000000a8;
cursor: pointer;
}
.galleryContainer .arrow{
display: inline-block;
border: 3px solid white;
width: 10px;
height: 10px;
border-left: none;
border-bottom: none;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.galleryContainer .arrow.arrowLeft{
transform: rotateZ(-135deg);
}
.galleryContainer .arrow.arrowRight{
transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionTextHolder{
position: absolute;
bottom: 30%;
z-index: 1;
color: white;
font-family: "Nunito";
font-size: 40px;
text-align: left;
width: 400px;
height: 200px;
line-height: 35px;
overflow: hidden;
margin-left: 50%;
margin-right: auto;
}
.galleryContainer .slideShowContainer>.captionTextHolder>.captionText{
margin: 0;
}
.galleryContainer #dotsContainer{
position: absolute;
width: 10%;
height: 3%;
text-align: center;
padding-top: 0px;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 5%;
}
.galleryContainer #dotsContainer .dots{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
background-color: #bbb;
cursor: pointer;
transition:background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:first-child{
margin-left: 0;
}
.galleryContainer #dotsContainer .dots:hover,.galleryContainer #dotsContainer .dots.active{
background-color: #717171;;
}
.galleryContainer .moveLeftCurrentSlide{
animation-name: moveLeftCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveLeftNextSlide{
animation-name: moveLeftNext;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveLeftCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: -100%;opacity: 1;}
}
@keyframes moveLeftNext {
from {margin-left: 100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.galleryContainer .moveRightCurrentSlide{
animation-name: moveRightCurrent;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
.galleryContainer .moveRightPrevSlide{
animation-name: moveRightPrev;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
}
@keyframes moveRightCurrent {
from {margin-left: 0;opacity: 1;}
to {margin-left: 100%;opacity: 1;}
}
@keyframes moveRightPrev {
from {margin-left: -100%;opacity: 1;}
to {margin-left: 0%;opacity: 1;}
}
.slideTextFromBottom {
animation-name: slideTextFromBottom;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromBottom {
from {opacity: 0;margin-top: 100px}
to {opacity: 1;margin-top: 0px;}
}
.slideTextFromTop {
animation-name: slideTextFromTop;
animation-duration: 0.7s;
animation-timing-function: ease-out;
}
@keyframes slideTextFromTop {
from {padding-bottom: 90%;}
to {padding-bottom: 0;}
} <div class="galleryContainer">
<div class="slideShowContainer">
<div id="playPause" onclick="playPauseSlides()"></div>
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<div class="captionText"><a href="#">Todo lo que necesitas en un solo lugar</a><br><br>
<a href="#">Mas informacion</a>
</div></div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-02</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-03</p>
</div>
<div class="imageHolder">
<img src="https://picsum.photos/g/1600/500/?random">
<p class="captionText">Caption Text-04</p>
</div>
</div>
<div id="dotsContainer"></div>
</div>javascript css html5
javascript css html5
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
edited Jan 6 at 6:33
Carlos Ojeda
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
asked Jan 1 at 8:14
Carlos OjedaCarlos Ojeda
105
105
I followed your instructions and do not see the small line you are referring to. What browser are you using? Chrome here. Maybe share a screenshot that shows what you mean.
– ram1
Jan 1 at 8:32
Thank you for your answer. Actually it presents the same problem in every browser (Chrome, Firefox, Opera, Brave). Maybe the problem is because I am using Windows 8?... anyways I added a few screenshots.
– Carlos Ojeda
Jan 1 at 22:12
add a comment |
I followed your instructions and do not see the small line you are referring to. What browser are you using? Chrome here. Maybe share a screenshot that shows what you mean.
– ram1
Jan 1 at 8:32
Thank you for your answer. Actually it presents the same problem in every browser (Chrome, Firefox, Opera, Brave). Maybe the problem is because I am using Windows 8?... anyways I added a few screenshots.
– Carlos Ojeda
Jan 1 at 22:12
I followed your instructions and do not see the small line you are referring to. What browser are you using? Chrome here. Maybe share a screenshot that shows what you mean.
– ram1
Jan 1 at 8:32
I followed your instructions and do not see the small line you are referring to. What browser are you using? Chrome here. Maybe share a screenshot that shows what you mean.
– ram1
Jan 1 at 8:32
Thank you for your answer. Actually it presents the same problem in every browser (Chrome, Firefox, Opera, Brave). Maybe the problem is because I am using Windows 8?... anyways I added a few screenshots.
– Carlos Ojeda
Jan 1 at 22:12
Thank you for your answer. Actually it presents the same problem in every browser (Chrome, Firefox, Opera, Brave). Maybe the problem is because I am using Windows 8?... anyways I added a few screenshots.
– Carlos Ojeda
Jan 1 at 22:12
add a comment |
1 Answer
1
active
oldest
votes
0
could you put on the this css in your code, I guess there isnt overflow:hidden and you see like this.
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
}
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993991%2fslider-does-not-load-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
could you put on the this css in your code, I guess there isnt overflow:hidden and you see like this.
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
}
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
add a comment |
0
could you put on the this css in your code, I guess there isnt overflow:hidden and you see like this.
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
}
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
add a comment |
0
0
0
could you put on the this css in your code, I guess there isnt overflow:hidden and you see like this.
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
}
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
could you put on the this css in your code, I guess there isnt overflow:hidden and you see like this.
.galleryContainer .slideShowContainer .imageHolder{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
overflow: hidden;
}
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
answered Jan 6 at 7:03
Adem yalçınAdem yalçın
431
431
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
add a comment |
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
Yes, that was the perfect solution! thank you very much!
– Carlos Ojeda
Jan 19 at 7:11
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53993991%2fslider-does-not-load-properly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I followed your instructions and do not see the small line you are referring to. What browser are you using? Chrome here. Maybe share a screenshot that shows what you mean.
– ram1
Jan 1 at 8:32
Thank you for your answer. Actually it presents the same problem in every browser (Chrome, Firefox, Opera, Brave). Maybe the problem is because I am using Windows 8?... anyways I added a few screenshots.
– Carlos Ojeda
Jan 1 at 22:12