Logo section - slider needed

Sat1
Tourist
7 0 1

I have a number of logos on the logo section and want to add a slider so they automatically slide across at the bottom of my homepage. Can someone help? I am using Debut theme. Need the information to be in the for of 'coding for dummies' because I am not an expert on this. 

0 Likes
AkViradiya
Shopify Partner
27 1 1

Yes we will help it.

You want to add a brand logo slider right??

0 Likes
Sat1
Tourist
7 0 1
Yes, I have brand logos added but want slider.
0 Likes
AkViradiya
Shopify Partner
27 1 1

Yes, I can do it for you.

 

0 Likes
Sat1
Tourist
7 0 1
Can you tell me the process to get this done.Thanks.
0 Likes
AkViradiya
Shopify Partner
27 1 1

Create a section with brand-logo.liquid

<!-- our-brand-area start -->
<section class="our-brand-logo">
  <div class="brand-logo owl-carousel owl-theme" id="brand-logo">
    {% for block in section.blocks %}
    <div class="item">
      <div class="brand-img">
        <a href="javascript&colon;void(0)">
          <img class="img-fluid" src="{% if block.settings.brand_image %}{{ block.settings.brand_image | img_url: '120x250' }} {% else %}https://via.placeholder.com/120x250 {% endif %}" alt="{{ block.settings.brand_image.alt }}">
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

<!-- our-brand-area end -->
<script>
  $('#brand-logo').owlCarousel({
    loop: true,
    rewind: true,
    margin: 0,
    nav: false,
    navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    dots: false,
    {%- if settings.enable_rtl -%}
    rtl: true,
    {%- endif -%}
    autoplay: true, 
    sautoplayTimeout: 5000,
    autoplayHoverPause: true,
    responsive:{
      0:{
        items: 2,
        margin: 15
      },
      479:{
        items: 2,
         margin: 15
      },
      768:{
        items: 4
      },
      979:{
        items: 4
      },
      1199:{
        items: 7
      }
    }
  });
</script>
{% schema %}
{
  "name": "Brand Logo",
  "settings": [
  {
    "type": "header",
    "content": "Section Padding"
  },
  {
    "type" : "paragraph",
    "content" : "Desktop / Laptop / tablet"
  },
  {
    "type": "range",
    "id": "brand_padding_top",
    "label": "Section Padding Top",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 60
  },
  {
    "type": "range",
    "id": "brand_padding_bottom",
    "label": "Section Padding bottom",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 60
  },
  {
    "type" : "paragraph",
    "content" : "Mobile"
  },
  {
    "type": "range",
    "id": "brand_padding_top_xs",
    "label": "Section Padding Top",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 40
  },
  {
    "type": "range",
    "id": "brand_padding_bottom_xs",
    "label": "Section Padding bottom",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 40
  },
  {
    "type" : "header",
    "content" : "Background Color"
  },
  {
    "type" : "checkbox",
    "id" : "brand_check",
    "label" : "With Backgorund",
    "default" : true
  },
  {
    "type" : "color",
    "id" : "brand_bgcolor",
    "label" : "Background Color",
    "default" : "#fff"
  }
],
  "blocks":[
  {
    "type": "single_brand",
    "name": "Single Brand Logo",
    "settings": [
    {
      "type": "image_picker",
      "id": "brand_image",
      "label": "Brand Image",
      "info": "Recommended Size: 170 x 82px"
    }
    ]
  }
  ],
  "presets":[
  {
    "name": "Brand Logo",
    "category": "brand logo"
  }
  ]
}
{% endschema %}

<style>
  .our-brand-logo {
    padding-top:{{ section.settings.brand_padding_top }}px;
    padding-bottom:{{ section.settings.brand_padding_bottom }}px;
    {% if section.settings.brand_check %}
    background-color: {{ section.settings.brand_bgcolor }};
    {% endif %}
  }
  @media (max-width: 767px){
    .our-brand-logo {
      padding-top:{{ section.settings.brand_padding_top_xs }}px;
      padding-bottom:{{ section.settings.brand_padding_bottom_xs }}px;
    }
  }

  .our-brand-logo .brand-logo .brand-img{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: 1px solid #ebebeb;
    border-right-color: transparent;
    padding: 25px 0;
  }
  .our-brand-logo .brand-logo a img {
    opacity: 0.5;
  }
  .our-brand-logo .brand-logo a:hover img {
    opacity: 1;
  }
  .our-brand-logo .brand-logo a img,
  .our-brand-logo .brand-logo a:hover img {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
</style>
0 Likes
AkViradiya
Shopify Partner
27 1 1

In the theme.liquid file

{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}
{{ 'owl.theme.default.min.css' | asset_url | stylesheet_tag }}

<script src="{{ 'owl.carousel.min.js' | asset_url }}"></script>

Download the Files below links and add to your asset.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

0 Likes
Sat1
Tourist
7 0 1

I have added this to the section, however the brand logo feature appears but the logos are added underneath each other rather than horizontal and doesn't give me the option to introduce a slider? 

0 Likes
AkViradiya
Shopify Partner
27 1 1

Share URL?

I will check it

0 Likes
Sat1
Tourist
7 0 1
resetonline.co.uk p/w weulah. Also the logos have a greyness, I need them
to appear in their natural colours and still have the link to the
brands when clicked on the icons that are displayed. See my featured logo
list, same thing but in slider format.
0 Likes