Change Alignment of Text Assets on Slideshow between Slides

[GetClickt]

Hi All, 

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

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

<div data-section-id="{{ section.id }}" data-section-type="section-slideshow-v2-b" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %} {% if section.settings.sections_layout == "dark" %}background: {{section.settings.sections_bg_color}};{% endif %}">
  <div class="section-slideshow-v2-b">
      <div class="slick-side-h2">       
        {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}
        {% if block.type == "slideshow" %}
        <div class="itemv-slide-h1">
          <div class="info-sideh1">
            <div class="picture-slideshow">
              {% if block.settings.block_banerimage != blank %}
              <img src="{{block.settings.block_banerimage | img_url: 'master'}}" class="img-responsive img_slideh1" alt="">
              {% else %}
              <img src="//placehold.it/1920x980" class="img-responsive img_slideh1" alt="slideshow">
              {% endif %}
            </div>        
            <div class="box-content">
              {% if block.settings.block_subtitle != blank %}
              <p class="mb-0" style="color:{{block.settings.color_subtitle}};">{{block.settings.block_subtitle}}</p>
              {% endif %}              
              <div class="box-title">
                {% if block.settings.block_title_top != blank %}
                <h3 class="titlebig mb-0" style="color:{{block.settings.color_block_title_top}};">{{ block.settings.block_title_top }}</h3>
                {% endif %} 
              </div>
              <div class="box-title2">
                {% if block.settings.block_title_top2 != blank %}
                <h3 class="title-small mb-0" style="color:{{block.settings.color_content}};">{{ block.settings.block_title_top2 }}</h3>
                {% endif %}
              </div>
              <div class="box-button">
                {% if block.settings.block_buton != blank %}
                <a class="button-shop" href="{{block.settings.block_url}}" style="color:{{block.settings.color_block_button}}; background-color:{{block.settings.color_bg_block_button}}">
                  {{ block.settings.block_buton }}
                </a>
                {% endif %}
              </div>              
            </div>
            
          </div>
        </div>
        {% endif %}
        {% endfor %}
        {% endif %}
        
      </div>
  </div>
</div>

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,

[suyash1]

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

[KetanKumar]

@GetClickt 

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

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

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

[GetClickt]

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

shopifyhelp

Thanks.

[KetanKumar]

@GetClickt 

thanks can you please confirm look

[GetClickt]

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

[KetanKumar]

@GetClickt 

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

[GetClickt]

Slide 1. - All Content Right Hand Side.

Slide 2. - All Content Left Hand Side.

[KetanKumar · Accepted solution]

@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;}
}

[GetClickt]

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.

[KetanKumar]

@GetClickt 

its my pleasure to help us