Vertical slider banner in dawn theme

[Lujainkhan786]

I am trying to make the banner slider to swipe vertically in dawn theme like one in saya.pk , please help

[Huptech-Web]

Hello! @Lujainkhan786 Could you please share the store URL? This will allow me to inspect it and provide you with a more tailored solution.

[Lujainkhan786]

https://saya.pk/

[EBOOST]

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

[Lujainkhan786]

it dose not work it just created a new section