{{ 'swiper-bundle.css' | asset_url | stylesheet_tag }}
{{ 'swiper-bundle.js' | asset_url | script_tag }}
<script src="{{ 'swiper-bundle.js' | asset_url }}" defer></script>
<style>
*{
margin: 0;
padding: 0;
}
.bigBlotcontent{
display:block;
}
.swiper.mySwiperBlot.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
display: none;
}
.bigBlot{
width: 100%;
height: 835px;
background-color:#F5F5F5 ;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
font-family: unset!imprtant;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top:76px;
}
.bigBlot ul{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.bigBlot ul li{
display: inline-block;
list-style: none;
margin-right:30px ;
}
.bigBlot ul li:nth-child(3n){
margin-right:0px ;
}
.bigBlotImage>img{
width: 380px;
height: 380px;
border-radius: 10px;
}
.bigBlotcontent .bigBlotTitle{
width: 380px;
padding: 0 50px;
text-align: center;
box-sizing: border-box;
font-weight: bold;
color: #000000;
font-size: 21px;
margin:20px 0;
}
.bigBlotDescript{
width: 380px;
padding: 0 50px;
text-align: center;
box-sizing: border-box;
font-size: 13px;
}
.bigBlotTitlehead>h3{
margin:68px 0;
text-align: center;
}
.bigBlotviewmore {
display: flex;
justify-content: center;
justify-content: center;
align-items: center;
}
.bigBlotviewmore button {
width: 305px;
height: 65px;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
opacity: 1;
border: 2px solid #000000;
font-size: 19px;
color:#000000;
margin-top:56px;
margin-bottom: 70px;
text-transform: unset;
}
button{
text-transform: unset;
}
@media (max-width:800px){
.bigBlotcontent{
display:none;
}
.bigBlot{
margin-top:35px;
width: 100%;
height:auto;
background-color:#F5F5F5 ;
background-position: center;
background-repeat: no-repeat;
background-size:cover;
font-family: unset!imprtant;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bigBlotImage{
width: 355px;
height: 355px;
border-radius: 5px 5px 5px 5px;
}
.bigBlotImage>img{
width: 355px;
height: 355px;
border-radius: 5px 5px 5px 5px;
object-fit:cover;
}
.swiper.mySwiperBlot.swiper-initialized.swiper-horizontal.swiper-ios.swiper-backface-hidden {
display:block;
width: 375px;
padding-left: 10px;
height:600px;
}
.bigBlotTitle>h3{
font-size: 18px;
}
.bigBlotDescript{
width:375px;
padding: 0 55px;
text-align: center;
box-sizing: border-box;
font-size: 10px;
}
.bigBlotTitle {
margin: 25px 0 0 0;
padding: 0 82px;
text-align: center;
font-size: 16px;
font-weight: 700;
}
.bigBlotTitlehead{
margin-top:35px;
margin-bottom:25px;
}
.bigBlotTitlehead>h3{
margin:0;
font-size: 16px;
}
.bigBlotviewmore button {
width: 111px;
height: 24px;
background: #ffffff;
border-radius: 3px 3px 3px 3px;
opacity: 1;
border: 1px solid #000000;
font-size: 8px;
color:#000000;
text-transform: unset;
margin:23px auto 28px;
display: flex;
align-items: center;
justify-content: center;
}
.bigBlotviewmore {
display: flex;
justify-content: center;
}
.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal {
top: 570px;
bottom: 30px;
width: 72px;
height: 7px;
border-radius: 5px;
left: 50%;
transform: translateX(-50%);
background: #ffffff;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
border-radius: 5px;
background: #3C65C8;
}
}
</style>
<div class="bigBlot">
<div class="bigBlotTitlehead">
<h3>{{section.settings.title}}</h3>
</div>
<!-- Pc端 -->
<div class="bigBlotcontent">
<ul>
{% assign blot = section.settings.blog %}
{% assign num = section.settings.post_limit %}
{% for article in blot .articles limit: num %}
<li>
<div class="bigBlotImage"><img src="{{article.image|image_url}}" alt=""></div>
<div class="bigBlotTitle">
<h3>{{article.title |escape}}</h3>
</div>
<div class="bigBlotDescript">
<span> {{ article.content | strip_html | truncatewords: 30 }}</span>
</div>
</li>
{% endfor %}
</ul>
</div>
<!--手機端 -->
<div class="swiper mySwiperBlot">
<div class="swiper-wrapper">
{% assign blot = section.settings.blog %}
{% assign num = section.settings.post_limit %}
{% for article in blot .articles limit: num %}
<div class="swiper-slide">
<div class="bigBlotImage"><img src="{{article.image|image_url}}" alt=""></div>
<div class="bigBlotTitle">
<h3>{{article.title |escape}}</h3>
</div>
<div class="bigBlotDescript">
<span> {{ article.content | strip_html | truncatewords: 30 }}</span>
</div>
</div>
{% endfor %}
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="bigBlotviewmore">
<button onclick="{{ section.settings.button_link}}">View More</button>
</div>
<script>
var swiper = new Swiper(".mySwiperBlot", {
pagination: {
el: ".swiper-pagination",
type: "progressbar",
}
});
</script>
{% schema %}
{
"name": "blot",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Blog posts"
},
{
"type": "blog",
"id": "blog",
"label": "Blog"
},
{
"type": "range",
"id": "post_limit",
"label": "Posts",
"min": 3,
"max": 12,
"step": 3,
"default": 3
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
],
"presets": [
{
"name": "blot"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
获取shopify后台blot的内容