Logo section - slider needed

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
Shopify Partner
26 1 1

Yes we will help it.

You want to add a brand logo slider right??

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

Yes, I can do it for you.

 

0 Likes
Tourist
7 0 1
Can you tell me the process to get this done.Thanks.
0 Likes
Shopify Partner
26 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
Shopify Partner
26 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
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
Shopify Partner
26 1 1

Share URL?

I will check it

0 Likes
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