La problemática es la siguiente: tengo un Slider con 4 tarjetas el JavaScript se encarga de poner una en block y las otras en none si es que no hay evento en las dots o las arrow; ahora lo que quiero conseguir es que a cierta resolución esas tarjetas se hagan block para poder alinearlas las 4. El problema es que consigo hacer bien ambas cosas, el slider a resolución menor de 992 se adapta bien, y si hago maniobras consigo a 992 que se hagan block y queden acomodadas perfectamente como requiero, el detalle es que cuando consigo que las 4 estén acomodadas en resoluciones bajas mi slider se desfasa.
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("target1");//toma cada div de la foto
let dots = document.getElementsByClassName("dot");// toma cada 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";
}
function showElements(){
const $body = document.getElementsByTagName('body')[0].clientWidth;
console.log($body)
let $target1 = document.getElementsByClassName('target1')
for(let i = 0; i < $target1.length; i++){
if($body == '992'){
$target1[i].style.display='inline-block';
}
}
}
showElements()
.container-slider{
border: 1px solid #bebebe;
width: 100%;
height: 700px;
background:url("../IMG/fondoslider.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: white;
transform: translateY(-30px);
overflow: hidden;
margin-top: 40px;
}
.container-slider .slider{
background: #000;
}
.container-slider .target1{
background: white;
color: black;
text-align: center;
height: 400px;
font-family: var(--fuente);
border: 1px solid #bebebe;
width: 79%;
padding: var(--padding);
margin:70px auto 0px auto;
}
.testimonials{
text-align: center;
padding-top: 30px;
font-family: var(--fuente);
}
.container-slider a{
text-decoration: none;
color: rgb(255, 255, 255);
}
.target-show{
display: none;
}
.container-slider .circle{
width: 70px;
height: 70px;
line-height: 60px;
border-radius: 50%;
border: 4px solid white;
margin: -45px auto;
background-color: #2f0ef1;
color: white;
font-size: 30px;
font-family: var(--fuente);
}
.container-slider .information{
transform: translateY(50%)
}
.information .autor .span-autor{text-align: center; color: black;}
.prev, .next {
cursor: pointer;
position: absolute;
top: 340px;
width: 10px;
height: 10px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 50%;
user-select: none;
}
.next {
right: 11px;
border-radius:50%;
}
.container-slider_dot{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 100px;
}
.container-slider_dot .dot {
cursor: pointer;
height: 20px;
width: 20px;
margin: 20px 3px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
<div class="container-slider">
<div class="testimonials">
<h1>Success stories</h1>
<span><a href="">See More</a> </span>
</div>
<div class="slider">
<div class="target1 ">
<div class="circle">G</div>
<div class="information">
<p>A+ Experience.
Very easy process from buying the domain to set it up...
I highly recommend huge domains.”</p>
<span class="autor">g b web services,
<a class="span-autor" href="">DefiArt.com</a>
</span>
</div>
</div>
<div class="target1 ">
<div class="circle">T</div>
<div class="information">
<p>
“Easy, breezy done! Very happy for the opportunity to obtain the domain.”</p>
<span class="autor">Toni Moore,
<a class="span-autor" href="">BawseLady.com</a>
</span>
</div>
</div>
<div class="target1 ">
<div class="circle">B</div>
<div class="information">
<p>
“Easy, breezy done! Very happy for the opportunity to obtain the domain.”</p>
<span class="autor">Brett Thomas,<br>
<a class="span-autor" href="">RapidLeaderShip.com</a>
</span>
</div>
</div>
<div class="target1 ">
<div class="circle">S</div>
<div class="information">
<p>“I have purchased more than a dozen premium domains from Huge Domains using their "payment plan" options.</p>
<span class="autor">Sergey Voronov,<br>
<a class="span-autor" href="">GornItsa.com</a>
</span>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div class="container-slider_dot" 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>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
</div>
Esa imágen muestra como es que se desfasa cuando a 992 coloco los div en inlineBlock
display: inline-block;
a todos los elementos, pero deberías hacerlo solo con el que está activo. Además, es mejor crear reglas en CSS que cambiar propiedades en Javascript. Igual para mostrar y ocultar, puedes hacerlo mediante clases de CSS.display: block
y ya no funcionará lo que hiciste al cargar la página; por eso es que sugiero hacerlo solo con clases CSS y en Javascript solo las actualices.