after the 1 slide sliding to 2 and 3 slides there is a white space on the left

Resolved

(@johannes999)

I have solved all the problems with slider show but problems seems like me

this is js code;

<script>
var current = 0;
var slides = document.getElementsByClassName("slider");
var dots = document.getElementsByClassName("slider-dot");

setInterval(function() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    dots[i].classList.remove("active");
  }
  current = (current + 1) % slides.length;
  slides[current].style.display = "block";
  dots[current].classList.add("active");
}, 3000);

 
    </script>

this is HTML code

<div id="slider-show">
  <div class="slider-container">
    <div class="slider slide1">
      <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg" alt="Slide 1" style="width:100%"> >
		
		<div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW Specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>
		</div>
		<div id="title-info">		
	<div class="menu-title"> 	Menu</div>	
<div class="title">	X Auto Service</div>
	
<div class="title-description"> auto repair service</div>
	</div> 
		</div>
 <div class="slider slide2">
      <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-1.jpg" alt="Slide 2" style="width:100%">>
      <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
	</div> 
		
    </div>
    <div class="slider slide3">
      <img src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg" alt="Slide 3" style="width:100%">>
		
		<div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW Specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
        <div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>            		</div> 
    </div>
    </div>
	</div>
  <div class="slider-dots-container">
    <div class="slider-dot dot1"></div>
    <div class="slider-dot dot2"></div>
    <div class="slider-dot dot3"></div>
  </div>

this is css code:

#slider-show {
  width: 100%;
max-width:1920px;
  height: 750px;
  overflow: hidden;
	object-fit:cover;
}

.slider-container {
  width: 300%;
	object-fit:cover;
  display: flex;
  transition: all 1s ease-in-out;
}

.slider {
  width:33.333%;
  height: 100%;
  text-align:center;
	object-fit:cover;
}	

img {
  width: 100%;
  height: auto;
}

this is css continuation:

.slider-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.slider-dot.active {
  background-color: #000;
}

.slider-dot.active:after {
    content: "";
       transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;
    font-size: 12px;
    line-height: 12px;
    position:absolute;
    left:5px
}

I have checked everything included inspect and object-fit as you see but id didn’t help to solve the problem.

the problem is after first slide the second and third slide has on left side small white opening when sliding .

not the first slide only the second and the third.

if you go to my url home page you can see after first sliding the second and third slide does not covering 100 %.

what it can be the problem .

some wrong code in css or html ?

I don’t think myself it is js code bug is!

thanks

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Moderator

t-p

(@t-p)

1 year, 3 months ago

Are you using a plugin for this slide show? If yes, I recommend asking at that plugin’s dedicated support so its developers and support community can help you with this.

If this is a feature of your current theme, then I recommend asking at that theme’s dedicated support so its developers and support community can help you with this.

Thread Starter

johannes999

(@johannes999)

1 year, 3 months ago

thanks ,

I have coded myself it is not plug in or it is not future of some theme.

I use underscores_me . the free theme

I code everything myself from scratch.

Thread Starter

johannes999

(@johannes999)

1 year, 3 months ago

I have changed the code and saw there is problem with my theme so I made backup and now I try to reinstall everything from scratch.

I am deleting also wordpress and database and I want to make clean installation with new theme on my provider server.

I wil let it know when I solve the problem. I think I can solve this problem.

thanks for advice

johannes

Thread Starter

johannes999

(@johannes999)

1 year, 3 months ago

thanks every one ,

with your advice I corrected everything

I cleaned database and removed WordPress and installed again

I downloaded backup with filezilla but I forgot to copy the content of pages in wordpress . I had to upload backup with WordPress and go to database and in search just typed pages and I saw all of them inclusief extra CSS in customizer . so I learned from my faults something new and I wanted to shaer here.

I made new slidershow and I want to share with everyone interested to get some idea.

first I have found this code in codepen trough searching in Google (HTML,CSS and javascript and studied very good .

this is HTML code with some common texts in slider show in the same place and in the same line:

HTML code:

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">	
	<?php wp_head(); ?>
</head>

	<div class="slideshow-container">
      <div class="mySlides fade">
       
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1920-1080.jpg" alt="Slide 1"  style="width: 100%"    height="750px"    />
        	<div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW Specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>
		</div>
		<div id="title-info">		
	<div class="menu-title"> 	Menu</div>	
<div class="title">	X Auto Service</div>
	
<div class="title-description"> auto repair service</div>
	</div>
		     <br />
		 <div id="tekens">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
      
		  
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1924-1080.jpg" alt="Slide 2"  style="width: 100%"   height="750px"    />
		   <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
	</div> 
		  <br />
		 <div id="tekens">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
     
    </div>
      
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper2-11920-1080.jpg" alt="Slide 3"  style="width: 100%"  height="750px"  />
		   <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
	</div> 
		  
		   <br />
		 <div id="tekens">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    
    </div>
      
     
		 
       
      </div>
    </div>

THIS IS CSS CODE:

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
 
    
     .mySlides {
        display: none;
      }

      img {
        vertical-align: middle;
      }

      /* Slideshow container */
      .slideshow-container {
        max-width: 100%;
        position: relative;
        margin: auto;
      }

     #tekens {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:-3.5%;
	margin-left:-4%;
	text-align:center;
	
}
	

      /* The dots/bullets/indicators */
      .dot {
        height: 15px;
        width: 15px;       
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition:background 0.6s ease;
		margin:0 4px;
		 
      }
