SLIDER CENTER MODE

Nên tạo section riêng để khỏi đụng css theme.

liquid section
{{ ‘tzn_timeline.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{{ section.settings.heading }}

{% for block in section.blocks %}

{% if block.settings.image != blank %}

{% endif %}

{% endfor %}

{% for block in section.blocks %}

{{ block.settings.year }}

{{ block.settings.title }}

{{ block.settings.description }}

{% endfor %}

{% schema %}
{
“name”: “Timeline”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“label”: “Heading”,
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “timeline_item”,
“name”: “Timeline Item”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “text”,
“id”: “year”,
“label”: “Year”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
},
{
“type”: “richtext”,
“id”: “description”,
“label”: “Description”
}
]
}
],
“presets”: [
{
“name”: “Timeline Section”,
“category”: “Custom”
}
]
}
{% endschema %}

//css

.timeline-slider_thumb .timeline-item {
width: 20% !important;
height: 19.375rem;
margin: 0 !important;
transition: all 0.5s;
}
.timeline-slider_thumb::before {
content: ”;
display: block;
position: absolute;
top: calc(50% – 0.0625rem);
width: 100%;
height: 0.125rem;
background-color: #BFBFBF;
}
.timeline-slider_thumb .timeline-item:not(.is-selected) {
top: 2.5rem;
}
.timeline-slider_thumb .timeline-item .img__slider {
transform: scale(0.5);
}
.timeline-slider_thumb .timeline-item.is-prev .img__slider {
transform: scale(0.77) translateX(-2.5rem);
}
.timeline-slider_thumb .timeline-item.is-next .img__slider {
transform: scale(0.77) translateX(2.5rem);
}
.timeline-item.is-selected .img__slider {
transform: scale(1);
}
.img__slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
.timeline-item .img__slider {
transition: all 0.5s;
transform: scaleY(0.78) translateY(3rem);
}
.timeline-item.is-selected .img__slider {
transition: all 0.5s;
transform: scaleY(1);
}
.timeline-item.is-selected * {
height: 100%;
}
.timeline-slider_content {
max-width: 37.5rem;
margin: 1.875rem auto 0;
text-align: center;
}
h2.timeline-heading {
text-align: center;
margin-bottom: 2rem;
}
.timeline-title, .timeline-year {
font-size: 1.625rem;
line-height: 2.25rem;
letter-spacing: 0;
color: #523500;
font-weight: 400;
margin-top: 0;
font-family: var(–heading-font);
}
.timeline-title {
font-size: 1.25rem;
line-height: 1.875rem;
font-family: var(–heading-medium);
max-width: 28rem;
margin: 1.25rem auto;
}
.timeline-desc {
text-align: left;
}
.timeline-slider_thumb .flickity-prev-next-button.previous {
left: -5px;
}
.timeline-slider_thumb .flickity-prev-next-button.next {
right: -5px;
}
.timeline-slider_thumb .flickity-prev-next-button {
height: 1.25rem;
opacity: .5;
}

//Jquery (nên viết ở file main js)

var $contentSlider = $(‘.timeline-slider_content’).flickity({
asNavFor: ‘.timeline-slider_thumb’,
prevNextButtons: false,
fade: true,
pageDots: false
});

var $thumbSlider = $(‘.timeline-slider_thumb’).flickity({
freeScroll: true,
prevNextButtons: true,
wrapAround: true,
pageDots: false
});

function updatePrevNext() {
var flkty = $thumbSlider.data(‘flickity’);
var $cells = $(flkty.getCellElements());
var index = flkty.selectedIndex;

$cells.removeClass('is-prev is-next');

var prevIndex = (index - 1 + $cells.length) % $cells.length;
var nextIndex = (index + 1) % $cells.length;

$cells.eq(prevIndex).addClass('is-prev');
$cells.eq(nextIndex).addClass('is-next');

}

$thumbSlider.on(‘select.flickity’, updatePrevNext);
updatePrevNext();