me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add list of articles by same author(s) to each article page

Browse Source 
It is in the form of a carousel
This commit is contained in:
Matthew Grove
2019-03-05 21:54:07 +00:00
parent 3b67b7a5d7
commit 8269352852
30 changed files with 993 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
_includes/article-carousel.html Normal file
View File

@@ -0,0 +1,50 @@
{% if site.categories.articles.size > 1 %}
{% assign article_list_displayed = false %}
{% for article in site.categories.articles %}
{% if article.url != page.url %}
{% for author in article.authors %}
{% for current_author in page.authors %}
{% if author == current_author %}
{% if article_list_displayed == false %}
<h2 class="mdc-typography--headline5">
{% if page.authors.first %}
Other Articles By These Authors
{% else %}
Other Articles By This Author
{% endif %}
</h2>
<!-- define carousel -->
<div class="carousel">
{% assign article_list_displayed = true %}
{% endif %}
<!-- display article -->
<div class="mdc-card carousel-item">
<div class="mdc-card__media mdc-card__media--16-9 {{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }}"></div>
<div class="mdc-card-content">
<h2 class="mdc-typography--headline6">{{ article.title }}</h2>
<h3 class="mdc-typography--subtitle2">
<time class="timeago" datetime="{{ article.date | date: '%Y-%m-%d' }}T{{ article.date | date: '%H:%M:%S' }}">{{ article.date | date: '%A %e %B %Y' }}</time>
| by {{ article.authors }}
</h3>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button" data-mdc-auto-init="MDCRipple" onclick="window.location='{{ article.url | relative_url }}';">Read</button>
</div>
</div>
<style>
.{{ article.url | relative_url | replace: '/', '-' | replace: '.', '-' }} {
background-image: url("/images/{{ article.url | relative_url | remove: '.html' | replace: '/', '-' | remove: '-articles-' }}--cover.jpg");
}
</style>
</div>
{% break %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
{% endfor %}
<!-- close carousel -->
</div>
{% endif %}

7
_includes/article-page-head.html Normal file
View File

@@ -0,0 +1,7 @@
<link href="/css/slick.css" rel="stylesheet">
<link href="/css/slick-theme.css" rel="stylesheet">
<!-- <script src="/js/jquery-migrate-1.4.1.min.js"></script> -->
<script src="/js/jquery-migrate-3.0.0.min.js"></script>
<script src="/js/slick.min.js"></script>
<link href="/css/article-page.css" rel="stylesheet">
<script src="/js/article-page.js"></script>

1
_includes/head.html
View File

@@ -42,4 +42,5 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>

1
_layouts/404.html
View File

@@ -18,6 +18,7 @@
</div>
</main>
{% include footer.html %}
{% include top-scroll-button.html %}
</div>
</body>
<style>

1
_layouts/article-list.html
View File

@@ -2,7 +2,6 @@
<html>
{% include head.html %}
<link href="/css/mdc-card-list.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
{% include cookie-notice.html %}

5
_layouts/image-article.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<link href="/css/article-page.css" rel="stylesheet">
{% include article-page-head.html %}
<body>
<!-- cookie notice is included automatically -->
{% include cookie-notice.html %}
@@ -24,9 +24,12 @@
<figcaption class="mdc-typography--caption-text">{{ page.image-caption }}</figcaption>
</figure>
{{ content }}
{% include article-carousel.html %}
</div>
</main>
{% include footer.html %}
{% include top-scroll-button.html %}
</div>
</body>
</html>

5
_layouts/video-article.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
{% include head.html %}
<link href="/css/article-page.css" rel="stylesheet">
{% include article-page-head.html %}
<body>
<!-- cookie notice is included automatically -->
{% include cookie-notice.html %}
@@ -24,9 +24,12 @@
<figcaption class="mdc-typography--caption-text">{{ page.video-caption }}</figcaption>
</figure>
{{ content }}
{% include article-carousel.html %}
</div>
</main>
{% include footer.html %}
{% include top-scroll-button.html %}
</div>
</body>
</html>

5
_site/404.html
View File

@@ -44,6 +44,7 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<body>
@@ -107,6 +108,10 @@ Click <a href="/">here</a> to see the articles Reading School’s year 8 student
<span >&copy; Reading School 2019 | Made by <a href="https://matthew-grove.ml">Matthew Grove</a></span>
</footer>
<a href="javascript:scrollUp()" class="top-scroll-button">
<img alt="Scroll to top" src="/images/up-arrow.png">
</a>
</div>
</body>
<style>

52
_site/css/article-page.css
View File

@@ -1,3 +1,4 @@
/* make text look nice */
.mdc-typography--headline2, .mdc-typography--subtitle1 {
text-transform: capitalize;
}
@@ -8,6 +9,8 @@
font-style: italic;
}
/* adjust video dimensions depending on screen size */
iframe {
width: 100%;
height: calc(68.8vw / 16 * 9);
@@ -31,3 +34,52 @@ iframe {
height: calc(93.5vw / 16 * 9);
}
}
/* make article cards look nice by altering margins */
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
/* change carousel dots' styling to make them more visible */
.slick-dots {
position: relative;
bottom: 0;
margin: auto;
}
.slick-dots li button:before {
font-size: 30px;
}
.slick-dots li.slick-active button::before {
font-size: 40px;
color: var(--mdc-theme-primary);
top: 0.5px;
}
/* ensure buttons don't get in the way & enable scrolling */
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
}
/* ensure MDC cards are separated enough that they are distinguishable */
.carousel-item {
margin: 4px;
}
/* remove excessive margin below carousel */
.slick-dotted.slick-slider {
margin-bottom: 13px;
}