.active {
  background-color: red;
	
} 

 
.dot.active:after {
    content: "";
       transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;
    font-size: 12px;
    line-height: 12px;
    position:absolute;
    left:5px
		
}



      /* Fading animation */
      .fade {
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
      }

      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
        .text {
          font-size: 11px;
        }
      }


	


	


#container-info {
	
	width:100%;
	max-width:1920px;
	display:flex;
	flex-direction:row;
	
}

.tekst1{
	font-size:1.2rem;
	color:red;
     width:41.333%;
   	justify-content:flex-start;
	margin-left:4%;
	 margin-top:-47.5%;
	float:left;
	position:relative;
}

.tekst2{
	font-size:1.2rem;
	color:red;
	width:38.333%;
	justify-content:center;
	text-align:center;
	  margin-top:-47.5%;
	position:relative;
	margin-left:-14%;
}

.tekst3{
	font-size:1.2rem;
	color:red;
  	width:20.333%;
	justify-content:flex-end;   	
 margin-top:-47.5%;
	 float:right;
	position:relative;
	margin-left:16.25%;
}

#title-info {
	display:flex;
	flex-direction:row;
	width:100%;
	max-width:1920px;
}


.menu-title{
	
	font-size:1.5rem;
	color:red;
     width:33.333%;
   	justify-content:flex-start;
	margin-left:4%; 
	 margin-top:-38%;
	float:left;
	position:relative;	
	
}
.title {	 
	 width:16.3333%;
	font-size:1.8rem; 
		 color:red;
	font-family: 'Ravi Prakash', cursive;
     margin-top:-41%;
	position:relative;
	float:left;
      margin-left:-24%;
	}


.title-description {
	
float:left;
	width:22.33333;
margin-top:-42.75%;
font-size:1.5rem;	
color:red;
margin-left:-9.5%;
position:relative;

}

and this is Javascript code :

<script>


    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, 3000); // 3000 = Change image every 3 seconds
      }


</script>

enjoy it

I been bussy few days to get it right as I want

I have 5 licence of smartslider pro plug in but I wanted to do it myself.

whitout too much expertise of javascript.

you can go to my url and see. I am still learning and building slowly in my free times.

there is only small problem when the sliders are fading the dots are not moving 1 by 1 with colr red .

if some one can tells me what I am doing wrong or how I can solve it ? I wil be happy . I think it is in CSS code!https://webdesignleren.com/

Thread Starter

johannes999

(@johannes999)

1 year, 3 months ago

I have lost the problem with dots also with this html code:

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="https://gmpg.org/xfn/11">
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">	
	<?php wp_head(); ?>
</head>

	<div class="slideshow-container">
      <div class="mySlides fade">
       
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1920-1080.jpg" alt="Slide 1"  style="width: 100%"    height="750px"    />
        	<div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW Specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>
		</div>
		<div id="title-info">		
	<div class="menu-title"> 	Menu</div>	
<div class="title">	X Auto Service</div>
	
<div class="title-description"> auto repair service</div>
	</div> 
      
		  
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1924-1080.jpg" alt="Slide 2"  style="width: 100%"   height="750px"    />
		   <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
	</div> 	
		  
		  	
    
 

      
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper2-11920-1080.jpg" alt="Slide 3"  style="width: 100%"  height="750px"  />
		   <div id="container-info">
      <div class="tekst1">Vooraf prijs opgave</div>
		<div class="tekst2">BMW specialist</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>	
		</div>
	<div id="title-info">		
	<div class="menu-title">Menu</div>	
<div class="title">	X Auto Service</div>	
<div class="title-description"> auto repair service</div>
	</div> 

    
 
 
		      
      </div>
    </div>  
		
<div class=" figure" style:"text-align: center">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>

and CSS :

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}
 
    
     .mySlides {
        display: none;
      }

      img {
        vertical-align: middle;
      }

      /* Slideshow container */
      .slideshow-container {
        max-width: 100%;
        position: relative;
        margin: auto;
      }

    .figure {
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:-3.5%;
	margin-left:-4%;
	
	
}
	

      /* The dots/bullets/indicators */
      .dot {
        height: 15px;
        width: 15px;       
        background-color: green;
        border-radius: 50%;
        display: inline-block;
        transition:background 0.6s ease;
		margin:0 4px;
		 
      }
 .active {
  background-color: red;
	
} 

 
.dot.active:after {
    content: "";
       transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;
    font-size: 12px;
    line-height: 12px;
    position:absolute;
    left:5px
		
}



      /* Fading animation */
      .fade {
        animation-name: fade;
        animation-duration: 1.5s;
      }

      @keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
      }

      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
        .text {
          font-size: 11px;
        }
      }

I forgot to tell I am not started yet with media queries . it can be in your screen some deviation.

now I have lost this problem with slider show as I want .

it is just the beginning/

thanks every one who helped me

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘after the 1 slide sliding to 2 and 3 slides there is a white space on the left’ is closed to new replies.

after the 1 slide sliding to 2 and 3 slides there is a white space on the left

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics