All geek questions in one place

Slick, arrows are centered only on the height of the image, not the width of the image

I use Slick-Slider to create sliders. The position of the arrows is inside picture. But if the legend is too large, the arrows overlap the text (in the center). I would like the arrows to be vertically centered in the picture. How can I build this?

Thanks for the help / ideas!

HTML:

<div class="mgu-basic-slider">
  <div>
    <picture>
      <source srcset="demo-ressoures/16zu9_topf_d.jpg">
      <img src="demo-ressoures/16zu9_topf_d.jpg" alt="xxx">
    </picture>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe.</p>
      </div>
      <div class="slick-counter">1/6</div>
      <div class="clear"></div>
    </div>
  </div>
<div>
<picture>
  <source srcset="demo-ressoures/16zu9_topf_d.jpg">
  <img src="demo-ressoures/16zu9_topf_d.jpg" alt="xxx">
</picture>
<div class="mgu-basic-slider-caption">
  <div class="slick-legend">
    <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
  </div>
  <div class="slick-counter">2/6</div>
  <div class="clear"></div>
</div>

JS:

$(".mgu-basic-slider").slick({
  dots:false,
  adaptiveHeight: true,
  arrows : true,
  appendArrows: $('picture')
})

Question screenshot

+4
source share
3 answers

I propose my solution here using 2 sliders instead of 1. See this demo:

$(".mgu-basic-slider-legend").slick({
  dots: false,
  arrows: false,
  adaptiveHeight: true,
  asNavFor: '.mgu-basic-slider'
});
$(".mgu-basic-slider").slick({
  dots: false,
  adaptiveHeight: true,
  arrows: true,
  asNavFor: '.mgu-basic-slider-legend'
});
img {
  width: 100%;
}

.mgu-basic-slider .slick-next{
  right: 0;
  z-index: 1;
}

.mgu-basic-slider .slick-prev{
  left: 0;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

<div class="mgu-basic-slider">
  <div>
    <picture>
      <source srcset="http://placehold.it/400x100">
        <img src="http://placehold.it/400x100">
    </picture>
  </div>
  <div>
    <picture>
      <source srcset="http://placehold.it/400x150">
        <img src="http://placehold.it/400x150">
    </picture>
  </div>
  <div>
    <picture>
      <source srcset="http://placehold.it/400x250">
        <img src="http://placehold.it/400x250">
    </picture>
  </div>
</div>

<div class="mgu-basic-slider-legend">
  <div>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
          Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe.</p>
      </div>
      <div class="slick-counter">1/6</div>
      <div class="clear"></div>
    </div>
  </div>
  <div>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
      </div>
      <div class="slick-counter">2/6</div>
      <div class="clear"></div>
    </div>
  </div>
  <div>
    <div class="mgu-basic-slider-caption">
      <div class="slick-legend">
        <p>Pfanne mit Deckel, Dampfeinsatz, Gargut, Gewürze</p>
      </div>
      <div class="slick-counter">2/6</div>
      <div class="clear"></div>
    </div>
  </div>
</div>
Run code

CSS , 1 2 , Slick asNavFor. , Slick as-is, - "".

+5

CSS, slick-theme.css, CSS:

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%; /* update the value from here as per your requirement */
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
0

top css .slick-next slick-prev btns , , . , :

HTML:

 <div class="mgu-basic-slider">
    <div>
        <div class="img-wrapper">
            <img src="images/complianceMod.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum, blanditiis totam similique natus, amet. Reprehenderit dolores vero, repudiandae blanditiis, assumenda dignissimos consectetur a voluptate libero consequatur enim. Commodi, enim.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum earum, blanditiis totam similique natus, amet. Reprehenderit dolores vero, repudiandae blanditiis, assumenda dignissimos consectetur a voluptate libero consequatur enim. Commodi, enim.
            </p>
        </div>
    </div>
    <div>
        <div class="img-wrapper">
            <img src="images/example-608web_w608.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
        </div>
    </div>
    <div>
        <div class="img-wrapper">
            <img src="images/examples-of-pestle-analysis.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt distinctio, earum enim suscipit veniam? Ab eaque molestiae, repellendus </p>
        </div>
    </div>
    <div>
        <div class="img-wrapper">
            <img src="images/Optimal-solution_conceptual.jpg" alt="">
        </div>
        <div class="text-wrapper">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, corporis! Consectetur eum porro quasi cumque deserunt modi, sint voluptatibus reiciendis nisi voluptatem minus id quibusdam voluptate officiis blanditiis nam consequatur.</p>
        </div>
    </div>
</div>

CSS:

.mgu-basic-slider {
    width: 400px;
    margin: 0 auto;

    .slick-slide {
        .img-wrapper {
            height: 300px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .slick-next, .slick-prev{
        top: 150px;
        z-index: 9999;
        &:before {
            color: #cecece;
            font-size: 30px;
        }
    }

    .slick-next {
        right: 25px;
    }

    .slick-prev {
        left: 25px;
    }
}

JS:

$(".mgu-basic-slider").slick({
        dots:false,
        adaptiveHeight: true,
        arrows : true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });

If this is not your case and you do not want to have the same height for all images, you can calculate this property topdynamically using slick events and some jquery code, for example:

JS:

$('.mgu-basic-slider').on('afterChange', function(event, slick, direction){
          var imgHeight = $('.mgu-basic-slider .slick-current .img-wrapper').height();
          console.log('imgHeight', imgHeight);
          var top = imgHeight / 2;

          console.log('top', top);
          $('.mgu-basic-slider .slick-next').css('top', top+'px');
          $('.mgu-basic-slider .slick-prev').css('top', top+'px');
        });


          var imgHeight = $('.mgu-basic-slider .slick-current .img-wrapper').height();
          console.log('imgHeight', imgHeight);
          var top = imgHeight / 2;

          console.log('top', top);
          $('.mgu-basic-slider .slick-next').css('top', top+'px');
          $('.mgu-basic-slider .slick-prev').css('top', top+'px');

I hope this idea can help you.

0
source

Source: https://habr.com/ru/post/1668224/

More articles:


All Articles