0
_site/css/carousel-mdc-card-list.css Normal file
View File

40
_site/css/global.css
View File

@@ -111,3 +111,43 @@ footer img {
color: var(--mdc-theme-secondary);
text-decoration: none;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #273967;
display: none;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

39
_site/css/mdc-card-list.css
View File

@@ -75,42 +75,3 @@
float: left;
clear: left;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #273967;
display: none;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

204
_site/css/slick-theme.css Normal file
View File

@@ -0,0 +1,204 @@
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}

119
_site/css/slick.css Normal file
View File

@@ -0,0 +1,119 @@
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}

2
_site/index.html
View File

@@ -44,10 +44,10 @@
<!-- import local styling & scripts -->
<script src="/js/global.js"></script>
<link href="/css/global.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
</head>
<link href="/css/mdc-card-list.css" rel="stylesheet">
<script src="/js/top-scroll-button.js"></script>
<body>
<!-- cookie notice is included automatically -->
<div id="cookies">

39
_site/js/article-page.js Normal file
View File

@@ -0,0 +1,39 @@
$(document).ready(function(){
// initiate carousel
$('.carousel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 2,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// overwrite auto-generated inline styling
$(".slick-prev, .slick-next").hide();
});

2
_site/js/jquery-migrate-1.4.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
_site/js/jquery-migrate-3.0.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
_site/js/slick.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
_site/sitemap.xml
View File

@@ -5,7 +5,7 @@
<url>
<loc>/404.html</loc>
<lastmod>2019-03-04</lastmod>
<lastmod>2019-03-05</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>
@@ -16,7 +16,7 @@
<url>
<loc>/</loc>
<lastmod>2019-03-04</lastmod>
<lastmod>2019-03-05</lastmod>
<changefreq>hourly</changefreq>
<priority>0.5</priority>
</url>

52
css/article-page.css
View File

@@ -1,3 +1,4 @@
/* make text look nice */
.mdc-typography--headline2, .mdc-typography--subtitle1 {
text-transform: capitalize;
}
@@ -8,6 +9,8 @@
font-style: italic;
}
/* adjust video dimensions depending on screen size */
iframe {
width: 100%;
height: calc(68.8vw / 16 * 9);
@@ -31,3 +34,52 @@ iframe {
height: calc(93.5vw / 16 * 9);
}
}
/* make article cards look nice by altering margins */
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0;
}
/* change carousel dots' styling to make them more visible */
.slick-dots {
position: relative;
bottom: 0;
margin: auto;
}
.slick-dots li button:before {
font-size: 30px;
}
.slick-dots li.slick-active button::before {
font-size: 40px;
color: var(--mdc-theme-primary);
top: 0.5px;
}
/* ensure buttons don't get in the way & enable scrolling */
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
}
/* ensure MDC cards are separated enough that they are distinguishable */
.carousel-item {
margin: 4px;
}
/* remove excessive margin below carousel */
.slick-dotted.slick-slider {
margin-bottom: 13px;
}

0
css/carousel-mdc-card-list.css Normal file
View File

40
css/global.css
View File

@@ -111,3 +111,43 @@ footer img {
color: var(--mdc-theme-secondary);
text-decoration: none;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #273967;
display: none;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

39
css/mdc-card-list.css
View File

@@ -75,42 +75,3 @@
float: left;
clear: left;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
text-align: center;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #273967;
display: none;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button img {
position: relative;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.top-scroll-button:hover, .top-scroll-button:focus {
background-color: #1C2E56;
}
.top-scroll-button:hover img {
top: 3px;
}

204
css/slick-theme.css Normal file
View File

@@ -0,0 +1,204 @@
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color: transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: 'slick';
font-size: 20px;
line-height: 1;
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: '←';
}
[dir='rtl'] .slick-prev:before
{
content: '→';
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: '→';
}
[dir='rtl'] .slick-next:before
{
content: '←';
}
/* Dots */
.slick-dotted.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -25px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}

119
css/slick.css Normal file
View File

@@ -0,0 +1,119 @@
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}

39
js/article-page.js Normal file
View File

@@ -0,0 +1,39 @@
$(document).ready(function(){
// initiate carousel
$('.carousel').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true,
autoplay: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 2,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
// overwrite auto-generated inline styling
$(".slick-prev, .slick-next").hide();
});

2
js/jquery-migrate-1.4.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
js/jquery-migrate-3.0.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
js/slick.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long