Create a clients we work with automatic slider

Question

I want to create a "Clients that work with us" section on my website but I am not sure how to go about doing so. I want it to slide across consistenly rotating between the companies. A good example of one I'd like to replicate is on pickspace.com. I believe they got it from WordPress. Any suggestions on how to replicate this or a thread saying how to do it? Thanks for the help in advance!

 /*=============== Partners Section ===============*/

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



 
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}


/*=============== SERVICES MODAL ===============*/
const modalViews = document.querySelectorAll('.services__modal'),
      modalBtns = document.querySelectorAll('.services__button'),
      modalClose = document.querySelectorAll('.services__modal-close')

let modal = function(modalClick){
    modalViews[modalClick].classList.add('active-modal')
}

modalBtns.forEach((mb, i) =>{
    mb.addEventListener('click', () =>{
        modal(i)
    })
})

modalClose.forEach((mc) =>{
    mc.addEventListener('click', () =>{
        modalViews.forEach((mv) =>{
            mv.classList.remove('active-modal')
        })
    })
})



/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*=============== GSAP ANIMATION ===============*/
TweenMax.from('.home__title', 1, {delay: .2, opacity: 0, y: 20,ease: Expo.easeInOut})
TweenMax.from('.home__description', 1, {delay: .3, opacity: 0, y: 20,ease: Expo.easeInOut})
TweenMax.from('.home__button', 1, {delay: .4, opacity: 0, y: 20,ease: Expo.easeInOut})
TweenMax.from('.home__liquid', 1, {delay: .7, opacity: 0, y: 200,ease: Expo.easeInOut})
TweenMax.from('.home__juice-animate', 1, {delay: 1.2, opacity: 0, y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__apple1', 1, {delay: 1.5,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__apple2', 1, {delay: 1.6,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(1)', 2, {delay: 1.3,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(2)', 2, {delay: 1.4,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(3)', 2, {delay: 1.5,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(4)', 2, {delay: 1.6,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(5)', 2, {delay: 1.7,opacity: 0,y: -800,ease: Expo.easeInOut})
TweenMax.from('.home__leaf:nth-child(6)', 2, {delay: 1.8,opacity: 0,y: -800,ease: Expo.easeInOut})

.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}
.slick-slide {
  margin: 0px 30px;
}

.slick-slide img {
  width: 100%;

}

.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.slick-list.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;
}


    
    
        
        
       
        

        
        

        
        
        
        
        
        

       
        

        
        
        
        



    
    

        


        
        

        
        

            
           













    Clients We Work With

usersoCO · Answer

A marquee is a original html tag for scrolling and this site has a working example on how to do a scrolling box using marquee and css.

https://www.html.am/html-codes/marquees/html-scrolling-text.cfm

Create a clients we work with automatic slider

1 Answers