Change Alignment of Text Assets on Slideshow between Slides

Store Design
1

Hi All,

My slideshow currently aligns text and button assets to the right as per the image below.

Slide-Right.png
Slide-Right.png1236×619 438 KB

With this as the slideshow code (obviously CSS isn’t here)


  

      
       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        

          

            

              {% if block.settings.block_banerimage != blank %}
              
              {% else %}
              
              {% endif %}
            
        
            
              {% if block.settings.block_subtitle != blank %}
              

{{block.settings.block_subtitle}}

              {% endif %}              
              
                {% if block.settings.block_title_top != blank %}
                ### {{ block.settings.block_title_top }}
                {% endif %} 
              

              
                {% if block.settings.block_title_top2 != blank %}
                ### {{ block.settings.block_title_top2 }}
                {% endif %}
              

              
                {% if block.settings.block_buton != blank %}
                
                  {{ block.settings.block_buton }}
                
                {% endif %}
              
              
            

            
          

        

        {% endif %}
        {% endfor %}
        {% endif %}

I’ve attached full code in separate files below. This code seems to apply the same settings to each slide in the slideshow as it iterates through the loop. What I’d like to do is set the alignment of the Text/Button assets on each slide - or in much more basic terms - leave as-is in Slide 1, Align Left in Slide 2.

I already have the code for Slide 2, (slideshow v1 attached) - but I’m having difficulty editing the .liquid to sub in that code when I want it. Any help you can offer would be much appreciated.

Thanks,

2

@GetClickt - can you please share the page link where you have this slideshow?

3

@GetClickt

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

https://3c9vmvly4gtygwkm-55738728526.shopifypreview.com

shopifyhelp

Thanks.

5

@GetClickt

thanks can you please confirm look

KetanKumar_0-1652093285856.png
KetanKumar_0-1652093285856.png1920×1080 294 KB

6

Basically correct, yes - I’m wanting that section to float left, however the base css isn’t the issue - it’s changing it through the slides.

I’m wanting Slide 1 (slick-slide00 in the HTML) to be as is now with right alignment, however Slide 2 (aria-describedby=“slick-slide01”) to have the left alignment.

The code iterates through the loop applying the same settings to each slide, it’s this that I’m trying to change.

I guess I’d be happy enough to drop a css script onto the homepage code that alters this, however I’m not actually sure what selector I need to use to code it for each slide.

Thanks

Thanks

7

@GetClickt

i have just confirm all content do you need on left side right?

8

Slide 1. - All Content Right Hand Side.

Slide 2. - All Content Left Hand Side.

9

@GetClickt

thanks for clear asap can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/engo-customize.scss ->paste below code at the bottom of the file.
@media (min-width: 576px) {
    .itemv-slide-h1[data-slick-index="1"] .box-content {left: 10% !important;right: inherit !important;}
}
10

Perfect - thank you! I got caught up in trying to manipulate the actual slider code that I hadn’t thought about hardcoding the CSS separately - and then couldn’t find the relevant selector to target only that slide.

Thanks again. You’re a lifesaver.

11

@GetClickt

its my pleasure to help us