0

Estoy haciendo un slider con solo css y html a traves del siguiente metodo ...

.city_slider_imgs
{
    background-color : #0f0;
    height : auto;
    height : 50em;
    margin : 50px;
}
:root
{
    scroll-behavior: smooth;
}

a
{
    text-decoration: none !important;
}

.img_container> img
{
    width : 50em;
    height : 50em;
    position : absolute;
    object-fit : contain;
    opacity: 0;
    left : 0%;
    transition-property: opacity;
    transition-duration : .3s;
}


.img_container > img:target
{
    opacity: 1;
}
.ref_input
{
    display: none;
}
.slider_controler
{
    background-color : rgb(44, 173, 44);
    display : inline-flex;
    border-radius: 10px;
    position : sticky;
    top: 10%;
    left: 20%;
    margin : 10px;
    z-index : 99;
    justify-content :center;
    padding : 10px;
}

.slider_controler > *
{
    padding : 10px;
    background-color : rgb(29, 206, 29);
    margin : 10px;
    border-radius : 10px;
    transition-property: transform;
    transition-duration : .3s;
    transform: scale(1, 1);
    color : #fff;
}



.slider_controler > *:hover
{
    transform: scale(1.5, 1.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <section class="imgs_section" id ="imgs_section">
        <h2 class = "section_title"> Images de la universidad, region y egresados notables </h2>
        <div class="city_slider_imgs" id = "city_slider_imgs_id">
            <div class = "slider_controler">
                <a href = "#img1"> 1 </a>
                <a href = "#img2"> 2 </a>
                <a href = "#img3"> 3 </a>
            </div>
            <div class="img_container">
                <img id = "img1" src = "<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
    <section class="imgs_section" id ="imgs_section">
        <h2 class = "section_title"> Images de la universidad, region y egresados notables </h2>
        <div class="city_slider_imgs" id = "city_slider_imgs_id">
            <div class = "slider_controler">
                <a href = "#img1"> 1 </a>
                <a href = "#img2"> 2 </a>
                <a href = "#img3"> 3 </a>
            </div>
            <div class="img_container">
                <img id = "img1" src = "lorempixel.com/400/200" alt = "no se ha encontrado la imagen" title = "ciudad_1">
                <img id = "img2" src = "lorempixel.com/400/200" alt = "no se ha encontrado la imagen" title = "ciudad_1">
                <img id = "img3" src = "lorempixel.com/400/200" alt = "no se ha encontrado la imagen" title = "ciudad_1">
            </div>
        </div>
    </section>
</body>
</html>
" alt = "no se ha encontrado la imagen" title = "ciudad_1">
                <img id = "img2" src = "../../material/1542113135_776401_1542116070_noticia_normal.jpg" alt = "no se ha encontrado la imagen" title = "ciudad_1">
                <img id = "img3" src = "../../material/imagen_de_universidad.jpg" alt = "no se ha encontrado la imagen" title = "ciudad_1">
            </div>
        </div>
    </section>
</body>
</html>

El ejemplo quedo algo raro, el caso esta en que necesito alguna pseudo-clase que referencie a los elementos a cuando la terminacion de la url sea la del elemento al que estos referencian, de modo que cuando se este viendo una imagen ( es decir, que la terminacion de la url sea la misma que el id de la imagen ), el boton que la referencie adquiera un estilo diferente para diferenciar . Alguna idea?

1
  • El ejemplo quedo tan raro que no es ni mínimo ni verificable; no se ve ni la funcionalidad ni el problema. Y la redacción tampoco ayuda.
    – Sal
    el 15 ago. 2021 a las 14:49

1 respuesta 1

1

Si quieres cambiar el estilo cuando cambie el fragmento de la url (#fragmento) puedes usar el evento onhashchange para agregar/quitar un clase en particular.

window.onhashchange = function(){
  let e = document.querySelector('a.mostrando')
  if(e) 
    e.classList.remove('mostrando')
  e = document.querySelector('a[href="'+window.location.hash+'"]')
  e.classList.add('mostrando');
}
.slider_controler > a.mostrando{
  background-color : black;
}

.city_slider_imgs{
    background-color : #0f0;
    height : auto;
    height : 50em;
    margin : 50px;
}
:root{
    scroll-behavior: smooth;
}

a{
    text-decoration: none !important;
}

.img_container> img{
    width : 50em;
    height : 50em;
    position : absolute;
    object-fit : contain;
    opacity: 0;
    left : 0%;
    transition-property: opacity;
    transition-duration : .3s;
}

.img_container > img:target{
    opacity: 1;
}
.ref_input{
    display: none;
}
.slider_controler{
    background-color : rgb(44, 173, 44);
    display : inline-flex;
    border-radius: 10px;
    position : sticky;
    top: 10%;
    left: 20%;
    margin : 10px;
    z-index : 99;
    justify-content :center;
    padding : 10px;
}

.slider_controler > *{
    padding : 10px;
    background-color : rgb(29, 206, 29);
    margin : 10px;
    border-radius : 10px;
    transition-property: transform;
    transition-duration : .3s;
    transform: scale(1, 1);
    color : #fff;
}

.slider_controler > *:hover{
    transform: scale(1.5, 1.5);
}
    <section class="imgs_section" id ="imgs_section">
        <div class="city_slider_imgs" id = "city_slider_imgs_id">
            <div class = "slider_controler">
                <a href = "#img1"> 1 </a>
                <a href = "#img2"> 2 </a>
                <a href = "#img3"> 3 </a>
            </div>
            <div class="img_container">
                <img id = "img1" src = "https://cdn.pixabay.com/photo/2020/12/03/05/24/lion-5799526_960_720.jpg">
                <img id = "img2" src = "https://cdn.pixabay.com/photo/2020/01/04/23/27/mountain-4741994_960_720.jpg">
                <img id = "img3" src = "https://cdn.pixabay.com/photo/2021/07/29/20/47/church-6508068_960_720.jpg">
            </div>
        </div>
    </section>

Sin embargo, parece más conveniente manejarlo desde el mismo controlador javascript del slider.

1
  • la idea era no usar nada de JS, ya que, basicamente no se nada :|, sin embargo voy a aprender js para hacer este slider, gracias igualmente
    – PySanti
    el 16 ago. 2021 a las 10:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.