How to make a slider footer by running the site partners?

Question

Well, I’ve seen it on some sites I’ve even looked on the Internet for some example but I couldn’t find it so I’ll ask for help here.

I’ve seen it on some sites and now I need to implement a footer in slider running the site partners, if anyone can help me I am grateful.

Follow the example I saw: Website link.

Before the footer the site has div partners would like an equal if someone can help me there.

My gallery I want you to do this:

.mt {
    margin-top: 50px;
}

/* CLIENTS */

.clients img {
    max-width: 140px;
    max-height: 60px;
    vertical-align: middle;
}

.clients .col-sm-2 {
    height: 80px;
    line-height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt" >
            <div class="row clients centered" >
                <p class="mb "><b>Parceiros</b></p>
                <div class="col-sm-2 col-sm-offset-1">
                    <img src="assets/img/client1.png" alt="">
                </div>
                <div class="col-sm-2">
                    <img src="assets/img/client3.png" alt="">
                </div>
                <div class="col-sm-2">
                    <img src="assets/img/client2.png" alt="">
                </div>
                <div class="col-sm-2">
                    <img src="assets/img/client4.png" alt="">
                </div>
                <div class="col-sm-2">
                    <img src="assets/img/client5.png" alt="">
                </div>
            </div>
            <!--/row-->
        </div>
        <!--/container-->
    </div>
    <!--/.G-->

Answer 1

By analyzing the source code website you posted, we can see that it uses the Owl.carousel.js, according to the code below:

<script type='text/javascript' src='http://brouaventuras.com.br/wp-content/themes/consulting/assets/js/owl.carousel.min.js?ver=3.4'></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        var owlRtl = false;
        if( $('body').hasClass('rtl') ) {
            owlRtl = true;
        }
        $("#owl-5a05a531b739d").owlCarousel({
            rtl: owlRtl,
                            autoplay: true,
                            dots: false,
                            loop: true,
                            autoplayTimeout: 1000,
            smartSpeed: 250,
            responsive: {
                0: {
                    items: 2                    },
                768: {
                    items: 4                    },
                980: {
                    items: 5                    },
                1199: {
                    items: 6                    }
            }
        });
    });
</script>

See the example below of how to implement it.

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: 1000, //Set AutoPlay to 3 seconds
    dots: true,
    items: 2,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [979, 3]
  });
});

#owl-demo .item {
  margin: 3px;
}

#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.owl-theme .owl-controls .owl-page {
  display: inline-block;
}

.owl-theme .owl-controls .owl-page span {
  background: none repeat scroll 0 0 #869791;
  border-radius: 20px;
  display: block;
  height: 12px;
  margin: 5px 7px;
  opacity: 0.5;
  width: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet" />
<div id="owl-demo">
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
  <div class="item">
    <img src="http://placehold.it/50x50" alt="Owl Image" />
  </div>
</div>

Example reference in Jsfiddle.

Answer 2

There is a library called Slick as well as the Owl Carousel which you can use to make this transition effect, and which is specific to this. Click the blue button Execute to get a preview of how it works.

$(document).ready(function() {
$('.customer-logos').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1000,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
        breakpoint: 768,
        settings: {
            slidesToShow: 3
        }
    }, {
        breakpoint: 520,
        settings: {
            slidesToShow: 2
        }
    }]
});
});

/* Slider */
.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="customer-logos">
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
  <div class="slide"><img src="http://placehold.it/150x150"></div>
</div>

Example taken from this Jsfiddle.