V
V
Valery Zakharov2017-02-26 20:33:04
JavaScript
Valery Zakharov, 2017-02-26 20:33:04

How to make vertical slider with fixed height and center alignment in Slick slider?

There is a code:

<div class="modal-slider" id="modal-42">
    <div class="owl-over-item">
      <div class="owl-over-item-1">
        <div class="mod-slide" >
          <div class="mod-slide-img">
            <img data-src="/upload/iblock/d12/d122cca2ee524a700776291fcc20db53.JPG">
          </div>
        </div>
      </div>
    </div>
    <div class="owl-over-item">
        <div class="owl-over-item-1">
          <div class="mod-slide" >
            <div class="mod-slide-img">
              
              <img data-src="/upload/iblock/8fb/8fb6fd9276ef323d34b235185994074d.JPG">
            </div>
          </div>
        </div>
      </div><div class="owl-over-item">
        <div class="owl-over-item-1">
          <div class="mod-slide" >
            <div class="mod-slide-img">
              
              <img data-src="/upload/iblock/b31/b3133a778db3671bec199d9d158837fa.JPG">
            </div>
          </div>
        </div>
      </div><div class="owl-over-item">
        <div class="owl-over-item-1">
          <div class="mod-slide" >
            <div class="mod-slide-img">
              
              <img data-src="/upload/iblock/06c/06cb45c5507c9176fc85df4c1ccd0f13.JPG">
            </div>
          </div>
        </div>
      </div><div class="owl-over-item">
        <div class="owl-over-item-1">
          <div class="mod-slide" >
            <div class="mod-slide-img">
              
              <img data-src="/upload/iblock/6cd/6cd781009317b8f7ac55dd5cb1b82d30.JPG">
            </div>
          </div>
        </div>
      </div><div class="owl-over-item">
        <div class="owl-over-item-1">
          <div class="mod-slide" >
            <div class="mod-slide-img">
              
              <img data-src="/upload/iblock/49e/49e775e9c1895a711f6e247f43668371.JPG">
            </div>
          </div>
        </div>
      </div>
    </div>


There is a function:

var orientation_vertical = (
        $(window).width() > $(window).height()
            ?false:true
    );
  carusel.slick({
                   
                           centerMode:true,
                            arrows: false,
                            infinite:false,
                            slidesToShow: 1,
                
                            adaptiveHeight:true,
                            variableWidth: (orientation_vertical?false:true),
                            verticalSwiping:(orientation_vertical?true:false),
                            vertical:orientation_vertical
                        });


The orientation of the slider adjusts depending on the screen orientation.

In a horizontal slider everything works correctly:
Slider in full width and height of the screen
Each slide in the center of the screen

In a vertical slider everything flies
The height of the slider depends on the slides
Slides are not in the center of the screen

How to arrange a vertical slider?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question