Skip to content

Instantly share code, notes, and snippets.

@mhulse mhulse/css.css
Created Jan 29, 2019

Embed
What would you like to do?
Slick Carousel CSS/JS; putting here for posterity’s sake
.ap_library {
position: relative;
}
.ap_library > :first-child {
margin-top: 0;
}
.ap_library > :last-child {
margin-bottom: 0;
}
.ap_library {
margin: 4rem 0;
}
.ap_library-head {
font-size: 2rem;
padding-bottom: 2.5rem;
margin: 0 0 1rem;
border-bottom: 4px solid #fff;
}
.ap_library-button-all {
position: absolute;
top: 0;
right: 0;
}
.ap_library-carousel {
margin: 0 -0.5rem;
}
.ap_library-carousel .ap_library-carousel-slide {
margin: 0 0.5rem;
}
/* This does not work with “View All” button because that disables Slick! */
/*
.js .ap_library-carousel .ap_library-carousel-slide {
display: none;
}
.js .ap_library-carousel.slick-initialized .ap_library-carousel-slide {
display: block;
}
*/
.ap_library-carousel-slide-item {
margin-top: 1rem;
margin-bottom: 1rem;
}
.ap_library-carousel-slide-item > :first-child {
margin-top: 0;
}
.ap_library-carousel-slide-item > :last-child {
margin-bottom: 0;
}
.ap_library-carousel .slick-dots li button {
width: 1.5rem;
height: 1.5rem;
}
.ap_library-carousel .slick-dots li button::before {
content: '';
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
background: #afafaf;
}
/* Removed via JS: */
.ap_library-carousel[data-disabled] {
min-height: 20rem;
}
.ap_library-carousel[data-disabled] .ap_library-carousel-slide-item {
display: none;
}
.ap_library-carousel:not(.slick-initialized)::after {
content: "";
display: table;
clear: both;
}
.ap_library-carousel:not(.slick-initialized) > * {
float: left;
margin: 0;
padding: 0 0.5rem;
width: 50%;
}
<div class="ap_library">
<h3 id="videos-sue" class="ap_library-head">Sue Videos</h3>
<a class="ap_library-button-all ap_button ap_carousel-show" href="#">
View All
<i class="far fa-arrow-right"></i>
</a>
<div class="ap_library-carousel ap_carousel" data-disabled>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-296098778" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/726218814_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>2:58</time></p>
</a>
<h3><a href="#video-296098778" rel="modal:open">Sue talks about adding in pleasant activities to relieve stress, and how it has helped her</a></h3>
<p>To visit the full session click <a href="/home/session/5/22/">here</a></p>
</div>
<div id="video-296098778" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/271900024?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-272805482" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/726398712_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>2:34</time></p>
</a>
<h3><a href="#video-272805482" rel="modal:open">Sue manages her negative thoughts & talks with Ed about their not doing funs things together, anymore</a></h3>
<p>To visit the full session click <a href="/home/session/8/36/">here</a></p>
</div>
<div id="video-272805482" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/272805482?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-305798897" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/745913617_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>2:56</time></p>
</a>
<h3><a href="#video-305798897" rel="modal:open">Sue, dealing with her frustration and anger at Ed, talks with him about getting help</a></h3>
<p>To visit the full session click <a href="/home/session/12/73/">here</a></p>
</div>
<div id="video-305798897" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/305798897?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-277729251" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/727970227_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>4:14</time></p>
</a>
<h3><a href="#video-277729251" rel="modal:open">After a disappointing night in the bedroom, Sue talks with Ed about the effects of his drinking on their intimacy</a></h3>
<p>To visit the full session click <a href="/home/session/13/77/">here</a></p>
</div>
<div id="video-277729251" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/277729251?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-267933900" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/727979346_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>2:27</time></p>
</a>
<h3><a href="#video-267933900" rel="modal:open">Sue talks with Ed about taking care of house chores, again.</a></h3>
<p>To visit the full session click <a href="/home/session/16/113/">here</a></p>
</div>
<div id="video-267933900" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/267933900?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-280391633" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/728005687_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>2:27</time></p>
</a>
<h3><a href="#video-280391633" rel="modal:open">Sue dealswith Ed’s depression</a></h3>
<p>To visit the full session click <a href="/home/session/16/113/">here</a></p>
</div>
<div id="video-280391633" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/280391633?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
<div class="ap_library-carousel-slide">
<div class="ap_library-carousel-slide-item ap_nice">
<a href="#video-282707377" class="ap_tarmac" rel="modal:open">
<img src="https://i.vimeocdn.com/video/728009088_1280.jpg">
<p class="ap_media-text ap_media-sw ap_util-nowrap"><time>1:14</time></p>
</a>
<h3><a href="#video-282707377" rel="modal:open">Sue refuses to let Ed bring his guns back in the house</a></h3>
<p>To visit the full session click <a href="/home/session/19/134/">here</a></p>
</div>
<div id="video-282707377" class="ap_modal ap_modal-video modal">
<div class="ap_util-mm">
<iframe class="ap_vimeo" width="560" height="315" src="https://player.vimeo.com/video/282707377?title=0&byline=0&portrait=0&autoplay=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
$(function() {
var init = function($obj) {
$obj.on('init', function(event, slick) {
$(this).removeAttr('data-disabled');
});
return $obj.slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 2,
slidesToScroll: 2
});
}
var fixColumns = function($slick, remove) {
var klass = 'ap_clearer';
if (remove) {
$slick.children('.' + klass).remove();
} else {
// A simple way to clear every two floats:
$slick
.children('div:nth-child(2n)')
.after($('<div />', {
'class': klass
}));
}
};
var $carousel_show = $('.ap_carousel-show');
init($('.ap_carousel'));
if ($carousel_show.length) {
$carousel_show.click(function(event) {
var $this_slick = $(this).next();
event.preventDefault();
if ($this_slick.hasClass('slick-initialized')) {
$this_slick.slick('unslick');
fixColumns($this_slick);
} else {
fixColumns($this_slick, true);
init($this_slick);
}
});
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.