Created
January 29, 2019 21:05
-
-
Save mhulse/58f654026db64b7939c95700a04e4e28 to your computer and use it in GitHub Desktop.
Slick Carousel CSS/JS; putting here for posterity’s sake
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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