Shopify themes, liquid, logos, and UX
I am trying to make the banner slider to swipe vertically in dawn theme like one in saya.pk , please help
Hello! @Lujainkhan786 Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.
Hi @Lujainkhan786 ,
I checked the demo. I saw they grouped all sections to one. After that use the swiper library to create a slider.
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Create a section with content below:
{% if template == 'index' %}
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
.swiper {
width: 100%;
height: 100%;
}
body { display: block;}
body,
html,
#MainContent{
height: 100%;
}
#MainContent section[id*="__slideshownew"]{
position: relative;
height: 100%;
}
.swiper-slide {
display: flex;
background: #fff;
width: 100%;
}
.swiper-slide .swiper-slide-inner {
width: 100%;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.shopify-section.shopify-section-group-footer-group {
display: none;
}
.swiper-slide.section-group-footer {
align-items: flex-end;
}
@media(min-width: 1200px){
.featured-product {
flex-wrap: nowrap;
}
}
</style>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
</div>
<div class="swiper-pagination"></div>
</div>
<script src="//cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var HTML = '';
$('#MainContent .section').each(function(){
if($(this).hasClass('section-slider-vertical')){
console.log('This is main section')
}else{
HTML += '<div class="swiper-slide '+ $(this).attr('class') +'"><div class="swiper-slide-inner">' + $(this).html() + '</div></div>';
$(this).remove();
}
})
HTML += '<div class="swiper-slide section-group-footer"><div class="shopify-section-group-footer-group swiper-slide-inner">' + $('.shopify-section.shopify-section-group-footer-group').html() + '</div></div>';
$('#MainContent section .swiper-wrapper').append(HTML);
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
speed: 800,
mousewheel: true,
updateOnWindowResize:true,
slidesPerView: 1,
navigation: {
nextEl: '.down-arrow',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable:true
},
keyboard: {
enabled: true,
onlyInViewport: false,
},
effect: "creative",
creativeEffect: {
prev: {
translate: [ 0, "-0%" , -1],
},
next: {
translate: [0, "100%", 0],
},
},
});
})
</script>
{% endif %}
{% schema %}
{
"name": "Slideshow vertical",
"tag": "section",
"class": "section-slider-vertical",
"disabled_on": {
"groups": ["header", "footer"]
},
"presets": [
{
"name": "Slideshow new"
}
]
}
{% endschema %}
3. Go to customize add "Slideshow vertical" section
it dose not work it just created a new section
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024