Estoy intentando mover los botones de navegación en un carrusel de imágenes que se encuentra dentro de una plantilla de sitio web que estoy usando. Este es el primer sitio que he hecho, así que espero alguna ayuda para averiguar por qué las cosas no cambian. Idealmente, estarían en el centro de la página directamente arriba o directamente debajo de las fotos. Puntos de bonificación si pudieran superponerse en los bordes centrales de las imágenes, pero eso es ser exigente y solo quiero algo más intuitivo para trabajar.
¿Alguien tiene alguna idea? Incluyo imágenes de cómo se muestran actualmente las flechas para que pueda ver lo que quiero decir con que son contrarias a la intuición y están colocadas de manera extraña.
@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss"; .image-gallery-left-nav, .image-gallery-right-nav { cursor: pointer; z-index: 100; opacity: 0.5; bottom: 100%; padding: 0; align-items: center; top: auto; color: #fff; font-size: 5em; outline: none; background-color: transparent; border: 0; transform: translateY(-0%); &:before, &:hover:before { color: #3c4858; text-shadow: none; } &:before { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 45px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } } .image-gallery-left-nav { left: -20px; &::before { content: "chevron_left"; } } .image-gallery-right-nav { right: -20px; bottom: 100px; &::before { content: "chevron_right"; } } .image-gallery-thumbnail { margin: 0px; padding: 0px; cursor: pointer; position: relative; line-height: 0px; width: 125px; border: none !important; & + .image-gallery-thumbnail { margin: 0 !important; } img { max-width: 100%; cursor: pointer; position: relative; margin-top: 10px; margin-bottom: 10px; } } .image-gallery-thumbnail-label { display: none !important; } .image-gallery-thumbnails { padding: 0 !important; overflow: hidden; width: 100%; } .image-gallery-thumbnails-container { position: relative; // width: 99999px; margin: 0px; padding: 0px; list-style-type: none; text-align: center; }