Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replacing Slick slider with glide.js - no jQuery #78

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Replacing Slick slider with glide.js - no jQuery #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ce6142
First push with glide.js
mheland Jun 20, 2023
7eb59da
Main tag and positioning
mheland Jun 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 63 additions & 15 deletions default.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,48 @@
{{!-- Prismjs: css--}}
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

{{!-- glide.js slider on on homepage --}}

{{#is "home"}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.min.css">

{{!-- Add and override styles from glide.js --}}

<style type="text/css">

.slide-txt {
position: relative;
bottom: 5rem;
left: 20px;
}

.glide__slide img {
object-fit: cover;
position: relative;
height: 360px;
border-radius: 10px;
}


a.tf-tag-glider {
background-color: rgba(0,0,0,.7);
color: #fff;
border-radius: 6px;
padding: 5px 7px;
font-size: 1.1rem;
line-height: 1;
text-shadow: none;
font-weight: 400;
position: relative;
bottom: 11rem;
left: 20px;
}

</style>
{{/is}}


</head>

<body class="has-background-light-line">
Expand Down Expand Up @@ -87,22 +129,28 @@
{{!-- import js --}}
<script src="{{asset 'js/main.js'}}"></script>

{{!-- carousel: js --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function(){
$('#carousel-home').slick({
autoplay: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows:false,
dots: false,
centerMode: false,
focusOnSelect: false
});
});
{{!-- carousel: using glide.js --}}



{{#is "home"}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.min.js"></script>

<script>
window.addEventListener('load', function(){
new Glide('.glider', {
type: 'carousel',
startAt: 0,
perView: 1,
autoplay: 2000,
hoverpause: true,
}).mount();
})
</script>

{{/is}}


{{!-- switches: showcase & support_fizzy --}}
<script>
Expand Down
132 changes: 68 additions & 64 deletions partials/showcase.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,88 @@
{{!-- Homepage Showcase 2019.05.27--}}

{{!-- slick: css --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">


<section class="section showcase is-hidden" id="showcase">
<section class="section showcase" id="showcase">
<div class="columns">
<div class="column is-hidden-touch is-1-desktop is-1-widescreen is-2-fullhd"></div>
<div class="column is-12-tablet is-10-desktop is-10-widescreen is-8-fullhd">
<div class="columns">
{{!-- carousel start--}}

<div class="column is-7">
<div class="carousel" id="carousel-home">
{{!-- get 10 posts with tag #carousel as --}}
{{#get "posts" limit="6" include="tags,authors" filter="tags:[hash-carousel]" as |carousel|}}
{{#foreach carousel}}
<div class="carousel-item box img-bg has-shadow-lift can-scale" style="background-image: url({{img_url feature_image size="large"}});">
<a href="{{url}}" rel="bookmark" class="link-block"></a>
<div class="carousel-meta bg-grad-b">
{{#primary_tag}}
<div class="carousel-tag">
<a href="{{url}}" class="is-montserrat">{{name}}</a>
</div>
{{/primary_tag}}
<a href="{{url}}"><h2 class="is-size-4 is-size-5-mobile is-margin-bottom-05 has-text-white has-text-weight-semibold has-text-shadow-black">{{title}}</h2></a>
{{#primary_author}}
<div class="columns is-mobile is-vcentered">
<div class="column is-narrow" style="padding-right:.5em;">
<a href="{{url}}">
<figure class="image is-24x24">
<img class="image-squared is-rounded" src="
{{#if profile_image}}
{{img_url profile_image size="icon"}}
{{else}}
{{asset 'images/user-avatar-default.png'}}
{{/if}}
" alt="{{name}}" title="{{name}}">
</figure>
</a>
</div>

<div class="column is-narrow has-text-weight-bold is-hpaddingless">
<a href="{{url}}" class="has-text-white">{{name}}</a>
</div>
</div>
{{/primary_author}}
</div>
</div>
{{/foreach}}
{{/get}}
<div class="glider">

<div class="glide__track" data-glide-el="track">

<ul class="glide__slides">
{{!-- get 10 posts with tag #carousel as --}}
{{#get "posts" limit="6" include="tags,authors" filter="tags:[hash-carousel]" as
|carousel|}}
{{#foreach carousel}}

<li class="glide__slide">
<a href="{{url}}">
<img src="{{img_url feature_image size=" large"}}" alt="{{feature_image_alt}}">
<h2 class="slide-txt is-size-4 is-size-5-mobile has-text-white has-text-weight-semibold has-text-shadow-black">
{{title}}
</h2>

{{#primary_tag}}

<a class="tf-tag-glider .is-montserrat" href="{{url}}" class="is-montserrat">{{name}}</a>

{{/primary_tag}}

</a>
</li>


{{/foreach}}
{{/get}}
</ul>

</div>

</div>

</div>

{{!-- carousel end --}}

{{!-- top-featured start --}}
<div class="column is-5">
{{#get "posts" limit="2" include="tags" filter="featured:true" as |top-featured|}}
<div class="top-featured">
{{#top-featured}}
<div class="tf-item img-bg box has-shadow-lift can-scale" style="background-image: url({{img_url feature_image size="medium"}});background-position: center center;background-repeat: no-repeat;background-size: cover;">
<span class="featured-label is-montserrat" style="right:5px;top:5px;padding:0 3px;" title="{{t "Featured"}}"><i class="iconfont icon-star"></i> <span>{{t "Featured"}}</span></span>

{{!-- top-featured start --}}
<div class="column is-5">
{{#get "posts" limit="2" include="tags" filter="featured:true" as |top-featured|}}
<div class="top-featured">
{{#top-featured}}
<div class="tf-item img-bg box has-shadow-lift can-scale"
style="background-image: url({{img_url feature_image size=" medium"}});background-position:
center center;background-repeat: no-repeat;background-size: cover;">

<a href="{{url}}" rel="bookmark" class="link-block"></a>
<div class="tf-meta bg-grad-b">
<a href="{{url}}" rel="bookmark" class="link-block"></a>
<div class="tf-meta bg-grad-b">
<a href="{{url}}" rel="bookmark" class="link-block"></a>
{{#primary_tag}}
<div class="tf-tag">
<a href="{{url}}" class="is-montserrat">{{name}}</a>
</div>
{{/primary_tag}}
<a href="{{url}}"><h2 class="is-size-5 has-text-white has-text-weight-semibold has-text-shadow-black">{{title}}</h2></a>
</div>

{{#primary_tag}}
<div class="tf-tag">
<a href="{{url}}" class="is-montserrat">{{name}}</a>
</div>
{{/primary_tag}}


<a href="{{url}}">
<h2 class="is-size-5 has-text-white has-text-weight-semibold has-text-shadow-black">
{{title}}</h2>
</a>
</div>
{{/top-featured}}
</div>
{{/get}}
{{/top-featured}}
</div>
{{!-- top-featured end --}}
{{/get}}
</div>
<div class="column is-hidden-touch"></div>
{{!-- top-featured end --}}
</div>
<div class="column is-hidden-touch"></div>
</div>

<div class="column is-hidden-touch"></div>
</div>
</section>