Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Vertical slider banner in dawn theme

Vertical slider banner in dawn theme

Lujainkhan786
Visitor
3 0 0

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

Replies 4 (4)

Huptech-Web
Shopify Partner
1010 204 217

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Lujainkhan786
Visitor
3 0 0

EBOOST
Shopify Partner
1247 324 373

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 %}

EBOOST_0-1718095489688.png

3. Go to customize add "Slideshow vertical" section

EBOOST_1-1718095594127.png

 

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
Lujainkhan786
Visitor
3 0 0

it dose not work it just created a new section