Posicionando los botones de flecha izquierda derecha para un carrusel -- javascript campo con jquery campo con css camp codereview Relacionados El problema

Positioning the left-right arrow buttons for a carousel


1
vote

problema

Español

Tengo un carrusel (carrusel OWL) con controles centrados verticalmente. Debido a la estructura, tengo que posicionar absolutamente la flecha anterior y siguiente. Debido a que la página es receptiva, su posición es dinámica. El tamaño de los controles también puede cambiar.

mi carrusel

He escrito una función que se ejecuta en carga y cambio de tamaño. Obtiene la altura de la imagen y la altura de los controles, resta este último de la primera, se divide por dos, y luego usa ese número como el margen de control de los controles.

funciona, pero estoy cuestionando si estoy recibiendo y usando todas las variables correctamente. ¿JavaScript leído en orden? Donde ejecuta la primera línea, entonces la siguiente, luego la siguiente ... Soy fuerte en CSS, pero JS siempre ha sido una muleta.

¿Puedo escribir esto de manera más eficiente?

  function centerCarouselControls() {   var carouselImage = $('.carousel-card > img');   var carouselControls = $('.owl-nav > div');   var carouselHeight = carouselImage.outerHeight();   var controlHeight = carouselControls.outerHeight();   var controlMargin = (carouselHeight - controlHeight) / 2;   carouselControls.css('margin-top', controlMargin); }  $('.carousel-card > img').load(centerCarouselControls); $(window).on('resize', centerCarouselControls + 'px');  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
Original en ingles

I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position is dynamic. The size of the controls may also change.

My carousel.

I've written a function that runs on load and resize. It gets the height of the image and the height of the controls, subtracts the latter from the former, divides by two, and then uses that number as the controls' margin-top.

It works, but I'm questioning if I'm getting and using all the variables correctly. Does JavaScript read in order? Where it runs the first line, then the next, then the next... I'm strong in CSS but JS has always been a crutch.

Can I write this more efficiently?

function centerCarouselControls() {   var carouselImage = $('.carousel-card > img');   var carouselControls = $('.owl-nav > div');   var carouselHeight = carouselImage.outerHeight();   var controlHeight = carouselControls.outerHeight();   var controlMargin = (carouselHeight - controlHeight) / 2;   carouselControls.css('margin-top', controlMargin); }  $('.carousel-card > img').load(centerCarouselControls); $(window).on('resize', centerCarouselControls + 'px');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        

Lista de respuestas

1
 
vote

¿No es posible envolver tanto la 'flecha' como la imagen dentro de un divimiento relativo y luego hacer una posición absoluta y cosas?

jsfiddle para que pueda cambiar la altura para verlo Cambiar sin JavaScript: https://jsfiddle.net//jsfiddle.net/ 3BM2HP5F / 1 /

Código:

  9988776655544339  
  struct oops1 {     void operator()(int);     void operator()(double); };  struct oops2 {     void operator()(int);     void operator()(int) const; };  void oops3(int); void oops3(double);  struct oops4 {     using correct_answer = const std::vector<std::map<int, char>>&;     template<class T, std::enable_if_t<std::is_same_v<T, const std::vector<std::map<int, char>>>, int> = 0>         void operator()(T&) {} }; 0  
 

Is it not possible to wrap both the 'arrow' and the image inside a relative div then do some absolute position and stuff?

jsfiddle so you can change the height to see it change without javascript: https://jsfiddle.net/3bm2hp5f/1/

Code:

html, body {   height: 100%;   width: 100% }
<div id="resizable" style="width: 30%; height: 50%; resize: both; position: relative; display:inline-block; border: 3px solid black">   <div style="position: absolute; top: 50%; transform: translateY(-50%);">     &lt;   </div>   <image style="width: 100%; height: 100%;"></image> </div> <div style="display: inline-block">  something else </div>
 
 
 
 

Relacionados problema

4  Desplazamiento horizontal receptivo en la posición del mouse  ( Responsive horizontal scroll on mouse position ) 
Estoy haciendo un Responsive Scroll Horizontal Ui . La posición de desplazamiento horizontal se calcula de acuerdo con la posición horizontal del mouse: ...

3  Estructuración simple HTML5 / CSS3 / Javascript Math Aplicación web  ( Structuring simple html5 css3 javascript math web app ) 
Soy nuevo en las aplicaciones web y estoy teniendo dificultades para estructurar mis aplicaciones. Puse una aplicación web de matemáticas muy simple que deseo...

6  ¿Cómo optimizar mi página web CSS / HTML?  ( How to optimize my css html webpage ) 
Estoy trabajando en un sitio web (HTML / CSS) para mejorar mis habilidades, pero no estoy seguro de si lo estoy haciendo de la manera correcta, porque tengo m...

8  Div en la lista desordenada - buena práctica?  ( Div in unordered list good practice ) 
Quiero hacer un formulario que se parece a esto: public interface IAds { void ShowVideoAd(); void PreLoadVideoAd(); bool IsAdAvailable(); } 3...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

1  Sitio web construido con HTML y CSS  ( Website built with html and css ) 
Por favor revise esto: 99887766555443312 ...

5  CSS & JS PIECHART  ( Css js piechart ) 
Hice un public class Question { public static void main(String[] args) { //A hypothetical list of tasks to run asynchronously List<Call...

3  Inclinación en la imagen de flores  ( Tilt on hover image ) 
Estoy solicitando una revisión de este código para ver si estoy siguiendo las mejores prácticas comunes o si hay una mejor manera de realizar el objetivo esta...

2  Abriendo una navegación  ( Opening a navigation ) 
El objetivo de esta función es abrir un menú con una clase CSS (la animación se realiza a través de la transición CSS), llame a una superposición en la parte ...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos