I have a section containing an image and a slick slider. I want the image to be on the left hand side and the carousel to work on it's adjacent right hand side, so I change the display property of the section to flex but the carousel breaks down when I do that. How do I stop this from happening.
My second issue is, that when I hover over the carousel, which has an infinite auto play, the carousel pauses(which is normal), but I expect it to start playing again when the user has removed the cursor from it, that doesn't happen, it remains paused till I don't reload the page.
This is my code:
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>