I'm running into an issue I can't explain. I have Slick setup to display 3 slides, centerMode to true and draggable. It works great. I set the entire container div of the slick scroller to be display None at mobile view (480px and below or something around there) and then just display the images in block mode, centered, which is fine. However, I want the Slick Scroller to still be visible to users on a tablet. Problem is, when loading the page on a tablet, the Slick Scroll carousel shows only the center-most Div (image) and if it does not fill the full width of the container, it stretches it disproportionately to fill it. It still scrolls, but the appearance is ghastly. I don't understand what's causing this, because re-sizing the window on a desktop does not produce any problem whatsoever.
Here's the site in action. As you can see, it works fine on the browser (resize however you want) but if you load on a tablet, it distorts the images and wants the Div in focus to fill the container width 100%...
http://philippenewman.com/photography/
$(document).on('ready', function () {
$(".variable").slick({
infinite: true,
variableWidth: true,
slidesToShow: 3,
draggable: true,
centerMode: true,
swipeToSlide: true
});
});html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.slider {
width: 90%;
margin: 0 auto;
margin-top: 100px;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
height: 700px;
max-height: 80vh;
}
.slick-prev:before, .slick-next:before {
color: white;
}<!DOCTYPE html>
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/slick/slick.css">
<link rel="stylesheet" type="text/css" href="./css/slick/slick-theme.css">
<!-- External Stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- External Stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Stylesheets-->
<link rel="stylesheet" href="./css/style.css" type="text/css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Stylesheets-->
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<!--BEGIN NAVBAR-->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html">philippe newman <span style="color:#99b3ff">photography</span></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Galleries <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="sanfrancisco.html">San Francisco</a></li>
<li><a href="#">California</a></li>
</ul>
</li>
<li> <a href="process_production.html">process + production</a> </li>
<li> <a href="contact.html">Contact</a> </li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--END NAVBAR-->
<!-- BEGIN MAIN CONTENT HERE-->
<main class="main">
<!-- This section is for large tablet/Desktop views-->
<section class="variable slider hidden-xs">
<div> <img src="./images/photography/san_francisco/caltrain_lights_9_7_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/embarcadero_sunset_10_7_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/golden_gate_bridge_dusk_10_10_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/mission_st_alley_graffiti_san_francisco_8_26_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/metreon_sf_intersection_night_8_13_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/marshal_beach_sunset_second_10_19_2016.jps" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/cathedral_of_st_mary_san_francisco_7_20_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/sf_windmill_night_9_30_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/sutro_baths_sunset_second_shot_6_18_2016.jpg" class="img-responsive"> </div>
<div> <img src="./images/photography/san_francisco/seacliff_sunset_6_21_2016.jpg" class="img-responsive"> </div>
</section>
<!-- This section is for our mobile/tablet view only-->
<section class="mobile-gallery hidden-sm hidden-md hidden-lg">
<div class="container">
<div class="row">
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/caltrain_lights_9_7_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/embarcadero_sunset_10_7_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/golden_gate_bridge_dusk_10_10_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/mission_st_alley_graffiti_san_francisco_8_26_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/metreon_sf_intersection_night_8_13_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/marshal_beach_sunset_second_10_19_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/cathedral_of_st_mary_san_francisco_7_20_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/sf_windmill_night_9_30_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/sutro_baths_sunset_second_shot_6_18_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
<div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/seacliff_sunset_6_21_2016_thumbnail.jpg" class="img-responsive center-block"> </div>
</div>
</div>
</section>
</main>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<!-- JS file for Slick Scroller carousel-->
<script src="./js/slick/slick.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>Figured it out.
Changed the Width to Auto.
Apparently, with the max-height set to 80vh on each Image tag inside the Slider and the width set to 100%, on desktop browsers (at least, firefox) it was rendering just fine, despite that the containing Slider Div actually had no defined width, whereas on Mobile it was rendering this 100% as full Slick container 100%.
Keeping the height CSS as it was and then setting width: auto; sorted it out for both desktop and mobile.