Spencer O'Reilly
Reputation: 545
Center Multiple Slick Slides without animation cut off
So for a visual of what I'm trying to explain I have a Codepen example or the same example code included below. But in essence I was wondering if there was a setting in Slick.js that I was over looking or an elegant jQuery hack that would allow me to accomplish the following:
Margins on either side of the visible(aka active) slides
Responsively determine how many slides are visible according to screen size
The following snippet is quite complete to give a full picture of what I am aiming for and the environment in which the code is in. I have looked extensively but apparently having sliders that just cut off your content like some odd magic box doesn't bother many people that I could find.
In short I am looking for a clean way to have a slider look like Example 1 while static, but during transition it proceeds to slide all the way off the page not just hidden by a tiny little parent element.
I'm currently working on a hack to fix Example 2 to do just this however it requires what I believe to be messy practice.
$("#slickA").slick({
slidesToShow: 1
});
$("#slick1").slick({
slidesToShow: 2
});
$("#slick2").slick({
slidesToShow: 2
});.slick-prev,
.slick-next,
.slick-prev:before,
.slick-next:before,
.slick-prev:hover,
.slick-next:hover,
.slick-prev:hover:before,
.slick-next:hover:before {
color: inherit;
z-index: 10;
}
.stripe > ul .slick-prev {
left: 20px;
}
.stripe > ul .slick-next {
right: 20px;
}
.stripe > .container > p,
.stripe > .container > ul {
text-align: left;
padding: 35px;
margin: 0;
}
.stripe > .container > hr {
margin: 50px 0;
}
ul.slider {
padding: 0;
margin: 0;
}
.slider li {
list-style: none;
}
.image {
background: black;
position: relative;
width: 100%;
padding: 0 0 100% 0;
}
#nav-spacer {
display: block;
height: 50px;
}
.stripe {
width: 100%;
text-align: center;
overflow: hidden;
}
.default {
color: White;
background: DarkCyan;
}
.inverse {
color: DarkCyan;
background: White;
}
.grey {
color: White;
background: DimGrey;
}
.grey-light {
color: DimGrey;
background: White;
}
.color {
color: DarkOrange;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" integrity="sha384-ZULtytbCZdmL8PeKalcAKnseGOqrCiPBi3DiB7s4JJmS8gjSbfw0w8SPKpt9WemG" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="nav-spacer"></div>
<div class="stripe default">
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.
<br>All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
</div>
<div class="stripe grey-light">
<div class="container">
<hr />
</div>
</div>
<div class="stripe inverse">
<div class="container">
<h2>Slick Example Precursor</h2>
</div>
<ul id="slickA" class="slider">
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
<li>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</div>
</li>
</ul>
<div class="container">
<p>
This is what I would like to see with 2 slides visible at a time with large screens maybe even 3 but on mobile only display 1 slide at a time while maintaining margins.
</p>
</div>
</div>
<div class="stripe default">
<div class="container">
<h2>Slick Example 1</h2>
<ul id="slick1" class="slider">
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
</ul>
<p>
Sure this works but it is hardly visually acceptable as it cuts off the slide the second it hits the edge of the container. But on the upside it only shows 2 slides and has nice margins.
</p>
</div>
</div>
<div class="stripe inverse">
<div class="container">
<h2>Slick Example 2</h2>
</div>
<ul id="slick2" class="slider">
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</li>
</ul>
<div class="container">
<p>
This feels closer but I don't want any static content outside the margins.
</p>
</div>
</div>
<div class="stripe grey-light">
<div class="container">
<hr />
</div>
</div>
<div class="stripe grey">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
</p>
</div>
</div>
<div class="stripe default">
<div class="container">
<p>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</p>
</div>
</div>
<div class="stripe grey-light">
<div class="container">
<hr />
</div>
</div>
<div class="stripe grey">
<div class="container">
<p>
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content
in real-time will have multiple touchpoints for offshoring.
</p>
<ul>
<li>
Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely
on the bottom line.
</li>
<li>
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to
derive convergence on cross-platform integration.
</li>
<li>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
</li>
</ul>
</div>
</div>
<div class="stripe inverse">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a>
</p>
</div>
</div>
<hr>
</div>
</div>Upvotes: 2
Views: 1677
Answers (2)
Spencer O'Reilly
Reputation: 545
This is a more css, less javascript possibility, but still it is rather glitchy at times and there has to be a way to optimize the visual performance, but that's a mystery to me. I'll just leave this here in case someone has a way to improve it or if someone finds this is good enough for their needs then they can use it.
I tried to get the code working here in a code snippet, but can't figure out what's going wrong with it... Anyways, it kind of works on Codepen at least.
Key CSS in the implementation:
.slick-slide
{
display: flex;
justify-content: center;
align-items: center;
transition: margin 0.8s;
margin: 0;
}
.slick-slide.slick-current
{
margin-left: 21vw;
}
@media (min-width: 1201px) {
.slick-slide
{
width: calc( 60vw / 4 )
}
.slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active + .slick-slide.slick-active
{
margin-right: 21vw;
}
}
@media (max-width: 1200px) {
.slick-slide
{
width: calc( 60vw / 3 )
}
.slick-slide.slick-current + .slick-slide.slick-active + .slick-slide.slick-active
{
margin-right: 21vw;
}
}
@media (max-width: 950px) {
.slick-slide
{
width: calc( 60vw / 2 )
}
.slick-slide.slick-current + .slick-slide.slick-active
{
margin-right: 21vw;
}
}
@media (max-width: 760px) {
.slick-slide
{
width: calc( 60vw )
}
.slick-slide.slick-current
{
margin-right: 21vw;
}
}
Upvotes: 0
Spencer O'Reilly
Reputation: 545
Here is that hack fix I came up with.... It certainly isn't perfect. I'd love any help to optimize or replace it with a better solution.
This is the core javascript that makes it work:
$slides.each(function(index) {
var col_width = Math.floor(12 / number_of_slides_per_view);
var $this = $(this);
if (index + 1 > (total_number_of_slides - slides_to_skip)) {
$this.remove();
} else {
$this.addClass('col-xs-' + col_width);
$row.append($this);
if (index % number_of_slides_per_view == number_of_slides_per_view - 1) {
$container.append($row);
$li.append($container);
$slick_slider.append($li);
$li = $('<li></li>');
$container = $('<div></div>').addClass('container');
$row = $('<div></div>').addClass('row');
}
}
});
$slick_slider.slick({
slidesToShow: 1
});
This does work but there are serious drawbacks to using a method such as this. This provides no acceptable fall back for users who have javascript disabled. If the window gets re-sized for any reason the page needs to be fully refreshed before it is visually acceptable again. Which is easily demonstrated by running the embedded script on this answer and hitting full screen... it should show 4 slides at a time, but because all that is happening is the expansion of the container the code is not re-run nor can it without some way to undo what it did the first time.
var $slick_slider = $("#slickA");
var $li = $('<li></li>');
var $container = $('<div></div>').addClass('container');
var $row = $('<div></div>').addClass('row');
var width = $(window).width();
var $slides = $(".my-slide");
var total_number_of_slides = $slides.length;
var number_of_slides_per_view = 1;
if (width >= 1200) {
number_of_slides_per_view = 4;
}
if (width >= 992 && width < 1200) {
number_of_slides_per_view = 3;
}
if (width >= 768 && width < 992) {
number_of_slides_per_view = 2;
}
if (width >= 0 && width < 768) {
number_of_slides_per_view = 1;
}
var slides_to_skip = total_number_of_slides % number_of_slides_per_view;
$slides.each(function(index) {
var col_width = Math.floor(12 / number_of_slides_per_view);
var $this = $(this);
if (index + 1 > (total_number_of_slides - slides_to_skip)) {
$this.remove();
} else {
$this.addClass('col-xs-' + col_width);
$row.append($this);
if (index % number_of_slides_per_view == number_of_slides_per_view - 1) {
$container.append($row);
$li.append($container);
$slick_slider.append($li);
$li = $('<li></li>');
$container = $('<div></div>').addClass('container');
$row = $('<div></div>').addClass('row');
}
}
});
$slick_slider.slick({
slidesToShow: 1
});.slick-prev,
.slick-next,
.slick-prev:before,
.slick-next:before,
.slick-prev:hover,
.slick-next:hover,
.slick-prev:hover:before,
.slick-next:hover:before
{
color: inherit;
z-index: 10;
}
.stripe > ul .slick-prev
{
left: 20px;
}
.stripe > ul .slick-next
{
right: 20px;
}
.stripe > .container > p,
.stripe > .container > ul
{
text-align: left ;
padding: 35px;
margin: 0;
}
.stripe > .container > hr
{
margin: 50px 0;
}
ul.slider
{
padding: 0;
margin: 0;
}
.slider li
{
list-style: none;
}
.image
{
background: black;
position: relative;
width: 100%;
padding: 0 0 100% 0;
}
#nav-spacer
{
display: block;
height: 50px;
}
.stripe
{
width: 100%;
text-align: center;
overflow: hidden;
}
.default
{
color: White;
background: DarkCyan;
}
.inverse
{
color: DarkCyan;
background: White;
}
.grey
{
color: White;
background: DimGrey;
}
.grey-light
{
color: DimGrey;
background: White;
}
.color
{
color: DarkOrange;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js" integrity="sha384-ZULtytbCZdmL8PeKalcAKnseGOqrCiPBi3DiB7s4JJmS8gjSbfw0w8SPKpt9WemG" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="nav-spacer"></div>
<div class="stripe default">
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
</div>
<div class="stripe grey-light">
<div class="container">
<hr />
</div>
</div>
<div class="stripe inverse">
<div class="container">
<h2>Slick Responsive Hack Example</h2>
</div>
<ul id="slickA" class="slider">
<div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div> <div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
<div class="my-slide">
<div class="col-xs-4">
<div class="image"></div>
</div>
<div class="col-xs-8">Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing
solely on the bottom line.</div>
</div>
</ul>
<div class="container">
<p>
This works but isn't optimal as it takes extra processing on the client side before it is viewable and if the window is resized for some reason then the page will need to be reloaded for it to be visually corrected again.
</p>
</div>
</div>
<div class="stripe grey-light">
<div class="container">
<hr />
</div>
</div>
<div class="stripe grey">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="stripe default">
<div class="container">
<p>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
innovation via workplace diversity and empowerment.
</p>
</div>
</div>
<div class="stripe grey-light">
<div class="container">
<hr />
</div>
</div>
<div class="stripe grey">
<div class="container">
<p>
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content
in real-time will have multiple touchpoints for offshoring.
</p>
<ul>
<li>
Capitalise on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely
on the bottom line.
</li>
<li>
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to
derive convergence on cross-platform integration.
</li>
<li>
Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
</li>
</ul>
</div>
</div>
<div class="stripe inverse">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div>
</div>
<hr>
</div>
</div>Upvotes: 1
Related Questions
- Slick carousel - force slides to have the same height
- Slick vertical content has been cut off below
- Slick Slider - Box Shadows are cut off
- How to duplicate slick slides?
- How to center 2 slides in Slick carousel?
- How can I change the width and height of slides on Slick Carousel?
- SlickSlider slick-center slide animation
- Slick Carousel Blank Slides