Tengo una section que contiene una imagen y un deslizador elegante. Quiero que la imagen esté en el lado izquierdo y que el carrusel funcione en el lado derecho adyacente, así que cambio la propiedad de visualización de la section para que se flex , pero el carrusel se descompone cuando lo hago. ¿Cómo evito que esto suceda?
Mi segundo problema es que cuando paso el cursor sobre el carrusel, que tiene una reproducción automática infinita, el carrusel se detiene (lo cual es normal), pero espero que comience a reproducirse nuevamente cuando el usuario haya quitado el cursor, eso no Si no sucede, permanece en pausa hasta que no recargo la página.
Este es mi código:
var $element = $('.js-arrow-wrapper'); $('.horizontal').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1000, prevArrow: '<button type="button" class="slick-custom-arrow slick-prev"> < </button>', nextArrow: '<button type="button" class="slick-custom-arrow slick-next"> > </button>', appendArrows: $element }); #slider { background-color: #fefefe; height: 100%; } .effective_results { object-fit: contain; width: 45%; } #slider .horizontal img { width: 350px; height: 350px; margin-right: 100px; } .horizontal { display: flex; flex-direction: row; } <section id="slider"> <img src="images/results.png" class="effective_results"> <div class="horizontal"> <img src="images/imags/1.jpg" class="before_after"> <img src="images/imags/2.jpg" class="before_after"> <img src="images/imags/3.jpg" class="before_after"> <img src="images/imags/4.jpg" class="before_after"> <img src="images/imags/5.jpg" class="before_after"> <img src="images/imags/6.jpg" class="before_after"> <img src="images/imags/8.jpg" class="before_after"> <img src="images/imags/9.jpg" class="before_after"> <img src="images/imags/10.jpg" class="before_after"> <img src="images/imags/11.jpg" class="before_after"> <img src="images/imags/12.jpg" class="before_after"> <img src="images/imags/13.jpg" class="before_after"> <img src="images/imags/14.jpg" class="before_after"> <img src="images/imags/15.jpg" class="before_after"> <img src="images/imags/16.jpg" class="before_after"> </div> </section>