How can I add a slider to the logo section using Debut theme?

[Sat1]

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. 

[AkViradiya]

Yes we will help it.

You want to add a brand logo slider right??

[Sat1]

Yes, I have brand logos added but want slider.

[AkViradiya]

Yes, I can do it for you.

[Sat1]

Can you tell me the process to get this done.Thanks.

[AkViradiya]

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>

[AkViradiya]

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

[Soon]

Can you please clarify more this steps? i am lost here :

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

Where to add this code?

[AkViradiya]

Download css and js file and add it in the assets folder.

Then it will work it without any problem.

Thanks

[Soon]

the logos have a greyness, I need them to appear in their natural colors and Auto rotate slide without pause but must run continuously by presenting the list of logos?  

[Sat1]

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? 

[AkViradiya]

Share URL?

I will check it

[Sat1]

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.

[Soon]

The same things...

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?

[Soon]

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?

[SeanDTC]

You can now check this one: Brand Logo Slider Section 

Responsive,infinite scrolling, no limit to the number of images，controll the number of pictures displayed.

[gr_trading]

Hi @Sat1 ,

Kindly refer to the below video how you can create new section to add logo with autoplay. Since the code is custom written hence applicable for all the themes.

You need to download the code and follow the steps how to integrate into the theme and you are done.

Let me know if have questions.