HELP! Replacing my site's existing slider

Highlighted
New Member
1 0 0

Hi. We currently have a really complicated slider banner. I really just wanna do a simple one. I want it to go from this: Screen Shot 2019-09-03 at 12.58.09 AM.png

To something like this:

Screen Shot 2019-09-03 at 12.58.27 AM.png

 

Been experimenting with the code but no luck. I'm not super savvy with complicated codes so I need help. Here's the code:

 
<div class="slider-area{% if sset.slider_width == 'def' %} section-padding-1{% endif %}" >
  <div class="slider-active owl-carousel nav-style-{% if sset.nav_style == 'style_1' %}1{% elsif sset.nav_style == 'style_3' %}3{% else %}2 dot-style-1{% endif %}" >
    {%- for block in section.blocks -%}{%- assign bset = block.settings -%}
    <div class="single-slider d-flex align-items-center" style="background-color:{{ sset.sec_bg_color }};height:{{ sset.p_top }}px;">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
            <div class="slider-content slider-animated-1 text-{% if bset.content_align == 'center' %}center{% elsif bset.content_align == 'right' %}right{% else %}left{% endif %}">
              {%- if bset.title1 != '' -%}
              <h1 class="animated" style="color:{{ sset.title1_color }};font-size:{{ sset.title1_font_size }}px;">{{ bset.title1 }}</h1>
              {%- endif -%}
 
              {%- if bset.description != '' -%}
              <p class="animated" style="color:{{ sset.description_color }};font-size:{{ sset.description_font_size }}px;">{{ bset.description }}</p>
              {%- endif -%}
 
              {%- if bset.btn != '' -%}
              <div class="slider-btn btn-hover">
                <a class="animated" style="font-size:{{ sset.btn_font_size }}px;" href="{{ bset.btn_url }}">{{ bset.btn }}
                  {% if bset.show_icon %} <i style="font-size:{{ sset.btn_font_size }}px;" class="sli sli-basket-loaded"></i>{% endif %}
                </a>
              </div>
              {%- endif -%}
            </div>
          </div>
          <div class="col-xl-6 col-lg-6 col-md-6 col-12 col-sm-6">
            <div class="slider-single-img slider-animated-1">
              {%- if bset.slider_img -%}
              <img class="animated" src="{{ bset.slider_img | img_url: 'master' }}" alt="{{ image.alt }}">
              {%- else -%}
              <img class="animated" src="https://via.placeholder.com/620x877" alt="{{ image.alt }}">
              {%- endif -%}
            </div>
          </div>
        </div>
      </div>
    </div>
0 Likes
Tourist
12 0 1

Hi @kristovblue 

 

I will give advice to use LayerSlider and create a simple layer slider without any coding. You can drag-and-drop and have an excellent slider and astonish to your customers and be creative.

They have a trial period and live chat inside the app, also if you have any help then they will help you.

 

0 Likes